@seedgrid/fe-self-enter 2026.7.0

package/README.md

@@ -0,0 +1,75 @@
+# @seedgrid/fe-self-enter
+
+[![npm version](https://img.shields.io/npm/v/%40seedgrid%2Ffe-self-enter)](https://www.npmjs.com/package/@seedgrid/fe-self-enter)
+[![npm downloads](https://img.shields.io/npm/dm/%40seedgrid%2Ffe-self-enter)](https://www.npmjs.com/package/@seedgrid/fe-self-enter)
+[![TypeScript](https://img.shields.io/badge/types-TypeScript-blue)](https://www.typescriptlang.org/)
+
+Módulo front de **auto-cadastro de usuário** (self-enter) do SeedGrid: pedido público de entrada, convites de administrador e fila de aprovação. Não confundir com o registro de **empresa** (`fe-login-tenancy`/`fe-subdomain-tenancy`) — aqui é o cadastro de **usuário** (nome/e-mail/senha) numa conta já existente. Compõe sobre o motor de sessão do [`@seedgrid/fe-security`](https://www.npmjs.com/package/@seedgrid/fe-security).
+
+## Sumário
+
+- [Funcionalidades](#funcionalidades)
+- [Telas entregues pelo scaffold](#telas-entregues-pelo-scaffold)
+- [Instalação](#instalação)
+- [Uso rápido](#uso-rápido)
+- [Backend correspondente](#backend-correspondente)
+- [Suporte](#suporte)
+
+## Funcionalidades
+
+Feature **opcional** com 3 modos no backend: `disabled` / `invite-only` / `public`.
+
+- **Pedido público** — usuário pede acesso com nome/e-mail/senha; o pedido passa por confirmação de e-mail e aprovação (`PENDING_EMAIL` → `PENDING_APPROVAL` → `APPROVED`/`REJECTED`/`EXPIRED`).
+- **Convites** — administrador convida por e-mail (`origin: INVITE`); o convidado completa o cadastro pelo token, com reenvio disponível.
+- **Aprovação** — fila de pedidos pendentes com aprovar/rejeitar, registrando quem aprovou/rejeitou e quando.
+
+O pacote exporta:
+
+- DTOs client-safe: `CreateEntryRequest`, `EntryRequestResponse`, `CreateEntryInvitation`, `EntryInvitationResponse`, `EntryRequestStatus`, `EntryRequestOrigin`.
+- `createSelfEnterServer` (em `@seedgrid/fe-self-enter/server`, SERVER-ONLY) — engine tipado sobre a sessão do fe-security.
+- Os paths REST ficam em `SecurityPaths.selfEnter` (do `@seedgrid/fe-security`), pois a feature vive na extensão de security do backend.
+
+## Telas entregues pelo scaffold
+
+| Tela | Rota | O que faz |
+| --- | --- | --- |
+| Pedido de acesso | `/auth/self-enter` (público) | Formulário de auto-cadastro (nome/e-mail/senha) com confirmação de e-mail |
+| Convites | `/self-enter/invitations` | Administração de convites: criar, listar e reenviar |
+| Aprovações | `/self-enter/requests/to-approve` | Fila de pedidos pendentes com aprovar/rejeitar |
+
+Scaffold copiado pelo SeedGrid CLI via `module.json` (`id: "self-enter"`, `requires: ["security"]`) — o app é dono do código.
+
+## Instalação
+
+```bash
+pnpm add @seedgrid/fe-self-enter @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 { createSelfEnterServer } from "@seedgrid/fe-self-enter/server";
+
+const session = createSecurityServer({ /* ... */ });
+export const selfEnter = createSelfEnterServer(session);
+
+// Admin: convidar e aprovar
+await selfEnter.createInvitation({ name: "Maria", email: "maria@empresa.com" });
+const pendentes = await selfEnter.listToApprove();
+await selfEnter.approve(pendentes[0].id);
+```
+
+## Backend correspondente
+
+Feature self-enter da extensão Quarkus `seedgrid-quarkus-ext-security` (endpoints `/self-enter/*` autenticados e `/public/self-enter/*` públicos).
+
+## Suporte
+
+- Issues: https://github.com/SeedGrid/seedgrid-fe-components/issues
+- Repositório: https://github.com/SeedGrid/seedgrid-fe-components
+
+## Licença
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./self-enter";
+//# 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,cAAc,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+// Barrel client-safe (@seedgrid/fe-self-enter). Tipos. Server helper em /server.
+// Paths reusam SecurityPaths.selfEnter (fe-security). Telas = SCAFFOLD (app owns).
+export * from "./self-enter";

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 self-enter menu entries and
+// dashboard shortcut already live inside fe-security's own scaffold
+// (`useSecurityAppShellSections.tsx`/`SecurityDashboard.tsx`), gated behind
+// a `{{#if security_self_enter_enabled}}` conditional driven by
+// `config.is_module_enabled("self-enter")`. This module only ships its own
+// 3 standalone screens (public request, invitations, approvals).
+export const module = {
+    id: "self-enter",
+    requires: ["security"],
+    configKey: "self-enter",
+};

package/dist/module.json

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

package/dist/self-enter.d.ts

@@ -0,0 +1,46 @@
+export type EntryRequestOrigin = "INVITE" | "PUBLIC";
+export type EntryRequestStatus = "PENDING_EMAIL" | "PENDING_APPROVAL" | "APPROVED" | "REJECTED" | "EXPIRED";
+/** POST /public/self-enter/requests — pedido público de auto-cadastro. */
+export interface CreateEntryRequest {
+    name: string;
+    email: string;
+    password: string;
+}
+/** Pedido de self-enter (EntryRequestDTORes). */
+export interface EntryRequestResponse {
+    id: string;
+    email: string;
+    name: string;
+    origin: EntryRequestOrigin;
+    status: EntryRequestStatus;
+    requestedAt: string;
+    expiresAt: string | null;
+    approvedAt: string | null;
+    approvedBy: string | null;
+    rejectedAt: string | null;
+    rejectedBy: string | null;
+    invitedBy: string | null;
+    invitationAcceptedAt: string | null;
+}
+/** POST /self-enter/invitations — cria convite (admin). */
+export interface CreateEntryInvitation {
+    email: string;
+    name: string;
+}
+/** Convite (EntryInvitationDTORes). */
+export interface EntryInvitationResponse {
+    requestId: string;
+    email: string;
+    name: string;
+    origin: EntryRequestOrigin;
+    status: EntryRequestStatus;
+    invitationExpiresAt: string | null;
+    invitationAcceptedAt: string | null;
+}
+/** POST /public/self-enter/invitations/{token}/complete — completa via convite. */
+export interface CompleteEntryInvitation {
+    name: string;
+    email: string;
+    password: string;
+}
+//# sourceMappingURL=self-enter.d.ts.map

package/dist/self-enter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"self-enter.d.ts","sourceRoot":"","sources":["../src/self-enter.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAErD,MAAM,MAAM,kBAAkB,GAC1B,eAAe,GACf,kBAAkB,GAClB,UAAU,GACV,UAAU,GACV,SAAS,CAAC;AAEd,0EAA0E;AAC1E,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,iDAAiD;AACjD,MAAM,WAAW,oBAAoB;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,kBAAkB,CAAC;IAC3B,MAAM,EAAE,kBAAkB,CAAC;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,oBAAoB,EAAE,MAAM,GAAG,IAAI,CAAC;CACrC;AAED,2DAA2D;AAC3D,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,uCAAuC;AACvC,MAAM,WAAW,uBAAuB;IACtC,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,kBAAkB,CAAC;IAC3B,MAAM,EAAE,kBAAkB,CAAC;IAC3B,mBAAmB,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,oBAAoB,EAAE,MAAM,GAAG,IAAI,CAAC;CACrC;AAED,mFAAmF;AACnF,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;CAClB"}

package/dist/self-enter.js

@@ -0,0 +1,5 @@
+// DTOs de self-enter (auto-cadastro de USUÁRIO — name/email/password — na extensão
+// ext-security). Feature OPCIONAL com 3 modos no backend: disabled / invite-only /
+// public. NÃO confundir com o registro de EMPRESA do login-tenancy (esse é BR/CNPJ).
+// Client-safe. Os paths ficam em SecurityPaths.selfEnter (fe-security).
+export {};

package/dist/server/create-self-enter-server.d.ts

@@ -0,0 +1,17 @@
+import type { SecurityServer } from "@seedgrid/fe-security";
+import type { CompleteEntryInvitation, CreateEntryInvitation, CreateEntryRequest, EntryInvitationResponse, EntryRequestResponse } from "../self-enter";
+export interface SelfEnterServer {
+    submitRequest(dto: CreateEntryRequest): Promise<EntryRequestResponse>;
+    confirmEmail(requestId: string, body?: unknown): Promise<void>;
+    resendEmail(requestId: string): Promise<void>;
+    getInvitation(token: string): Promise<EntryInvitationResponse>;
+    completeInvitation(token: string, dto: CompleteEntryInvitation): Promise<void>;
+    listToApprove(): Promise<EntryRequestResponse[]>;
+    approve(requestId: string, body?: unknown): Promise<EntryRequestResponse>;
+    reject(requestId: string, body?: unknown): Promise<EntryRequestResponse>;
+    createInvitation(dto: CreateEntryInvitation): Promise<EntryInvitationResponse>;
+    listInvitations(): Promise<EntryInvitationResponse[]>;
+    resendInvitation(requestId: string): Promise<void>;
+}
+export declare function createSelfEnterServer(session: SecurityServer): SelfEnterServer;
+//# sourceMappingURL=create-self-enter-server.d.ts.map

package/dist/server/create-self-enter-server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-self-enter-server.d.ts","sourceRoot":"","sources":["../../src/server/create-self-enter-server.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,KAAK,EACV,uBAAuB,EACvB,qBAAqB,EACrB,kBAAkB,EAClB,uBAAuB,EACvB,oBAAoB,EACrB,MAAM,eAAe,CAAC;AAOvB,MAAM,WAAW,eAAe;IAE9B,aAAa,CAAC,GAAG,EAAE,kBAAkB,GAAG,OAAO,CAAC,oBAAoB,CAAC,CAAC;IACtE,YAAY,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/D,WAAW,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9C,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,uBAAuB,CAAC,CAAC;IAC/D,kBAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,uBAAuB,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAE/E,aAAa,IAAI,OAAO,CAAC,oBAAoB,EAAE,CAAC,CAAC;IACjD,OAAO,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC,oBAAoB,CAAC,CAAC;IAC1E,MAAM,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC,oBAAoB,CAAC,CAAC;IACzE,gBAAgB,CACd,GAAG,EAAE,qBAAqB,GACzB,OAAO,CAAC,uBAAuB,CAAC,CAAC;IACpC,eAAe,IAAI,OAAO,CAAC,uBAAuB,EAAE,CAAC,CAAC;IACtD,gBAAgB,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACpD;AAED,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,cAAc,GAAG,eAAe,CAgC9E"}

package/dist/server/create-self-enter-server.js

@@ -0,0 +1,27 @@
+// Helpers server-side de self-enter, sobre o motor de sessão do fe-security. SERVER-ONLY.
+// Reusa SecurityPaths.selfEnter. Endpoints /public/* são não-autenticados; /self-enter/*
+// (aprovar/convidar) exigem sessão de admin.
+//
+//   const session = createSecurityServer({ ... });
+//   export const selfEnter = createSelfEnterServer(session);
+import { SecurityPaths } from "@seedgrid/fe-security";
+const post = (body) => ({
+    method: "POST",
+    ...(body === undefined ? {} : { body: JSON.stringify(body) }),
+});
+export function createSelfEnterServer(session) {
+    const SE = SecurityPaths.selfEnter;
+    return {
+        submitRequest: (dto) => session.apiFetchSecurity(SE.requests, post(dto)),
+        confirmEmail: (id, body) => session.apiFetchSecurity(SE.confirmEmail(id), post(body)),
+        resendEmail: (id) => session.apiFetchSecurity(SE.resendEmail(id), post()),
+        getInvitation: (token) => session.apiFetchSecurity(SE.invitationByToken(token)),
+        completeInvitation: (token, dto) => session.apiFetchSecurity(SE.invitationComplete(token), post(dto)),
+        listToApprove: () => session.apiFetchSecurity(SE.requestsToApprove),
+        approve: (id, body) => session.apiFetchSecurity(SE.approve(id), post(body)),
+        reject: (id, body) => session.apiFetchSecurity(SE.reject(id), post(body)),
+        createInvitation: (dto) => session.apiFetchSecurity(SE.invitations, post(dto)),
+        listInvitations: () => session.apiFetchSecurity(SE.invitations),
+        resendInvitation: (id) => session.apiFetchSecurity(SE.invitationResend(id), post()),
+    };
+}

package/dist/server/index.d.ts

@@ -0,0 +1,2 @@
+export { createSelfEnterServer, type SelfEnterServer, } from "./create-self-enter-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,qBAAqB,EACrB,KAAK,eAAe,GACrB,MAAM,4BAA4B,CAAC"}

package/dist/server/index.js

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

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@seedgrid/fe-self-enter",
+  "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/auth/self-enter/page.tsx

@@ -0,0 +1,425 @@
+"use client";
+
+import type { FormEvent, InputHTMLAttributes } from "react";
+import { useEffect, useMemo, useState } from "react";
+
+import {
+  SgButton,
+  SgInputEmail,
+  SgInputOTP,
+  SgInputPassword,
+  SgInputText,
+  SgPanel,
+  SgStack,
+  toast,
+} from "@seedgrid/fe-components";
+import { useSearchParams } from "next/navigation";
+import {
+  type Control,
+  type FieldValues,
+  type RegisterOptions,
+  useForm,
+} from "react-hook-form";
+
+import { useI18n } from "@/i18n";
+import {
+  InlineNotice,
+  PageFrame,
+  classifySelfEnterInvitationError,
+  extractApiMessage,
+  isSelfEnterInvitationEmailMismatchError,
+  securityConfig,
+  securityService,
+} from "@/modules/security";
+
+type InvitationState = "idle" | "loading" | "ready" | "invalid" | "consumed";
+
+type PublicFlowStage = "form" | "confirm" | "success";
+
+type ConfirmationFormValues = {
+  code: string;
+};
+
+const CONFIRMATION_CODE_LENGTH = 6;
+
+export default function PublicSelfEnterRequestPage() {
+  const searchParams = useSearchParams();
+  const { t } = useI18n();
+  const token = searchParams.get("token")?.trim() ?? "";
+  const isInvitationMode = token.length > 0;
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [pending, setPending] = useState(false);
+  const [publicStage, setPublicStage] = useState<PublicFlowStage>("form");
+  const [requestId, setRequestId] = useState<string | number | null>(null);
+  const [invitationState, setInvitationState] = useState<InvitationState>(
+    isInvitationMode ? "loading" : "idle"
+  );
+  const [invitationErrorMessage, setInvitationErrorMessage] =
+    useState<string | null>(null);
+  const [resendingCode, setResendingCode] = useState(false);
+  const { control, handleSubmit: handleConfirmationSubmit, reset } =
+    useForm<ConfirmationFormValues>({
+      defaultValues: {
+        code: "",
+      },
+    });
+  const confirmationControl = control as unknown as Control<FieldValues>;
+  const confirmationRules = {
+    required: t("security.self_enter.public.confirm.validation.code_required"),
+  } as RegisterOptions<FieldValues>;
+  const confirmationInputProps: Omit<
+    InputHTMLAttributes<HTMLInputElement>,
+    "value" | "defaultValue"
+  > = {
+    autoComplete: "one-time-code",
+    inputMode: "numeric",
+  };
+  const pageTitle = isInvitationMode
+    ? t("security.self_enter.invitation.title")
+    : t("security.self_enter.public.title");
+  const pageDescription = isInvitationMode
+    ? t("security.self_enter.invitation.description")
+    : t("security.self_enter.public.description");
+  const nameInputProps = {
+    value: name,
+    onChange: (event: { target: { value: string } }) =>
+      setName(event.target.value),
+  };
+  const emailInputProps = {
+    value: email,
+    onChange: (event: { target: { value: string } }) =>
+      setEmail(event.target.value),
+  };
+  const passwordInputProps = {
+    value: password,
+    onChange: (event: { target: { value: string } }) =>
+      setPassword(event.target.value),
+    autoComplete: "new-password",
+  };
+  const submitLabel = isInvitationMode
+    ? t("security.self_enter.invitation.submit")
+    : t("security.self_enter.public.submit");
+  const inviteInfoMessage = useMemo(() => {
+    if (!isInvitationMode || invitationState !== "ready") {
+      return null;
+    }
+
+    return t("security.self_enter.invitation.notice");
+  }, [invitationState, isInvitationMode, t]);
+
+  useEffect(() => {
+    if (publicStage !== "success") {
+      return;
+    }
+
+    const timeoutId = window.setTimeout(() => {
+      window.location.assign(securityConfig.routes.login);
+    }, 1200);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [publicStage]);
+
+  useEffect(() => {
+    setPassword("");
+    reset({ code: "" });
+    setPublicStage("form");
+    setRequestId(null);
+
+    if (!isInvitationMode) {
+      setInvitationState("idle");
+      setInvitationErrorMessage(null);
+      return;
+    }
+
+    let active = true;
+
+    setInvitationState("loading");
+    setInvitationErrorMessage(null);
+
+    void (async () => {
+      try {
+        const response = await securityService.getSelfEnterInvitation(token);
+
+        if (!active) {
+          return;
+        }
+
+        setName(response.name?.trim() ?? "");
+        setEmail(response.email?.trim() ?? "");
+        setInvitationState("ready");
+      } catch (error) {
+        if (!active) {
+          return;
+        }
+
+        const errorKind = classifySelfEnterInvitationError(error);
+        const fallbackMessage =
+          errorKind === "consumed"
+            ? t("security.self_enter.invitation.consumed")
+            : t("security.self_enter.invitation.invalid");
+
+        setInvitationState(errorKind === "consumed" ? "consumed" : "invalid");
+        setInvitationErrorMessage(extractApiMessage(error) ?? fallbackMessage);
+      }
+    })();
+
+    return () => {
+      active = false;
+    };
+  }, [isInvitationMode, reset, t, token]);
+
+  async function handleRequestSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+
+    if (!isInvitationMode && !securityConfig.features.selfEnterEnabled) {
+      return;
+    }
+
+    setPending(true);
+
+    try {
+      if (isInvitationMode) {
+        await securityService.completeSelfEnterInvitation(token, {
+          name: name.trim(),
+          email: email.trim(),
+          password: password.trim(),
+        });
+        toast.success(t("security.self_enter.invitation.success"));
+        setPublicStage("success");
+      } else {
+        const response = await securityService.createSelfEnterRequest({
+          name: name.trim(),
+          email: email.trim(),
+          password: password.trim(),
+        });
+
+        setRequestId(response.id);
+        setPublicStage("confirm");
+        toast.success(t("security.self_enter.public.confirm.code_sent"));
+      }
+
+      setPassword("");
+    } catch (error) {
+      const invitationError = isInvitationMode
+        ? isSelfEnterInvitationEmailMismatchError(error)
+          ? t("security.self_enter.invitation.email_mismatch")
+          : t("security.self_enter.invitation.error")
+        : t("security.self_enter.public.error");
+
+      toast.error(extractApiMessage(error) ?? invitationError);
+    } finally {
+      setPending(false);
+    }
+  }
+
+  async function handleConfirmEmail(values: ConfirmationFormValues) {
+    if (!requestId || pending) {
+      return;
+    }
+
+    const normalizedCode = normalizeConfirmationCode(values.code);
+
+    if (normalizedCode.length !== CONFIRMATION_CODE_LENGTH) {
+      return;
+    }
+
+    setPending(true);
+
+    try {
+      await securityService.confirmSelfEnterRequestEmail(requestId, {
+        code: normalizedCode,
+      });
+      setPublicStage("success");
+      toast.success(t("security.self_enter.public.approval_pending"));
+    } catch (error) {
+      toast.error(
+        extractApiMessage(error) ??
+          t("security.self_enter.public.confirm.error")
+      );
+    } finally {
+      setPending(false);
+    }
+  }
+
+  async function handleResendEmail() {
+    if (!requestId || resendingCode) {
+      return;
+    }
+
+    setResendingCode(true);
+
+    try {
+      await securityService.resendSelfEnterRequestEmail(requestId);
+      reset({ code: "" });
+      toast.success(t("security.self_enter.public.confirm.resend_success"));
+    } catch (error) {
+      toast.error(
+        extractApiMessage(error) ??
+          t("security.self_enter.public.confirm.resend_error")
+      );
+    } finally {
+      setResendingCode(false);
+    }
+  }
+
+  function normalizeConfirmationCode(value: string) {
+    return value.replace(/[^A-Za-z0-9]/g, "").toUpperCase();
+  }
+
+  function renderInvitationState() {
+    if (invitationState === "loading") {
+      return (
+        <InlineNotice>{t("security.self_enter.invitation.loading")}</InlineNotice>
+      );
+    }
+
+    if (invitationState === "invalid") {
+      return (
+        <InlineNotice tone="danger">
+          {invitationErrorMessage ?? t("security.self_enter.invitation.invalid")}
+        </InlineNotice>
+      );
+    }
+
+    if (invitationState === "consumed") {
+      return (
+        <InlineNotice tone="warning">
+          {invitationErrorMessage ?? t("security.self_enter.invitation.consumed")}
+        </InlineNotice>
+      );
+    }
+
+    return null;
+  }
+
+  function renderSuccessState() {
+    const message = isInvitationMode
+      ? t("security.self_enter.invitation.approval_pending")
+      : t("security.self_enter.public.approval_pending");
+
+    return (
+      <SgPanel borderStyle="none" className="mx-auto w-full max-w-2xl">
+        <SgStack gap={16}>
+          <InlineNotice tone="success">{message}</InlineNotice>
+        </SgStack>
+      </SgPanel>
+    );
+  }
+
+  function renderPublicConfirmation() {
+    return (
+      <SgPanel borderStyle="none" className="mx-auto w-full max-w-2xl">
+        <form onSubmit={handleConfirmationSubmit(handleConfirmEmail)}>
+          <SgStack gap={16}>
+            <InlineNotice>
+              {t("security.self_enter.public.confirm.description", {
+                email,
+              })}
+            </InlineNotice>
+            <SgInputOTP
+              id="security-self-enter-confirmation-code"
+              control={confirmationControl}
+              name="code"
+              rules={confirmationRules}
+              label={t("security.self_enter.public.confirm.code")}
+              mask="### ###"
+              inputProps={confirmationInputProps}
+              groupClassName="justify-start"
+            />
+            <div className="flex flex-wrap justify-end gap-3">
+              <SgButton
+                appearance="outline"
+                severity="secondary"
+                shape="rounded"
+                label={t("security.self_enter.public.confirm.resend")}
+                onClick={() => {
+                  void handleResendEmail();
+                }}
+                disabled={resendingCode || pending}
+                loading={resendingCode}
+                type="button"
+              />
+              <SgButton
+                appearance="solid"
+                severity="primary"
+                shape="rounded"
+                label={t("security.self_enter.public.confirm.submit")}
+                loading={pending}
+                disabled={pending}
+                type="submit"
+              />
+            </div>
+          </SgStack>
+        </form>
+      </SgPanel>
+    );
+  }
+
+  return (
+    <PageFrame title={pageTitle} description={pageDescription}>
+      {isInvitationMode ? renderInvitationState() : null}
+
+      {!isInvitationMode && !securityConfig.features.selfEnterEnabled ? (
+        <InlineNotice tone="warning">
+          {t("security.self_enter.public.disabled")}
+        </InlineNotice>
+      ) : publicStage === "success" ? (
+        renderSuccessState()
+      ) : !isInvitationMode && publicStage === "confirm" ? (
+        renderPublicConfirmation()
+      ) : (
+        isInvitationMode && invitationState !== "ready" ? null : (
+        <form
+          className="mx-auto max-w-2xl space-y-4"
+          onSubmit={handleRequestSubmit}
+        >
+          {inviteInfoMessage ? (
+            <InlineNotice>{inviteInfoMessage}</InlineNotice>
+          ) : null}
+          <div className="grid gap-4 md:grid-cols-2">
+            <SgInputEmail
+              id="security-self-enter-email"
+              label={t("security.self_enter.public.email")}
+              required
+              readOnly={isInvitationMode}
+              inputProps={emailInputProps}
+              onChange={(value) => {
+                if (!isInvitationMode) {
+                  setEmail(value);
+                }
+              }}
+            />
+            <SgInputText
+              id="security-self-enter-name"
+              label={t("security.self_enter.public.name")}
+              required
+              inputProps={nameInputProps}
+            />
+            <SgInputPassword
+              id="security-self-enter-password"
+              label={t("security.self_enter.public.password")}
+              required
+              inputProps={passwordInputProps}
+            />
+          </div>
+          <div className="flex justify-end">
+            <SgButton
+              appearance="solid"
+              severity="primary"
+              shape="rounded"
+              label={submitLabel}
+              loading={pending}
+              disabled={pending}
+              type="submit"
+            />
+          </div>
+        </form>
+        )
+      )}
+    </PageFrame>
+  );
+}

package/scaffold/src/app/self-enter/invitations/page.tsx

@@ -0,0 +1,336 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+
+import {
+  SgButton,
+  SgDatatable,
+  SgGroupBox,
+  SgInputEmail,
+  SgInputText,
+  SgPanel,
+  SgStack,
+  sgWhistle,
+} from "@seedgrid/fe-components";
+import { Mail } from "lucide-react";
+
+import { useI18n } from "@/i18n";
+import {
+  InlineNotice,
+  PageFrame,
+  RouteGuard,
+  classifySelfEnterInvitationAdminError,
+  extractApiMessage,
+  securityConfig,
+  securityService,
+  useDebouncedSearch,
+  type EntryRequest,
+  type SortState,
+} from "@/modules/security";
+import { formatDateTime, isSearchReady } from "@/modules/security/utils";
+
+export default function SelfEnterInvitationsPage() {
+  return (
+    <RouteGuard permissions={["SELFENTER_INVITE"]}>
+      <SelfEnterInvitationsScreen />
+    </RouteGuard>
+  );
+}
+
+function SelfEnterInvitationsScreen() {
+  const { t, locale } = useI18n();
+  const [inviteName, setInviteName] = useState("");
+  const [inviteEmail, setInviteEmail] = useState("");
+  const [invitePending, setInvitePending] = useState(false);
+  const [requests, setRequests] = useState<EntryRequest[]>([]);
+  const [page, setPage] = useState(0);
+  const [rows, setRows] = useState<number>(
+    securityConfig.pagination.defaultPageSize
+  );
+  const [totalRecords, setTotalRecords] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [searchValue, setSearchValue] = useState("");
+  const [sort, setSort] = useState<SortState>({
+    sortField: "requestedAt",
+    sortOrder: -1,
+  });
+  const [resendingId, setResendingId] = useState<string | null>(null);
+  const debouncedSearch = useDebouncedSearch(searchValue);
+  const effectiveSearch = isSearchReady(debouncedSearch) ? debouncedSearch : "";
+  const inviteNameInputProps = {
+    value: inviteName,
+    onChange: (event: { target: { value: string } }) => {
+      setInviteName(event.target.value);
+    },
+  };
+  const inviteEmailInputProps = {
+    value: inviteEmail,
+    onChange: (event: { target: { value: string } }) => {
+      setInviteEmail(event.target.value);
+    },
+  };
+  const searchInputProps = {
+    value: searchValue,
+    onChange: (event: { target: { value: string } }) => {
+      setSearchValue(event.target.value);
+      setPage(0);
+    },
+  };
+
+  async function loadInvitations() {
+    const response = await securityService.listSelfEnterInvitationsPage({
+      page,
+      size: rows,
+      search: effectiveSearch,
+      sort,
+    });
+
+    setRequests(response.items);
+    setTotalRecords(response.total);
+  }
+
+  useEffect(() => {
+    let active = true;
+    setLoading(true);
+
+    void (async () => {
+      try {
+        const response = await securityService.listSelfEnterInvitationsPage({
+          page,
+          size: rows,
+          search: effectiveSearch,
+          sort,
+        });
+
+        if (!active) {
+          return;
+        }
+
+        setRequests(response.items);
+        setTotalRecords(response.total);
+      } catch (error) {
+        if (!active) {
+          return;
+        }
+
+        sgWhistle.error({
+          message:
+            extractApiMessage(error) ??
+            t("security.self_enter.invitation_admin.error"),
+        });
+      } finally {
+        if (active) {
+          setLoading(false);
+        }
+      }
+    })();
+
+    return () => {
+      active = false;
+    };
+  }, [effectiveSearch, page, rows, sort, t]);
+
+  const columns = useMemo(
+    () => [
+      {
+        field: "email",
+        header: t("security.self_enter.invitation_admin.email"),
+        sortable: true,
+      },
+      {
+        field: "name",
+        header: t("security.self_enter.invitation_admin.name"),
+        sortable: true,
+      },
+      {
+        field: "invitedBy",
+        header: t("security.self_enter.invitation_admin.column.invited_by"),
+      },
+      {
+        field: "expiresAt",
+        header: t("security.self_enter.invitation_admin.column.expires_at"),
+        sortable: true,
+        body: (item: EntryRequest) => formatDateTime(item.expiresAt, locale),
+      },
+      {
+        header: t("security.common.actions"),
+        body: (item: EntryRequest) => (
+          <div className="flex flex-wrap gap-2" data-sg-stop-row-select="true">
+            <SgButton
+              size="sm"
+              appearance="solid"
+              severity="info"
+              shape="rounded"
+              leftIcon={<Mail size={16} />}
+              label={t("security.self_enter.invitation_admin.resend")}
+              aria-label={t("security.self_enter.invitation_admin.resend")}
+              title={t("security.self_enter.invitation_admin.resend")}
+              loading={resendingId === item.id}
+              disabled={resendingId === item.id}
+              onClick={() => {
+                void handleResend(item.id);
+              }}
+            />
+          </div>
+        ),
+      },
+    ],
+    [locale, resendingId, t]
+  );
+
+  async function handleInviteSubmit() {
+    const normalizedEmail = inviteEmail.trim();
+    const normalizedName = inviteName.trim();
+
+    if (!normalizedEmail || invitePending) {
+      return;
+    }
+
+    setInvitePending(true);
+
+    try {
+      await securityService.createSelfEnterInvitation({
+        email: normalizedEmail,
+        name: normalizedName || undefined,
+      });
+      sgWhistle.success({
+        message: t("security.self_enter.invitation_admin.success"),
+      });
+      setInviteName("");
+      setInviteEmail("");
+      await loadInvitations();
+    } catch (error) {
+      const inviteError =
+        classifySelfEnterInvitationAdminError(error) === "duplicate_email"
+          ? t("security.self_enter.invitation_admin.duplicate_email")
+          : t("security.self_enter.invitation_admin.error");
+
+      sgWhistle.error({
+        message: inviteError,
+      });
+    } finally {
+      setInvitePending(false);
+    }
+  }
+
+  async function handleResend(id: string | number) {
+    const normalizedId = `${id}`.trim();
+
+    if (!normalizedId || resendingId) {
+      return;
+    }
+
+    setResendingId(normalizedId);
+
+    try {
+      await securityService.resendSelfEnterInvitation(normalizedId);
+      sgWhistle.success({
+        message: t("security.self_enter.invitation_admin.resend_success"),
+      });
+      await loadInvitations();
+    } catch (error) {
+      sgWhistle.error({
+        message:
+          extractApiMessage(error) ??
+          t("security.self_enter.invitation_admin.resend_error"),
+      });
+    } finally {
+      setResendingId(null);
+    }
+  }
+
+  return (
+    <PageFrame
+      title={t("security.self_enter.invitation_admin.nav_title")}
+      description={t("security.self_enter.invitation_admin.page_description")}
+    >
+      <div className="space-y-4">
+        <SgPanel borderStyle="none" className="mx-auto w-full">
+          <SgStack gap={16}>
+            <SgStack gap={4}>
+              <h2 className="text-base font-semibold">
+                {t("security.self_enter.invitation_admin.form_title")}
+              </h2>
+              <p className="text-sm text-slate-500">
+                {t("security.self_enter.invitation_admin.description")}
+              </p>
+            </SgStack>
+
+            <div className="grid gap-4 md:grid-cols-2">
+              <SgInputEmail
+                id="security-self-enter-invite-email"
+                label={t("security.self_enter.invitation_admin.email")}
+                required
+                inputProps={inviteEmailInputProps}
+              />
+              <SgInputText
+                id="security-self-enter-invite-name"
+                label={t("security.self_enter.invitation_admin.name")}
+                inputProps={inviteNameInputProps}
+              />
+            </div>
+
+            <div className="flex justify-end">
+              <SgButton
+                appearance="solid"
+                severity="primary"
+                shape="rounded"
+                label={t("security.self_enter.invitation_admin.submit")}
+                loading={invitePending}
+                disabled={invitePending}
+                onClick={() => {
+                  void handleInviteSubmit();
+                }}
+              />
+            </div>
+          </SgStack>
+        </SgPanel>
+
+        <SgGroupBox title={t("security.self_enter.invitation_admin.list_title")}>
+          <SgStack gap={16}>
+            <SgInputText
+              id="security-self-enter-invitation-search"
+              label={t("security.common.search")}
+              inputProps={searchInputProps}
+              placeholder={t("security.self_enter.approval.search_placeholder")}
+            />
+
+            {!isSearchReady(searchValue) && searchValue.trim().length > 0 ? (
+              <InlineNotice>{t("security.common.search_hint")}</InlineNotice>
+            ) : null}
+
+            <SgDatatable<EntryRequest>
+              title=" "
+              value={requests}
+              columns={columns}
+              dataKey="id"
+              lazy
+              paginator
+              rows={rows}
+              first={page * rows}
+              totalRecords={totalRecords}
+              sortField={sort.sortField}
+              sortOrder={sort.sortOrder}
+              loading={loading}
+              emptyMessage={t("security.self_enter.invitation_admin.list_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,
+                });
+              }}
+            />
+          </SgStack>
+        </SgGroupBox>
+      </div>
+    </PageFrame>
+  );
+}

package/scaffold/src/app/self-enter/requests/to-approve/page.tsx

@@ -0,0 +1,301 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+
+import {
+  SgButton,
+  SgConfirmationDialog,
+  SgDatatable,
+  SgInputText,
+  sgWhistle,
+} from "@seedgrid/fe-components";
+import { ThumbsDown, ThumbsUp } from "lucide-react";
+
+import { useI18n } from "@/i18n";
+import {
+  InlineNotice,
+  PageFrame,
+  RouteGuard,
+  extractApiMessage,
+  securityConfig,
+  securityService,
+  useDebouncedSearch,
+  usePermission,
+  type EntryRequest,
+  type SortState,
+} from "@/modules/security";
+import { formatDateTime, isSearchReady } from "@/modules/security/utils";
+
+export default function SelfEnterApprovalPage() {
+  return (
+    <RouteGuard
+      permissions={["SELFENTER_APPROVE", "SELFENTER_REJECT"]}
+      permissionMode="any"
+    >
+      <SelfEnterApprovalScreen />
+    </RouteGuard>
+  );
+}
+
+function SelfEnterApprovalScreen() {
+  const { t, locale } = useI18n();
+  const canApprove = usePermission("SELFENTER_APPROVE");
+  const canReject = usePermission("SELFENTER_REJECT");
+  const [requests, setRequests] = useState<EntryRequest[]>([]);
+  const [page, setPage] = useState(0);
+  const [rows, setRows] = useState<number>(
+    securityConfig.pagination.defaultPageSize
+  );
+  const [totalRecords, setTotalRecords] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [searchValue, setSearchValue] = useState("");
+  const [sort, setSort] = useState<SortState>({
+    sortField: "requestedAt",
+    sortOrder: -1,
+  });
+  const [confirmAction, setConfirmAction] = useState<{
+    type: "approve" | "reject";
+    item: EntryRequest;
+  } | null>(null);
+  const debouncedSearch = useDebouncedSearch(searchValue);
+  const effectiveSearch = isSearchReady(debouncedSearch) ? debouncedSearch : "";
+  const approveButtonColors = {
+    bg: "rgba(34, 197, 94, 0.10)",
+    border: "rgba(34, 197, 94, 0.12)",
+    hoverBg: "rgba(34, 197, 94, 0.16)",
+    activeBg: "rgba(34, 197, 94, 0.22)",
+  };
+  const rejectButtonColors = {
+    bg: "rgba(239, 68, 68, 0.10)",
+    border: "rgba(239, 68, 68, 0.12)",
+    hoverBg: "rgba(239, 68, 68, 0.16)",
+    activeBg: "rgba(239, 68, 68, 0.22)",
+  };
+  const searchInputProps = {
+    value: searchValue,
+    onChange: (event: { target: { value: string } }) => {
+      setSearchValue(event.target.value);
+      setPage(0);
+    },
+  };
+
+  async function loadRequests() {
+    const response = await securityService.listSelfEnterRequestsPage({
+      page,
+      size: rows,
+      search: effectiveSearch,
+      sort,
+    });
+
+    setRequests(response.items);
+    setTotalRecords(response.total);
+  }
+
+  useEffect(() => {
+    let active = true;
+    setLoading(true);
+
+    void (async () => {
+      try {
+        const response = await securityService.listSelfEnterRequestsPage({
+          page,
+          size: rows,
+          search: effectiveSearch,
+          sort,
+        });
+
+        if (!active) {
+          return;
+        }
+
+        setRequests(response.items);
+        setTotalRecords(response.total);
+      } catch (error) {
+        if (!active) {
+          return;
+        }
+
+        sgWhistle.error({
+          message:
+            extractApiMessage(error) ??
+            t("security.self_enter.approval.load_error"),
+        });
+      } finally {
+        if (active) {
+          setLoading(false);
+        }
+      }
+    })();
+
+    return () => {
+      active = false;
+    };
+  }, [effectiveSearch, page, rows, sort, t]);
+
+  const columns = useMemo(
+    () => [
+      {
+        field: "name",
+        header: t("security.self_enter.approval.column.name"),
+        sortable: true,
+      },
+      {
+        field: "email",
+        header: t("security.self_enter.approval.column.email"),
+      },
+      {
+        field: "requestedAt",
+        header: t("security.self_enter.approval.column.requested_at"),
+        sortable: true,
+        body: (item: EntryRequest) =>
+          formatDateTime(item.requestedAt ?? item.createdAt, locale),
+      },
+      {
+        header: t("security.common.actions"),
+        body: (item: EntryRequest) => (
+          <div className="flex flex-wrap gap-2" data-sg-stop-row-select="true">
+            {canApprove ? (
+              <SgButton
+                size="sm"
+                appearance="ghost"
+                severity="success"
+                shape="circle"
+                iconOnly
+                leftIcon={<ThumbsUp size={16} />}
+                customColors={approveButtonColors}
+                aria-label={t("security.self_enter.approval.approve")}
+                title={t("security.self_enter.approval.approve")}
+                onClick={() => {
+                  setConfirmAction({
+                    type: "approve",
+                    item,
+                  });
+                }}
+              />
+            ) : null}
+            {canReject ? (
+              <SgButton
+                size="sm"
+                appearance="ghost"
+                severity="danger"
+                shape="circle"
+                iconOnly
+                leftIcon={<ThumbsDown size={16} />}
+                customColors={rejectButtonColors}
+                aria-label={t("security.self_enter.approval.reject")}
+                title={t("security.self_enter.approval.reject")}
+                onClick={() => {
+                  setConfirmAction({
+                    type: "reject",
+                    item,
+                  });
+                }}
+              />
+            ) : null}
+          </div>
+        ),
+      },
+    ],
+    [canApprove, canReject, locale, t]
+  );
+
+  async function handleConfirmAction() {
+    if (!confirmAction) {
+      return;
+    }
+
+    try {
+      if (confirmAction.type === "approve") {
+        await securityService.approveSelfEnterRequest(confirmAction.item.id);
+        sgWhistle.success({
+          message: t("security.self_enter.approval.approve_success"),
+        });
+      } else {
+        await securityService.rejectSelfEnterRequest(confirmAction.item.id);
+        sgWhistle.success({
+          message: t("security.self_enter.approval.reject_success"),
+        });
+      }
+
+      setConfirmAction(null);
+      await loadRequests();
+    } catch (error) {
+      sgWhistle.error({
+        message:
+          extractApiMessage(error) ??
+          t("security.self_enter.approval.action_error"),
+      });
+    }
+  }
+
+  return (
+    <PageFrame
+      title={t("security.self_enter.approval.title")}
+      description={t("security.self_enter.approval.description")}
+    >
+      <div className="space-y-4">
+        <SgInputText
+          id="security-self-enter-approval-search"
+          label={t("security.common.search")}
+          inputProps={searchInputProps}
+          placeholder={t("security.self_enter.approval.search_placeholder")}
+        />
+
+        {!isSearchReady(searchValue) && searchValue.trim().length > 0 ? (
+          <InlineNotice>{t("security.common.search_hint")}</InlineNotice>
+        ) : null}
+
+        <SgDatatable<EntryRequest>
+          title=" "
+          value={requests}
+          columns={columns}
+          dataKey="id"
+          lazy
+          paginator
+          rows={rows}
+          first={page * rows}
+          totalRecords={totalRecords}
+          sortField={sort.sortField}
+          sortOrder={sort.sortOrder}
+          loading={loading}
+          emptyMessage={t("security.self_enter.approval.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>
+
+      <SgConfirmationDialog
+        open={Boolean(confirmAction)}
+        severity={confirmAction?.type === "approve" ? "warning" : "danger"}
+        title={
+          confirmAction?.type === "approve"
+            ? t("security.self_enter.approval.approve_title")
+            : t("security.self_enter.approval.reject_title")
+        }
+        message={
+          confirmAction?.type === "approve"
+            ? t("security.self_enter.approval.approve_message")
+            : t("security.self_enter.approval.reject_message")
+        }
+        onCancel={() => {
+          setConfirmAction(null);
+        }}
+        onConfirm={handleConfirmAction}
+      />
+    </PageFrame>
+  );
+}
+
+