feat(portal): M10.1 — fill the 10 customer-area shells
Four real surfaces wired to tenant-registry (settings, settings/api-keys CRUD, audit pagination, products live entitlements), five forward-looking empty states with CTAs. 56 vitest tests + 10 Playwright canaries. lib/format.ts consolidates date helpers. Refs: M10.1
This commit was merged in pull request #12.
This commit is contained in:
@@ -1,16 +1,266 @@
|
||||
import { revalidatePath } from "next/cache";
|
||||
import { redirect } from "next/navigation";
|
||||
import { auth } from "@/auth";
|
||||
import { NotAuthorized, ShellEmpty } from "@/components/ShellEmpty";
|
||||
import { NotAuthorized } from "@/components/ShellEmpty";
|
||||
import { formatDateTime, formatRelative, truncate } from "@/lib/format";
|
||||
import type { SessionWithExtras } from "@/lib/session";
|
||||
import { canSee } from "@/lib/session";
|
||||
import {
|
||||
createAPIKey,
|
||||
fetchAPIKeys,
|
||||
fetchCatalog,
|
||||
fetchTenantBySlug,
|
||||
revokeAPIKey,
|
||||
type APIKey,
|
||||
} from "@/lib/tenant-registry";
|
||||
|
||||
export default async function Page() {
|
||||
export default async function APIKeysPage({
|
||||
params,
|
||||
searchParams,
|
||||
}: {
|
||||
params: Promise<{ slug: string }>;
|
||||
searchParams: Promise<{ plaintext?: string; err?: string }>;
|
||||
}) {
|
||||
const { slug } = await params;
|
||||
const flash = await searchParams;
|
||||
const session = (await auth()) as SessionWithExtras | null;
|
||||
if (!canSee(session, "api-keys")) return <NotAuthorized />;
|
||||
|
||||
const tenant = await fetchTenantBySlug(slug);
|
||||
if (!tenant) redirect(`/${slug}/dashboard`);
|
||||
|
||||
const [keys, catalog] = await Promise.all([
|
||||
fetchAPIKeys(tenant.id),
|
||||
fetchCatalog(),
|
||||
]);
|
||||
const active = keys.filter((k) => !k.revoked_at);
|
||||
const revoked = keys.filter((k) => k.revoked_at);
|
||||
|
||||
async function doCreate(formData: FormData) {
|
||||
"use server";
|
||||
const name = String(formData.get("name") ?? "").trim();
|
||||
const product = String(formData.get("product") ?? "").trim();
|
||||
const tenantId = String(formData.get("tenant_id"));
|
||||
const slugV = String(formData.get("slug"));
|
||||
if (!name) redirect(`/${slugV}/settings/api-keys?err=missing_name`);
|
||||
|
||||
const res = await createAPIKey({
|
||||
tenant_id: tenantId,
|
||||
name,
|
||||
product: product || undefined,
|
||||
});
|
||||
if (!res.ok) {
|
||||
redirect(`/${slugV}/settings/api-keys?err=${res.error}`);
|
||||
}
|
||||
revalidatePath(`/${slugV}/settings/api-keys`);
|
||||
redirect(`/${slugV}/settings/api-keys?plaintext=${encodeURIComponent(res.plaintext)}`);
|
||||
}
|
||||
|
||||
async function doRevoke(formData: FormData) {
|
||||
"use server";
|
||||
const id = String(formData.get("id"));
|
||||
const slugV = String(formData.get("slug"));
|
||||
const res = await revokeAPIKey(id);
|
||||
if (!res.ok) {
|
||||
redirect(`/${slugV}/settings/api-keys?err=${res.error}`);
|
||||
}
|
||||
revalidatePath(`/${slugV}/settings/api-keys`);
|
||||
redirect(`/${slugV}/settings/api-keys`);
|
||||
}
|
||||
|
||||
return (
|
||||
<ShellEmpty
|
||||
title="API keys"
|
||||
description="Per-tenant API keys for headless product access."
|
||||
milestone="M15.1"
|
||||
/>
|
||||
<section>
|
||||
<h1 style={{ fontSize: 28, marginBottom: 8 }}>API keys</h1>
|
||||
<p style={{ color: "#444", marginBottom: 16 }}>
|
||||
Per-tenant keys for headless product calls. Hashed with argon2id;
|
||||
the plaintext is shown <strong>once</strong> on creation.
|
||||
</p>
|
||||
|
||||
{flash.plaintext && <PlaintextBanner plaintext={flash.plaintext} />}
|
||||
{flash.err && <ErrorBanner err={flash.err} />}
|
||||
|
||||
<h2 style={{ fontSize: 18, marginTop: 24, marginBottom: 8 }}>Create a new key</h2>
|
||||
<form action={doCreate} style={{ display: "grid", gap: 8, maxWidth: 480 }}>
|
||||
<input type="hidden" name="tenant_id" value={tenant.id} />
|
||||
<input type="hidden" name="slug" value={slug} />
|
||||
<label style={{ display: "grid", gap: 4, fontSize: 14 }}>
|
||||
<span>Name</span>
|
||||
<input name="name" required maxLength={100} placeholder="ci-bot" style={inputStyle} />
|
||||
</label>
|
||||
<label style={{ display: "grid", gap: 4, fontSize: 14 }}>
|
||||
<span>Product scope (optional)</span>
|
||||
<select name="product" defaultValue="" style={inputStyle}>
|
||||
<option value="">All products</option>
|
||||
{catalog.map((p) => (
|
||||
<option key={p.key} value={p.key}>
|
||||
{p.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<button type="submit" style={btnPrimary}>
|
||||
Create key
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<h2 style={{ fontSize: 18, marginTop: 32, marginBottom: 8 }}>
|
||||
Active keys ({active.length})
|
||||
</h2>
|
||||
{active.length === 0 ? (
|
||||
<p style={{ color: "#666", fontSize: 14 }}>No active keys.</p>
|
||||
) : (
|
||||
<KeyTable keys={active} doRevoke={doRevoke} slug={slug} canRevoke />
|
||||
)}
|
||||
|
||||
{revoked.length > 0 && (
|
||||
<>
|
||||
<h2 style={{ fontSize: 18, marginTop: 32, marginBottom: 8 }}>
|
||||
Revoked ({revoked.length})
|
||||
</h2>
|
||||
<KeyTable keys={revoked} doRevoke={doRevoke} slug={slug} canRevoke={false} />
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function PlaintextBanner({ plaintext }: { plaintext: string }) {
|
||||
return (
|
||||
<div
|
||||
role="status"
|
||||
style={{
|
||||
padding: 12,
|
||||
marginTop: 8,
|
||||
marginBottom: 8,
|
||||
borderRadius: 8,
|
||||
background: "#e6f7ec",
|
||||
border: "1px solid #a4d8b8",
|
||||
}}
|
||||
>
|
||||
<strong style={{ color: "#0a6e2a", fontSize: 14 }}>Key created</strong>
|
||||
<p style={{ margin: "8px 0", fontSize: 13, color: "#444" }}>
|
||||
Store this value — it cannot be retrieved later.
|
||||
</p>
|
||||
<code
|
||||
style={{
|
||||
display: "block",
|
||||
padding: "8px 10px",
|
||||
background: "white",
|
||||
border: "1px solid #ddd",
|
||||
borderRadius: 6,
|
||||
fontSize: 13,
|
||||
wordBreak: "break-all",
|
||||
}}
|
||||
>
|
||||
{plaintext}
|
||||
</code>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ErrorBanner({ err }: { err: string }) {
|
||||
return (
|
||||
<div
|
||||
role="status"
|
||||
style={{
|
||||
padding: 12,
|
||||
marginTop: 8,
|
||||
marginBottom: 8,
|
||||
borderRadius: 8,
|
||||
background: "#fdecea",
|
||||
border: "1px solid #e8a5a5",
|
||||
color: "#a82626",
|
||||
fontSize: 14,
|
||||
}}
|
||||
>
|
||||
{err === "name_taken" && "A key with that name already exists."}
|
||||
{err === "missing_name" && "Name is required."}
|
||||
{err === "invalid_input" && "Input failed validation."}
|
||||
{!["name_taken", "missing_name", "invalid_input"].includes(err) && `Error: ${err}`}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function KeyTable({
|
||||
keys,
|
||||
doRevoke,
|
||||
slug,
|
||||
canRevoke,
|
||||
}: {
|
||||
keys: APIKey[];
|
||||
doRevoke: (fd: FormData) => Promise<void>;
|
||||
slug: string;
|
||||
canRevoke: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div style={{ overflow: "auto" }}>
|
||||
<table style={{ width: "100%", fontSize: 13, borderCollapse: "collapse" }}>
|
||||
<thead>
|
||||
<tr style={{ textAlign: "left", borderBottom: "1px solid #eaeaea" }}>
|
||||
<th style={th}>Name</th>
|
||||
<th style={th}>Prefix</th>
|
||||
<th style={th}>Product</th>
|
||||
<th style={th}>Created</th>
|
||||
<th style={th}>Last used</th>
|
||||
{canRevoke && <th style={th}></th>}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{keys.map((k) => (
|
||||
<tr key={k.id} style={{ borderBottom: "1px solid #f0f0f0" }}>
|
||||
<td style={td}>{truncate(k.name, 30)}</td>
|
||||
<td style={{ ...td, fontFamily: "ui-monospace, monospace" }}>{k.prefix}…</td>
|
||||
<td style={td}>{k.product || <em style={{ color: "#999" }}>all</em>}</td>
|
||||
<td style={td} title={formatDateTime(k.created_at)}>
|
||||
{formatRelative(k.created_at)}
|
||||
</td>
|
||||
<td style={td}>
|
||||
{k.last_used_at ? formatRelative(k.last_used_at) : <em style={{ color: "#999" }}>never</em>}
|
||||
</td>
|
||||
{canRevoke && (
|
||||
<td style={td}>
|
||||
<form action={doRevoke}>
|
||||
<input type="hidden" name="id" value={k.id} />
|
||||
<input type="hidden" name="slug" value={slug} />
|
||||
<button type="submit" style={btnDanger}>
|
||||
Revoke
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const inputStyle: React.CSSProperties = {
|
||||
padding: "8px 10px",
|
||||
border: "1px solid #ddd",
|
||||
borderRadius: 6,
|
||||
fontSize: 14,
|
||||
};
|
||||
const btnPrimary: React.CSSProperties = {
|
||||
marginTop: 4,
|
||||
padding: "8px 14px",
|
||||
background: "#0070f3",
|
||||
color: "white",
|
||||
border: "none",
|
||||
borderRadius: 6,
|
||||
fontSize: 14,
|
||||
cursor: "pointer",
|
||||
justifySelf: "start",
|
||||
};
|
||||
const btnDanger: React.CSSProperties = {
|
||||
padding: "4px 8px",
|
||||
background: "white",
|
||||
color: "#a82626",
|
||||
border: "1px solid #e8a5a5",
|
||||
borderRadius: 4,
|
||||
fontSize: 12,
|
||||
cursor: "pointer",
|
||||
};
|
||||
const th: React.CSSProperties = { padding: "8px 10px", color: "#666", fontWeight: 500 };
|
||||
const td: React.CSSProperties = { padding: "8px 10px" };
|
||||
|
||||
@@ -9,8 +9,9 @@ export default async function Page() {
|
||||
return (
|
||||
<ShellEmpty
|
||||
title="Integrations"
|
||||
description="Webhooks, outbound integrations, external IdP config."
|
||||
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."
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,16 +1,120 @@
|
||||
import { auth } from "@/auth";
|
||||
import { NotAuthorized, ShellEmpty } from "@/components/ShellEmpty";
|
||||
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";
|
||||
|
||||
export default async function Page() {
|
||||
export default async function SettingsPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ slug: string }>;
|
||||
}) {
|
||||
const { slug } = await params;
|
||||
const session = (await auth()) as SessionWithExtras | null;
|
||||
if (!canSee(session, "settings")) return <NotAuthorized />;
|
||||
|
||||
const tenant = await fetchTenantBySlug(slug);
|
||||
if (!tenant) {
|
||||
return (
|
||||
<section>
|
||||
<h1 style={{ fontSize: 28 }}>Settings</h1>
|
||||
<p style={{ color: "#a82626" }}>Tenant not found.</p>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ShellEmpty
|
||||
title="Settings"
|
||||
description="Tenant identity, SSO, organization defaults."
|
||||
milestone="M10.1"
|
||||
/>
|
||||
<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>
|
||||
|
||||
<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} />
|
||||
|
||||
<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 />
|
||||
)}
|
||||
|
||||
<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 />
|
||||
|
||||
<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>
|
||||
</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";
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,8 +9,9 @@ export default async function Page() {
|
||||
return (
|
||||
<ShellEmpty
|
||||
title="Users"
|
||||
description="Invite IT_ADMIN, CXO, FINANCE, LEGAL, USER. Role assignment."
|
||||
milestone="M10.1"
|
||||
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."
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user