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"]}    />  );}

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} />;}

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)} />;}

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")}    />  );}

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"]}    />  );}

import { FeatureFlagPanel } from "@launchapp/design-system/blocks/admin";const flags = [  {    id: "1",    key: "new_dashboard",    name: "New Dashboard",    description: "Enable the redesigned dashboard layout.",    environments: { development: true, staging: true, production: false },    createdAt: "2024-01-01",    updatedAt: "2024-01-15",  },  {    id: "2",    key: "ai_assistant",    name: "AI Assistant",    description: "Enable AI-powered suggestions.",    environments: { development: true, staging: false, production: false },    createdAt: "2024-02-01",    updatedAt: "2024-02-01",  },];export default function Page() {  return (    <FeatureFlagPanel      flags={flags}      onToggle={(flag, env, enabled) => console.log("toggle", flag.key, env, enabled)}    />  );}

import { StatusPage } from "@launchapp/design-system/blocks/admin";const services = [  { id: "api", name: "API", description: "REST and GraphQL APIs", status: "operational", uptime: 99.98 },  { id: "web", name: "Web App", description: "Main web application", status: "operational", uptime: 99.95 },  { id: "db", name: "Database", description: "Primary database cluster", status: "degraded", uptime: 99.82 },];export default function Page() {  return (    <StatusPage      services={services}      overallStatus="degraded"      title="System Status"    />  );}

import { AuditLogViewer } from "@launchapp/design-system/blocks/activity";const logs = [  { id: "1", timestamp: "2025-01-15T10:23:00Z", action: "user.login", actor: "Alice Johnson", actorEmail: "alice@example.com", resource: "auth", level: "info", severity: "low", description: "User signed in successfully." },  { id: "2", timestamp: "2025-01-15T10:45:00Z", action: "api_key.created", actor: "Bob Smith", actorEmail: "bob@example.com", resource: "api_keys", resourceId: "key_abc123", level: "info", severity: "medium", description: "New API key created with read/write scope." },  { id: "3", timestamp: "2025-01-15T11:00:00Z", action: "user.deleted", actor: "Carol White", actorEmail: "carol@example.com", resource: "users", resourceId: "usr_xyz", level: "warning", severity: "high", description: "User account deleted." },  { id: "4", timestamp: "2025-01-15T11:30:00Z", action: "billing.payment_failed", actor: "system", resource: "billing", level: "error", severity: "critical", description: "Payment processing failed." },];export default function Page() {  return (    <AuditLogViewer      logs={logs}      title="Audit Log"      onExport={() => console.log("export")}    />  );}