@seedgrid/fe-apikeys 2026.7.0

package/README.md

@@ -0,0 +1,77 @@
+# @seedgrid/fe-apikeys
+
+[![npm version](https://img.shields.io/npm/v/%40seedgrid%2Ffe-apikeys)](https://www.npmjs.com/package/@seedgrid/fe-apikeys)
+[![npm downloads](https://img.shields.io/npm/dm/%40seedgrid%2Ffe-apikeys)](https://www.npmjs.com/package/@seedgrid/fe-apikeys)
+[![TypeScript](https://img.shields.io/badge/types-TypeScript-blue)](https://www.typescriptlang.org/)
+
+Módulo front de **API keys** do SeedGrid: gestão de chaves de integração criadas **por role**, com segredo exibido uma única vez na criação. Compõe sobre o motor de sessão do [`@seedgrid/fe-security`](https://www.npmjs.com/package/@seedgrid/fe-security).
+
+## Sumário
+
+- [Funcionalidades](#funcionalidades)
+- [Tela entregue pelo scaffold](#tela-entregue-pelo-scaffold)
+- [Instalação](#instalação)
+- [Uso rápido](#uso-rápido)
+- [Backend correspondente](#backend-correspondente)
+- [Suporte](#suporte)
+
+## Funcionalidades
+
+- **Criar chave por role** — a resposta traz o segredo cru (`apiKey`) uma única vez; depois disso a API só devolve `prefix`/`masked`.
+- **Listar chaves** — por role (visão de administração) ou do usuário corrente (`listMine`).
+- **Revogar chave** — revogação com carimbo `revokedAt`; a listagem mostra também `lastUsedAt` e `expiresAt`.
+- **Expiração opcional** — `expiresDays` na criação; ausente = sem expiração.
+
+O pacote exporta:
+
+- `ApiKeyPaths` — contrato dos endpoints REST (`/apikeys`, `/apikeys/role/{roleName}`, `/apikeys/{publicId}/revoke`).
+- DTOs client-safe: `ApiKeyCreateRequest`, `ApiKeyCreateResponse`, `ApiKeyListItem`, `ApiKeyRevokeResponse`.
+- `createApiKeysServer` (em `@seedgrid/fe-apikeys/server`, SERVER-ONLY) — engine tipado com `createForRole` / `listByRole` / `listMine` / `revoke`.
+
+## Tela entregue pelo scaffold
+
+| Tela | Rota | O que faz |
+| --- | --- | --- |
+| Gestão de API keys | `/security/api-keys` | Lista as chaves por role, cria chave nova (exibindo o segredo uma única vez, com aviso pra copiar) e revoga chaves existentes |
+
+O scaffold é copiado para dentro do app pelo SeedGrid CLI (`module.json`: `id: "api-keys"`, `requires: ["security"]`) — o app é dono do código e pode personalizar a tela.
+
+## Instalação
+
+```bash
+pnpm add @seedgrid/fe-apikeys @seedgrid/fe-security @seedgrid/fe-core
+```
+
+## Uso rápido
+
+```ts
+// server-only — compõe sobre a sessão do fe-security
+import { createSecurityServer } from "@seedgrid/fe-security/server";
+import { createApiKeysServer } from "@seedgrid/fe-apikeys/server";
+
+const session = createSecurityServer({ /* ... */ });
+export const apiKeys = createApiKeysServer(session);
+
+// Em uma rota/action:
+const nova = await apiKeys.createForRole("INTEGRATION", {
+  name: "Integração ERP",
+  expiresDays: 90,
+});
+console.log(nova.apiKey); // segredo completo — mostre UMA vez, não persista no front
+
+const chaves = await apiKeys.listByRole("INTEGRATION");
+await apiKeys.revoke(chaves[0].publicId);
+```
+
+## Backend correspondente
+
+Extensão Quarkus `seedgrid-quarkus-ext-apikeys`. `ApiKeyPaths` é espelho do `RestControllerPath.java` da extensão — contrato único front/back.
+
+## Suporte
+
+- Issues: https://github.com/SeedGrid/seedgrid-fe-components/issues
+- Repositório: https://github.com/SeedGrid/seedgrid-fe-components
+
+## Licença
+
+MIT

package/dist/apikeys.d.ts

@@ -0,0 +1,35 @@
+/** POST /apikeys/role/{roleName} (request). */
+export interface ApiKeyCreateRequest {
+    name: string;
+    /** Validade em dias; ausente = sem expiração. */
+    expiresDays?: number;
+}
+/** Resposta da CRIAÇÃO — única vez que `apiKey` (segredo cru) é exposto. */
+export interface ApiKeyCreateResponse {
+    publicId: string;
+    name: string;
+    prefix: string;
+    masked: string;
+    /** Segredo completo — mostre uma vez e não persista no front. */
+    apiKey: string;
+    expiresAt: string | null;
+    createdAt: string;
+}
+/** Item de listagem (nunca traz o segredo; só prefix/masked). */
+export interface ApiKeyListItem {
+    publicId: string;
+    name: string;
+    prefix: string;
+    masked: string;
+    roleName: string;
+    expiresAt: string | null;
+    revokedAt: string | null;
+    lastUsedAt: string | null;
+    createdAt: string;
+}
+/** POST /apikeys/{publicId}/revoke (response). */
+export interface ApiKeyRevokeResponse {
+    publicId: string;
+    revokedAt: string;
+}
+//# sourceMappingURL=apikeys.d.ts.map

package/dist/apikeys.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"apikeys.d.ts","sourceRoot":"","sources":["../src/apikeys.ts"],"names":[],"mappings":"AAGA,+CAA+C;AAC/C,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,iDAAiD;IACjD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,4EAA4E;AAC5E,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,iEAAiE;AACjE,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,kDAAkD;AAClD,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB"}

package/dist/apikeys.js

@@ -0,0 +1,3 @@
+// DTOs de API keys (espelham seedgrid-quarkus-ext-apikeys). Client-safe.
+// Chaves são criadas por ROLE; o segredo completo só aparece UMA vez, na criação.
+export {};

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./apikeys";
+export * from "./paths";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,4 @@
+// Barrel client-safe (@seedgrid/fe-apikeys). Tipos + paths. Server helper em /server.
+// A tela de gestão de API keys é SCAFFOLD (app owns), entregue pelo CLI.
+export * from "./apikeys";
+export * from "./paths";

package/dist/module.d.ts

@@ -0,0 +1,3 @@
+import type { SeedGridCliModuleManifest } from "@seedgrid/fe-core";
+export declare const module: SeedGridCliModuleManifest;
+//# sourceMappingURL=module.d.ts.map

package/dist/module.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../src/module.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAWnE,eAAO,MAAM,MAAM,EAAE,yBAIpB,CAAC"}

package/dist/module.js

@@ -0,0 +1,14 @@
+// Reference-adjacent implementation of the manifest read by the SeedGrid CLI
+// (Rust). See seedgrid-cli/docs/adr/0004-module-manifest-contract.md.
+//
+// No provider/navigation/messages here: the api-keys menu entry and
+// dashboard shortcut already live inside fe-security's own scaffold
+// (`useSecurityAppShellSections.tsx`/`SecurityDashboard.tsx`), gated behind
+// a `{{#if security_api_keys_enabled}}` conditional driven by
+// `config.is_module_enabled("api-keys")`. This module only ships its own
+// standalone screen.
+export const module = {
+    id: "api-keys",
+    requires: ["security"],
+    configKey: "api-keys",
+};

package/dist/module.json

@@ -0,0 +1,7 @@
+{
+  "id": "api-keys",
+  "requires": [
+    "security"
+  ],
+  "configKey": "api-keys"
+}

package/dist/paths.d.ts

@@ -0,0 +1,9 @@
+export declare const ApiKeyPaths: {
+    /** GET — chaves do usuário corrente. */
+    readonly base: "/apikeys";
+    /** GET lista · POST cria chave para a role. */
+    readonly byRole: (roleName: string) => string;
+    /** POST — revoga a chave. */
+    readonly revoke: (publicId: string) => string;
+};
+//# sourceMappingURL=paths.d.ts.map

package/dist/paths.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"paths.d.ts","sourceRoot":"","sources":["../src/paths.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,WAAW;IACtB,wCAAwC;;IAExC,+CAA+C;gCAC5B,MAAM;IACzB,6BAA6B;gCACV,MAAM;CACjB,CAAC"}

package/dist/paths.js

@@ -0,0 +1,10 @@
+// Paths de API keys (espelho de RestControllerPath.java em seedgrid-quarkus-ext-apikeys).
+const seg = (value) => encodeURIComponent(value);
+export const ApiKeyPaths = {
+    /** GET — chaves do usuário corrente. */
+    base: "/apikeys",
+    /** GET lista · POST cria chave para a role. */
+    byRole: (roleName) => `/apikeys/role/${seg(roleName)}`,
+    /** POST — revoga a chave. */
+    revoke: (publicId) => `/apikeys/${seg(publicId)}/revoke`,
+};

package/dist/server/create-apikeys-server.d.ts

@@ -0,0 +1,14 @@
+import type { SecurityServer } from "@seedgrid/fe-security";
+import type { ApiKeyCreateRequest, ApiKeyCreateResponse, ApiKeyListItem, ApiKeyRevokeResponse } from "../apikeys";
+export interface ApiKeysServer {
+    /** Cria uma chave para a role — resposta traz o segredo cru (uma vez). */
+    createForRole(roleName: string, req: ApiKeyCreateRequest): Promise<ApiKeyCreateResponse>;
+    /** Lista as chaves de uma role. */
+    listByRole(roleName: string): Promise<ApiKeyListItem[]>;
+    /** Lista as chaves do usuário corrente. */
+    listMine(): Promise<ApiKeyListItem[]>;
+    /** Revoga uma chave. */
+    revoke(publicId: string): Promise<ApiKeyRevokeResponse>;
+}
+export declare function createApiKeysServer(session: SecurityServer): ApiKeysServer;
+//# sourceMappingURL=create-apikeys-server.d.ts.map

package/dist/server/create-apikeys-server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-apikeys-server.d.ts","sourceRoot":"","sources":["../../src/server/create-apikeys-server.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,KAAK,EACV,mBAAmB,EACnB,oBAAoB,EACpB,cAAc,EACd,oBAAoB,EACrB,MAAM,YAAY,CAAC;AAEpB,MAAM,WAAW,aAAa;IAC5B,0EAA0E;IAC1E,aAAa,CACX,QAAQ,EAAE,MAAM,EAChB,GAAG,EAAE,mBAAmB,GACvB,OAAO,CAAC,oBAAoB,CAAC,CAAC;IACjC,mCAAmC;IACnC,UAAU,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC;IACxD,2CAA2C;IAC3C,QAAQ,IAAI,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC;IACtC,wBAAwB;IACxB,MAAM,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,oBAAoB,CAAC,CAAC;CACzD;AAED,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,cAAc,GAAG,aAAa,CAgB1E"}

package/dist/server/create-apikeys-server.js

@@ -0,0 +1,19 @@
+// Helpers server-side de API keys, sobre o motor de sessão do fe-security. SERVER-ONLY.
+//
+//   const session = createSecurityServer({ ... });
+//   export const apiKeys = createApiKeysServer(session);
+import { ApiKeyPaths } from "../paths";
+export function createApiKeysServer(session) {
+    const P = ApiKeyPaths;
+    return {
+        createForRole: (roleName, req) => session.apiFetchSecurity(P.byRole(roleName), {
+            method: "POST",
+            body: JSON.stringify(req),
+        }),
+        listByRole: (roleName) => session.apiFetchSecurity(P.byRole(roleName)),
+        listMine: () => session.apiFetchSecurity(P.base),
+        revoke: (publicId) => session.apiFetchSecurity(P.revoke(publicId), {
+            method: "POST",
+        }),
+    };
+}

package/dist/server/index.d.ts

@@ -0,0 +1,2 @@
+export { createApiKeysServer, type ApiKeysServer, } from "./create-apikeys-server";
+//# sourceMappingURL=index.d.ts.map

package/dist/server/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/server/index.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,mBAAmB,EACnB,KAAK,aAAa,GACnB,MAAM,yBAAyB,CAAC"}

package/dist/server/index.js

@@ -0,0 +1,2 @@
+// Barrel SERVER (@seedgrid/fe-apikeys/server). Roda em action/route.
+export { createApiKeysServer, } from "./create-apikeys-server";

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@seedgrid/fe-apikeys",
+  "version": "2026.7.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SeedGrid/seedgrid-fe-components.git"
+  },
+  "homepage": "https://github.com/SeedGrid/seedgrid-fe-components",
+  "bugs": {
+    "url": "https://github.com/SeedGrid/seedgrid-fe-components/issues"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./server": {
+      "types": "./dist/server/index.d.ts",
+      "default": "./dist/server/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "scaffold"
+  ],
+  "peerDependencies": {
+    "@seedgrid/fe-core": "*",
+    "@seedgrid/fe-security": "*"
+  },
+  "devDependencies": {
+    "@seedgrid/fe-core": "2026.7.1",
+    "@seedgrid/fe-security": "2026.7.2"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "postbuild": "node scripts/emit-module-manifest.mjs",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "pnpm run build && node --test tests/module-manifest.test.mjs"
+  }
+}

package/scaffold/src/app/security/api-keys/page.tsx

@@ -0,0 +1,418 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+
+import {
+  SgButton,
+  SgCombobox,
+  SgConfirmationDialog,
+  SgDatatable,
+  SgInputText,
+  toast,
+} from "@seedgrid/fe-components";
+
+import { useI18n } from "@/i18n";
+import {
+  InlineNotice,
+  PageFrame,
+  RouteGuard,
+  StatusBadge,
+  extractApiMessage,
+  securityConfig,
+  securityService,
+  useDebouncedSearch,
+  usePermission,
+  type ApiKeyListItem,
+  type RoleSummary,
+  type SortState,
+} from "@/modules/security";
+import { formatDateTime, isSearchReady } from "@/modules/security/utils";
+
+const ACCESS_PERMISSIONS = ["APIKEY_READ", "APIKEY_CREATE", "APIKEY_REVOKE"];
+
+export default function ApiKeysPage() {
+  return (
+    <RouteGuard permissions={ACCESS_PERMISSIONS} permissionMode="any">
+      <ApiKeysScreen />
+    </RouteGuard>
+  );
+}
+
+function ApiKeysScreen() {
+  const { t, locale } = useI18n();
+  const canRead = usePermission("APIKEY_READ");
+  const canCreate = usePermission("APIKEY_CREATE");
+  const canRevoke = usePermission("APIKEY_REVOKE");
+  const [roles, setRoles] = useState<RoleSummary[]>([]);
+  const [items, setItems] = useState<ApiKeyListItem[]>([]);
+  const [page, setPage] = useState(0);
+  // <number>: defaultPageSize e literal, sem anotacao o setRows(number)
+  // falharia (TS2345 SetStateAction<literal>).
+  const [rows, setRows] = useState<number>(securityConfig.pagination.defaultPageSize);
+  const [totalRecords, setTotalRecords] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [pendingCreate, setPendingCreate] = useState(false);
+  const [searchValue, setSearchValue] = useState("");
+  const [filterRole, setFilterRole] = useState("");
+  const [createRole, setCreateRole] = useState("");
+  const [createName, setCreateName] = useState("");
+  const [expiresDays, setExpiresDays] = useState("");
+  const [sort, setSort] = useState<SortState>({
+    sortField: "createdAt",
+    sortOrder: -1,
+  });
+  const [createdSecret, setCreatedSecret] = useState<string | null>(null);
+  const [revokeTarget, setRevokeTarget] = useState<ApiKeyListItem | null>(null);
+  const debouncedSearch = useDebouncedSearch(searchValue);
+  const effectiveSearch = isSearchReady(debouncedSearch) ? debouncedSearch : "";
+  const createNameInputProps = {
+    value: createName,
+    onChange: (event: { target: { value: string } }) =>
+      setCreateName(event.target.value),
+  };
+  const expiresDaysInputProps = {
+    value: expiresDays,
+    // `as const`: sem isso "numeric" alarga pra `string` e o inputProps
+    // (InputHTMLAttributes.inputMode e uma uniao literal) recusa (TS2322).
+    inputMode: "numeric" as const,
+    onChange: (event: { target: { value: string } }) =>
+      setExpiresDays(event.target.value),
+  };
+  const searchInputProps = {
+    value: searchValue,
+    onChange: (event: { target: { value: string } }) => {
+      setSearchValue(event.target.value);
+      setPage(0);
+    },
+  };
+  const roleOptions = useMemo(
+    () =>
+      roles.map((role) => ({
+        id: role.name,
+        value: role.name,
+        label: role.name,
+      })),
+    [roles]
+  );
+  const filterRoleOptions = useMemo(
+    () => [{ id: "", value: "", label: "-" }, ...roleOptions],
+    [roleOptions]
+  );
+
+  useEffect(() => {
+    let active = true;
+
+    void (async () => {
+      try {
+        const loadedRoles = await securityService.listIntegrationRoles();
+
+        if (!active) {
+          return;
+        }
+
+        setRoles(loadedRoles);
+        setCreateRole((current) => current || loadedRoles[0]?.name || "");
+      } catch (error) {
+        if (!active) {
+          return;
+        }
+
+        toast.error(extractApiMessage(error) ?? t("security.api_keys.form.error"));
+      }
+    })();
+
+    return () => {
+      active = false;
+    };
+  }, [t]);
+
+  useEffect(() => {
+    if (!canRead) {
+      return;
+    }
+
+    let active = true;
+    setLoading(true);
+
+    void (async () => {
+      try {
+        const response = await securityService.listApiKeysPage({
+          page,
+          size: rows,
+          search: effectiveSearch,
+          roleName: filterRole || undefined,
+          sort,
+        });
+
+        if (!active) {
+          return;
+        }
+
+        setItems(response.items);
+        setTotalRecords(response.total);
+      } catch (error) {
+        if (!active) {
+          return;
+        }
+
+        toast.error(
+          extractApiMessage(error) ?? t("security.api_keys.revoke_error")
+        );
+      } finally {
+        if (active) {
+          setLoading(false);
+        }
+      }
+    })();
+
+    return () => {
+      active = false;
+    };
+  }, [canRead, effectiveSearch, filterRole, page, rows, sort, t]);
+
+  const columns = useMemo(
+    () => [
+      {
+        field: "name",
+        header: t("security.api_keys.column.name"),
+        sortable: true,
+      },
+      {
+        field: "roleName",
+        header: t("security.api_keys.column.role"),
+      },
+      {
+        field: "active",
+        header: t("security.api_keys.column.status"),
+        body: (item: ApiKeyListItem) => (
+          <StatusBadge
+            active={Boolean(item.active ?? !item.revokedAt)}
+            activeLabel={t("security.common.enabled")}
+            inactiveLabel={t("security.common.disabled")}
+          />
+        ),
+      },
+      {
+        field: "expiresAt",
+        header: t("security.api_keys.column.expires_at"),
+        body: (item: ApiKeyListItem) => formatDateTime(item.expiresAt, locale),
+      },
+      {
+        field: "lastUsedAt",
+        header: t("security.api_keys.column.last_used_at"),
+        body: (item: ApiKeyListItem) => formatDateTime(item.lastUsedAt, locale),
+      },
+      {
+        header: t("security.common.actions"),
+        body: (item: ApiKeyListItem) => (
+          <div className="flex flex-wrap gap-2" data-sg-stop-row-select="true">
+            {canRevoke ? (
+              <SgButton
+                size="sm"
+                appearance="outline"
+                severity="danger"
+                label={t("security.api_keys.revoke")}
+                onClick={() => {
+                  setRevokeTarget(item);
+                }}
+              />
+            ) : null}
+          </div>
+        ),
+      },
+    ],
+    [canRevoke, locale, t]
+  );
+
+  async function handleCreate() {
+    if (!createRole.trim()) {
+      return;
+    }
+
+    setPendingCreate(true);
+
+    try {
+      const response = await securityService.createApiKey({
+        roleName: createRole,
+        name: createName.trim(),
+        expiresDays: expiresDays.trim() ? Number(expiresDays) : null,
+      });
+
+      setCreatedSecret(response.key ?? null);
+      setCreateName("");
+      setExpiresDays("");
+      toast.success(t("security.api_keys.form.success"));
+
+      if (canRead) {
+        const refreshed = await securityService.listApiKeysPage({
+          page,
+          size: rows,
+          search: effectiveSearch,
+          roleName: filterRole || undefined,
+          sort,
+        });
+        setItems(refreshed.items);
+        setTotalRecords(refreshed.total);
+      }
+    } catch (error) {
+      toast.error(extractApiMessage(error) ?? t("security.api_keys.form.error"));
+    } finally {
+      setPendingCreate(false);
+    }
+  }
+
+  async function handleRevoke() {
+    if (!revokeTarget) {
+      return;
+    }
+
+    try {
+      await securityService.revokeApiKey(revokeTarget.publicId);
+      toast.success(t("security.api_keys.revoke_success"));
+      setRevokeTarget(null);
+
+      if (canRead) {
+        const refreshed = await securityService.listApiKeysPage({
+          page,
+          size: rows,
+          search: effectiveSearch,
+          roleName: filterRole || undefined,
+          sort,
+        });
+        setItems(refreshed.items);
+        setTotalRecords(refreshed.total);
+      }
+    } catch (error) {
+      toast.error(
+        extractApiMessage(error) ?? t("security.api_keys.revoke_error")
+      );
+    }
+  }
+
+  return (
+    <PageFrame
+      title={t("security.api_keys.title")}
+      description={t("security.api_keys.description")}
+    >
+      <div className="space-y-6">
+        {canCreate ? (
+          <div className="grid gap-4 rounded-3xl border border-slate-200 bg-slate-50 p-4 lg:grid-cols-[minmax(0,1fr)_minmax(0,14rem)_auto] lg:items-end">
+            <SgInputText
+              id="security-api-key-name"
+              label={t("security.api_keys.form.name")}
+              inputProps={createNameInputProps}
+            />
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-1">
+              <SgCombobox
+                id="security-api-key-role"
+                width="100%"
+                label={t("security.api_keys.form.role")}
+                source={roleOptions}
+                value={createRole}
+                onValueChange={(value) => {
+                  setCreateRole(String(value ?? ""));
+                }}
+              />
+              <SgInputText
+                id="security-api-key-expires-days"
+                label={t("security.api_keys.form.expires_days")}
+                inputProps={expiresDaysInputProps}
+              />
+            </div>
+            <SgButton
+              appearance="solid"
+              severity="primary"
+              shape="rounded"
+              label={t("security.api_keys.form.create")}
+              loading={pendingCreate}
+              disabled={pendingCreate || !createRole.trim() || !createName.trim()}
+              onClick={handleCreate}
+            />
+          </div>
+        ) : null}
+
+        {createdSecret ? (
+          <InlineNotice tone="success">
+            <div className="space-y-3">
+              <div>{t("security.api_keys.form.secret")}</div>
+              <div className="rounded-2xl border border-emerald-200 bg-white px-4 py-3 font-mono text-sm break-all">
+                {createdSecret}
+              </div>
+            </div>
+          </InlineNotice>
+        ) : null}
+
+        {canRead ? (
+          <div className="space-y-4">
+            <div className="grid gap-4 md:grid-cols-[minmax(0,1fr)_16rem]">
+              <SgInputText
+                id="security-api-key-search"
+                label={t("security.common.search")}
+                inputProps={searchInputProps}
+                placeholder={t("security.api_keys.search_placeholder")}
+              />
+              <SgCombobox
+                id="security-api-key-filter-role"
+                width="100%"
+                label={t("security.api_keys.filter_role")}
+                source={filterRoleOptions}
+                value={filterRole}
+                onValueChange={(value) => {
+                  setFilterRole(String(value ?? ""));
+                  setPage(0);
+                }}
+              />
+            </div>
+
+            {!isSearchReady(searchValue) && searchValue.trim().length > 0 ? (
+              <InlineNotice>{t("security.common.search_hint")}</InlineNotice>
+            ) : null}
+
+            <SgDatatable<ApiKeyListItem>
+              title=" "
+              value={items}
+              columns={columns}
+              dataKey="publicId"
+              lazy
+              paginator
+              rows={rows}
+              first={page * rows}
+              totalRecords={totalRecords}
+              sortField={sort.sortField}
+              sortOrder={sort.sortOrder}
+              loading={loading}
+              emptyMessage={t("security.api_keys.empty")}
+              onPage={(event) => {
+                setRows(event.rows ?? securityConfig.pagination.defaultPageSize);
+                setPage(event.page ?? 0);
+              }}
+              onSort={(event) => {
+                setPage(0);
+                setSort({
+                  sortField: event.sortField ?? "createdAt",
+                  sortOrder:
+                    event.sortOrder === 1 || event.sortOrder === -1
+                      ? event.sortOrder
+                      : -1,
+                });
+              }}
+            />
+          </div>
+        ) : (
+          <InlineNotice>{t("security.guard.unauthorized.message")}</InlineNotice>
+        )}
+      </div>
+
+      <SgConfirmationDialog
+        open={Boolean(revokeTarget)}
+        severity="danger"
+        title={t("security.api_keys.revoke_title")}
+        message={t("security.api_keys.revoke_message")}
+        onCancel={() => {
+          setRevokeTarget(null);
+        }}
+        onConfirm={handleRevoke}
+      />
+    </PageFrame>
+  );
+}