Admin
API key management, audit logs, user management, and system admin tools.
API Key Manager
Create, view, and revoke API keys with permission scopes and expiry.
Preview
API Keys
2 keys
Production Key
Active
sk-p************xxxx
Created: 2024-01-01
read
write
Read-only Key
Active
sk-r**********xxxx
Created: 2024-02-01
read
API Key Manager.tsx
import { APIKeyManager } from "@launchapp/design-system/blocks/admin";const keys = [ { id: "1", name: "Production Key", key: "sk-prod-xxxx", createdAt: "2024-01-01", active: true, permissions: ["read", "write"] }, { id: "2", name: "Read-only Key", key: "sk-ro-xxxx", createdAt: "2024-02-01", active: true, permissions: ["read"] },];export default function Page() { return ( <APIKeyManager keys={keys} onCreateKey={(data) => console.log("create", data)} onRevokeKey={(id) => console.log("revoke", id)} onCopyKey={(key) => navigator.clipboard.writeText(key)} availablePermissions={["read", "write", "admin"]} /> );}Audit Log Viewer
Paginated audit log with search, level filters, and action filters.
Preview
Audit Log
3 entries
Level:
INFO
WARN
ERROR
DEBUG
Action:
Created
Updated
Deleted
Login
Logout
API Call
Config
User Action
Audit Log Viewer.tsx
import { AuditLogViewer } from "@launchapp/design-system/blocks/admin";const logs = [ { id: "1", actor: { name: "Alice" }, action: "user.create", level: "info", timestamp: "2024-01-01T10:00:00Z", message: "Created user bob@example.com" }, { id: "2", actor: { name: "Bob" }, action: "api_key.revoke", level: "warning", timestamp: "2024-01-02T11:00:00Z", message: "Revoked key sk-xxx" },];export default function Page() { return <AuditLogViewer logs={logs} pageSize={20} />;}System Settings Panel
Admin panel for toggling system-wide feature flags and configuration.
Preview
No preview available
See the code snippet below for usage.
System Settings Panel.tsx
import { SystemSettingsPanel } from "@launchapp/design-system/blocks/admin";const settings = [ { id: "maintenance", label: "Maintenance Mode", description: "Take the site offline for maintenance", enabled: false }, { id: "signups", label: "New Signups", description: "Allow new user registrations", enabled: true },];export default function Page() { return <SystemSettingsPanel settings={settings} onToggle={(id, value) => console.log(id, value)} />;}User Management Table
Admin table for managing users — ban, unban, edit, and delete.
Preview
Users
3 total users
| Name | Role | Status | Created | Last Active | ||
|---|---|---|---|---|---|---|
A Alice Johnson | alice@example.com | Admin | Active | 2024-01-01 | 2024-01-15 | |
B Bob Smith | bob@example.com | Editor | Active | 2024-02-01 | 2024-02-10 | |
C Carol White | carol@example.com | Viewer | Pending | 2024-03-01 | 2024-03-01 |
Rows per page:
Page 1 of 1
User Management Table.tsx
import { UserManagementTable } from "@launchapp/design-system/blocks/admin";const users = [ { id: "1", name: "Alice Johnson", email: "alice@example.com", role: "admin", status: "active", createdAt: "2024-01-01" }, { id: "2", name: "Bob Smith", email: "bob@example.com", role: "member", status: "active", createdAt: "2024-02-01" },];export default function Page() { return ( <UserManagementTable users={users} onBanUser={(id) => console.log("ban", id)} onDeleteUser={(id) => console.log("delete", id)} onAddUser={() => console.log("add user")} /> );}Webhook Manager
Create and manage outbound webhooks with event subscriptions and delivery logs.
Preview
No preview available
See the code snippet below for usage.
Webhook Manager.tsx
import { WebhookManager } from "@launchapp/design-system/blocks/admin";const webhooks = [ { id: "1", url: "https://example.com/hook", events: ["user.created"], active: true, createdAt: "2024-01-01" },];export default function Page() { return ( <WebhookManager webhooks={webhooks} onCreateWebhook={(data) => console.log("create", data)} onDeleteWebhook={(id) => console.log("delete", id)} onToggleWebhook={(id, active) => console.log(id, active)} availableEvents={["user.created", "user.deleted", "payment.succeeded"]} /> );}