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>
This commit is contained in:
Sharang Parnerkar
@@ -1,17 +1,76 @@
|
||||
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 SSOPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ slug: string }>;
|
||||
}) {
|
||||
const { slug } = await params;
|
||||
const session = await getPortalSession();
|
||||
if (!canSee(session, "integrations")) return <NotAllowed need="IT_ADMIN" />;
|
||||
const t = await loadTenantForShell(slug);
|
||||
if (!t) return null;
|
||||
|
||||
const groupMappings: [string, string][] = [
|
||||
[`${t.id}/groups/it-admins`, "IT_ADMIN"],
|
||||
[`${t.id}/groups/cxo`, "CXO"],
|
||||
[`${t.id}/groups/finance`, "FINANCE"],
|
||||
[`${t.id}/groups/legal`, "LEGAL"],
|
||||
[`${t.id}/groups/all-users`, "USER"],
|
||||
];
|
||||
|
||||
export default async function Page() {
|
||||
const session = (await auth()) as SessionWithExtras | null;
|
||||
if (!canSee(session, "integrations")) return <NotAuthorized />;
|
||||
return (
|
||||
<ShellEmpty
|
||||
title="Integrations"
|
||||
description="Webhooks, outbound integrations, and external IdP configuration."
|
||||
milestone="M15.2"
|
||||
details="Webhook delivery (signed payloads, retry-with-backoff, dead-letter queue) lands alongside the headless-product API surface."
|
||||
/>
|
||||
<div className="content-inner" style={{ maxWidth: 1080 }}>
|
||||
<div className="page-head">
|
||||
<div>
|
||||
<div className="page-title">SSO</div>
|
||||
<div className="page-sub">Single sign-on via Keycloak (OIDC) — managed by Breakpilot Platform</div>
|
||||
</div>
|
||||
<div className="ph-actions">
|
||||
<span className="row" style={{ gap: 8 }}>
|
||||
<span className="dot ok" />
|
||||
<span className="mono" style={{ fontSize: 11 }}>connection healthy</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid g-12">
|
||||
<div className="span-7 col" style={{ gap: 12 }}>
|
||||
<Panel title="OIDC summary" bracket>
|
||||
<dl className="dl">
|
||||
<dt>Provider</dt><dd>Keycloak (breakpilot-dev realm)</dd>
|
||||
<dt>Protocol</dt><dd className="mono">OpenID Connect / authorization_code + PKCE</dd>
|
||||
<dt>Issuer</dt><dd className="mono">{process.env.KEYCLOAK_ISSUER ?? "http://localhost:8080/realms/breakpilot-dev"}</dd>
|
||||
<dt>Client ID</dt><dd className="mono">{process.env.KEYCLOAK_CLIENT_ID ?? "dev-portal"}</dd>
|
||||
<dt>Redirect URI</dt><dd className="mono">{`https://${t.id}.breakpilot.eu/api/auth/callback/keycloak`}</dd>
|
||||
<dt>Scopes</dt><dd className="mono">openid profile email tenant-context</dd>
|
||||
<dt>Signing alg</dt><dd className="mono">RS256 (JWKS, rotated 90d)</dd>
|
||||
</dl>
|
||||
</Panel>
|
||||
</div>
|
||||
|
||||
<div className="span-5 col" style={{ gap: 12 }}>
|
||||
<Panel title="IdP group → role mapping" pad={false}>
|
||||
<table className="ltable">
|
||||
<thead>
|
||||
<tr><th>Keycloak group</th><th>Maps to</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{groupMappings.map(([g, role]) => (
|
||||
<tr key={g}>
|
||||
<td className="mono t-id">{g}</td>
|
||||
<td><span className="role-chip">{role}</span></td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</Panel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
+101
-103
@@ -1,120 +1,118 @@
|
||||
import { auth } from "@/auth";
|
||||
import { NotAuthorized } from "@/components/ShellEmpty";
|
||||
import { formatDateTime } from "@/lib/format";
|
||||
import type { SessionWithExtras } from "@/lib/session";
|
||||
import { canSee } from "@/lib/session";
|
||||
import { fetchTenantBySlug } from "@/lib/tenant-registry";
|
||||
import { getPortalSession } from "@/lib/get-session";
|
||||
import { loadTenantForShell } from "@/lib/portal-data";
|
||||
import { Panel } from "@/components/portal/Panel";
|
||||
import { Monogram } from "@/components/portal/Monogram";
|
||||
import { NotAllowed } from "@/components/portal/NotAllowed";
|
||||
|
||||
export default async function SettingsPage({
|
||||
// "Organization" — IT_ADMIN only.
|
||||
export default async function OrganizationPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ slug: string }>;
|
||||
}) {
|
||||
const { slug } = await params;
|
||||
const session = (await auth()) as SessionWithExtras | null;
|
||||
if (!canSee(session, "settings")) return <NotAuthorized />;
|
||||
const session = await getPortalSession();
|
||||
if (!canSee(session, "settings")) return <NotAllowed need="IT_ADMIN" />;
|
||||
const t = await loadTenantForShell(slug);
|
||||
if (!t) return null;
|
||||
|
||||
const tenant = await fetchTenantBySlug(slug);
|
||||
if (!tenant) {
|
||||
return (
|
||||
<section>
|
||||
<h1 style={{ fontSize: 28 }}>Settings</h1>
|
||||
<p style={{ color: "#a82626" }}>Tenant not found.</p>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
const subscribed = t.products.filter((p) => t.entitled.includes(p.id));
|
||||
const trialing = t.products.filter((p) => t.trialing.includes(p.id));
|
||||
const seatsLeft = t.seats.total - t.seats.used;
|
||||
const pct = t.seats.total > 0 ? (t.seats.used / t.seats.total) * 100 : 0;
|
||||
|
||||
return (
|
||||
<section>
|
||||
<h1 style={{ fontSize: 28, marginBottom: 8 }}>Settings</h1>
|
||||
<p style={{ color: "#444", marginBottom: 24 }}>
|
||||
Tenant identity and lifecycle metadata. Editing these lands in the
|
||||
M10.1 follow-up; for now contact <a href={`/${slug}/support`}>support</a>.
|
||||
</p>
|
||||
<div className="content-inner" style={{ maxWidth: 1080 }}>
|
||||
<div className="page-head">
|
||||
<div>
|
||||
<div className="page-title">Organization</div>
|
||||
<div className="page-sub">
|
||||
Tenant profile, entitlements & primary contact
|
||||
</div>
|
||||
</div>
|
||||
<div className="ph-actions">
|
||||
<button type="button" className="btn">Export profile</button>
|
||||
<button type="button" className="btn btn-primary">Edit details</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 style={{ fontSize: 18, marginTop: 16, marginBottom: 8 }}>Identity</h2>
|
||||
<Field label="Tenant ID" value={tenant.id} mono />
|
||||
<Field label="Slug" value={tenant.slug} mono />
|
||||
<Field label="Name" value={tenant.name} />
|
||||
<Field label="Kind" value={tenant.kind} />
|
||||
<div className="grid g-12">
|
||||
<div className="span-7 col" style={{ gap: 12 }}>
|
||||
<Panel title="Legal entity" bracket>
|
||||
<dl className="dl">
|
||||
<dt>Legal name</dt><dd>{t.name}</dd>
|
||||
<dt>Form</dt><dd className="mono">{t.legalType}</dd>
|
||||
<dt>Registered</dt><dd>{t.city} · {t.country}</dd>
|
||||
<dt>VAT ID</dt><dd className="mono">{t.vat}</dd>
|
||||
<dt>Tenant ID</dt><dd className="mono">{t.id}</dd>
|
||||
<dt>Customer since</dt><dd className="mono">{t.since}</dd>
|
||||
</dl>
|
||||
</Panel>
|
||||
|
||||
<h2 style={{ fontSize: 18, marginTop: 24, marginBottom: 8 }}>Plan & status</h2>
|
||||
<Field label="Plan" value={tenant.plan} />
|
||||
<Field label="Status" value={tenant.status} badge={statusColor(tenant.status)} />
|
||||
{tenant.trial_ends_at && (
|
||||
<Field label="Trial ends at" value={formatDateTime(tenant.trial_ends_at)} mono />
|
||||
)}
|
||||
<Panel title="Primary contact">
|
||||
<div className="row" style={{ gap: 12 }}>
|
||||
<span className="avatar" style={{ width: 38, height: 38, fontSize: 13 }}>
|
||||
{t.contact.split(" ").map((s) => s[0]).join("")}
|
||||
</span>
|
||||
<div>
|
||||
<div style={{ fontWeight: 600 }}>{t.contact}</div>
|
||||
<div className="mono muted" style={{ fontSize: 12 }}>{t.contactEmail}</div>
|
||||
</div>
|
||||
<span className="spacer" />
|
||||
<span className="tag"><span className="dot accent" /> ADMIN OWNER</span>
|
||||
</div>
|
||||
</Panel>
|
||||
</div>
|
||||
|
||||
<h2 style={{ fontSize: 18, marginTop: 24, marginBottom: 8 }}>Audit</h2>
|
||||
<Field label="Created" value={formatDateTime(tenant.created_at)} mono />
|
||||
<Field label="Last updated" value={formatDateTime(tenant.updated_at)} mono />
|
||||
<div className="span-5 col" style={{ gap: 12 }}>
|
||||
<Panel title="Plan & seats">
|
||||
<div className="row between" style={{ alignItems: "flex-start", marginBottom: 14 }}>
|
||||
<div>
|
||||
<div className="eyebrow">PLAN</div>
|
||||
<div style={{ fontSize: 17, fontWeight: 600, marginTop: 3 }}>{t.plan}</div>
|
||||
<div className="mono muted" style={{ fontSize: 11 }}>{t.planCode}</div>
|
||||
</div>
|
||||
<div style={{ textAlign: "right" }}>
|
||||
<div className="eyebrow">RENEWS</div>
|
||||
<div className="mono" style={{ fontSize: 14, marginTop: 3, color: t.renewal === "overdue" ? "var(--danger)" : "inherit" }}>{t.renewal}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row between" style={{ marginBottom: 6 }}>
|
||||
<span className="label-micro">SEATS</span>
|
||||
<span className="mono" style={{ fontSize: 12 }}>{t.seats.used} / {t.seats.total}</span>
|
||||
</div>
|
||||
<div className="meter"><span style={{ width: `${pct}%` }} /></div>
|
||||
<div className="muted mono" style={{ fontSize: 10.5, marginTop: 6 }}>{seatsLeft} seats available</div>
|
||||
</Panel>
|
||||
|
||||
<h2 style={{ fontSize: 18, marginTop: 24, marginBottom: 8 }}>External links</h2>
|
||||
<p style={{ fontSize: 13, color: "#666" }}>
|
||||
ERPNext customer + Polar subscription land in M8.3; rendered here when
|
||||
the IDs land on the tenant row.
|
||||
</p>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function Field({
|
||||
label,
|
||||
value,
|
||||
mono,
|
||||
badge,
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
mono?: boolean;
|
||||
badge?: string;
|
||||
}) {
|
||||
return (
|
||||
<div style={{ display: "flex", padding: "6px 0", borderBottom: "1px solid #f0f0f0" }}>
|
||||
<span style={{ width: 160, color: "#666", fontSize: 13 }}>{label}</span>
|
||||
<span
|
||||
style={{
|
||||
fontFamily: mono
|
||||
? "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
|
||||
: "inherit",
|
||||
fontSize: mono ? 13 : 14,
|
||||
}}
|
||||
>
|
||||
{badge ? (
|
||||
<span
|
||||
style={{
|
||||
padding: "2px 8px",
|
||||
borderRadius: 4,
|
||||
background: badge,
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: 0.4,
|
||||
}}
|
||||
>
|
||||
{value}
|
||||
</span>
|
||||
) : (
|
||||
value
|
||||
)}
|
||||
</span>
|
||||
<Panel title="Products subscribed" tail={<span className="label-micro">{subscribed.length} active</span>} pad={false}>
|
||||
<div className="kv-list" style={{ padding: "2px 14px" }}>
|
||||
{subscribed.map((p) => (
|
||||
<div className="kv" key={p.id}>
|
||||
<span className="row" style={{ gap: 9 }}>
|
||||
<Monogram text={p.mono} size={24} />
|
||||
<span className="kvk" style={{ fontWeight: 500, color: "var(--ink)", whiteSpace: "nowrap" }}>{p.name}</span>
|
||||
</span>
|
||||
<span className="tag"><span className="dot ok" /> ENTITLED</span>
|
||||
</div>
|
||||
))}
|
||||
{trialing.map((p) => (
|
||||
<div className="kv" key={p.id}>
|
||||
<span className="row" style={{ gap: 9 }}>
|
||||
<Monogram text={p.mono} size={24} />
|
||||
<span className="kvk" style={{ fontWeight: 500, color: "var(--ink)" }}>{p.name}</span>
|
||||
</span>
|
||||
<span className="tag"><span className="dot warn" /> TRIALING</span>
|
||||
</div>
|
||||
))}
|
||||
{subscribed.length === 0 && trialing.length === 0 ? (
|
||||
<div className="muted" style={{ padding: "12px 0", fontSize: 12 }}>No active products.</div>
|
||||
) : null}
|
||||
</div>
|
||||
</Panel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function statusColor(s: string): string {
|
||||
switch (s) {
|
||||
case "active":
|
||||
return "#1a7a3e";
|
||||
case "trial":
|
||||
return "#a87a00";
|
||||
case "frozen":
|
||||
return "#a82626";
|
||||
case "archived":
|
||||
return "#666";
|
||||
case "demo":
|
||||
return "#0070f3";
|
||||
default:
|
||||
return "#444";
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user