spine-framework 0.3.54 → 0.3.56

package/.framework/migrations/005_auth_user_trigger.sql

@@ -1,38 +1,74 @@
 -- =============================================================================
--- 003_auth_user_trigger.sql
--- Creates a people record whenever a new Supabase auth user signs up.
--- Run AFTER 001_seed.sql (requires spine-system account and person type).
+-- 005_auth_user_trigger.sql
+-- Creates or updates a people record whenever a new Supabase auth user signs up.
+-- Run AFTER 001_schema.sql (requires spine-system account and person type).
 --
--- First user ever → system_admin role (bootstrap)
--- Subsequent users → no role (assigned later via admin invite flow)
+-- Resolution order on new auth.users insert:
+--
+--   1. Stub match (invited/pending):
+--      If a people row exists with matching email, status IN ('invited','pending'),
+--      and no auth_uid yet → update it (set auth_uid, full_name).
+--      - 'invited' stub  → flip status to 'active'   (invite = pre-approval)
+--      - 'pending' stub  → keep status 'pending'      (access request needs approval)
+--
+--   2. First user ever → system_admin on spine-system (bootstrap).
+--
+--   3. Walk-up fallback → minimal active shell on spine-system with no role.
+--      The frontend completes registration via the invites function
+--      (creates account, assigns role, or creates access_request stub).
 -- =============================================================================
 
 CREATE OR REPLACE FUNCTION public.handle_new_auth_user()
 RETURNS TRIGGER LANGUAGE plpgsql SECURITY DEFINER SET search_path = public AS $$
 DECLARE
-  v_account_id uuid;
-  v_type_id    uuid;
-  v_role_id    uuid;
-  v_is_first   boolean;
-  v_design_schema jsonb;
-  v_validation_schema jsonb;
+  v_account_id         uuid;
+  v_type_id            uuid;
+  v_role_id            uuid;
+  v_is_first           boolean;
+  v_design_schema      jsonb;
+  v_validation_schema  jsonb;
+  v_stub_id            uuid;
+  v_stub_status        text;
 BEGIN
+  -- ── Resolve core references ──────────────────────────────────────────────
   SELECT id INTO v_account_id FROM public.accounts WHERE slug = 'spine-system' LIMIT 1;
   SELECT id, design_schema, validation_schema
     INTO v_type_id, v_design_schema, v_validation_schema
   FROM public.types WHERE kind = 'person' AND slug = 'person' LIMIT 1;
 
   IF v_account_id IS NULL OR v_type_id IS NULL THEN
-    RAISE WARNING 'handle_new_auth_user: spine-system account or person type not found — skipping people insert';
+    RAISE WARNING 'handle_new_auth_user: spine-system account or person type not found — skipping';
+    RETURN NEW;
+  END IF;
+
+  -- ── 1. Stub match: invited or pending people row for this email ───────────
+  SELECT id, status
+    INTO v_stub_id, v_stub_status
+  FROM public.people
+  WHERE email = NEW.email
+    AND status IN ('invited', 'pending')
+    AND auth_uid IS NULL
+  LIMIT 1;
+
+  IF v_stub_id IS NOT NULL THEN
+    UPDATE public.people SET
+      auth_uid   = NEW.id,
+      full_name  = COALESCE(NEW.raw_user_meta_data->>'full_name', full_name, split_part(NEW.email, '@', 1)),
+      -- invited = pre-approved; pending = still needs approval
+      status     = CASE WHEN v_stub_status = 'invited' THEN 'active' ELSE 'pending' END,
+      updated_at = now()
+    WHERE id = v_stub_id;
+
     RETURN NEW;
   END IF;
 
-  -- First person ever gets system_admin; subsequent users get no role
+  -- ── 2. First user bootstrap → system_admin ───────────────────────────────
   SELECT NOT EXISTS (SELECT 1 FROM public.people LIMIT 1) INTO v_is_first;
   IF v_is_first THEN
     SELECT id INTO v_role_id FROM public.roles WHERE slug = 'system_admin' LIMIT 1;
   END IF;
 
+  -- ── 3. Walk-up fallback → minimal shell (frontend completes via invites fn) ─
   INSERT INTO public.people (
     id,
     auth_uid,
@@ -41,6 +77,7 @@ BEGIN
     account_id,
     type_id,
     role_id,
+    status,
     is_active,
     design_schema,
     validation_schema
@@ -51,7 +88,8 @@ BEGIN
     COALESCE(NEW.raw_user_meta_data->>'full_name', split_part(NEW.email, '@', 1)),
     v_account_id,
     v_type_id,
-    v_role_id,
+    v_role_id,   -- NULL unless first user
+    'active',    -- frontend will update if this becomes an access_request
     true,
     v_design_schema,
     COALESCE(v_validation_schema, '{}'::jsonb)

package/.framework/migrations/016_invites.sql

@@ -0,0 +1,27 @@
+-- Migration 016: Invite system indexes
+-- Invite and access_request stubs are stored as people rows with status
+-- 'invited' or 'pending' and invite metadata in the data jsonb column.
+--
+-- people.status values:
+--   active    — normal active person
+--   inactive  — deactivated
+--   invited   — admin-generated invite stub, unclaimed (pre-approval by definition)
+--   pending   — walk-up access request stub, awaiting member_admin approval
+--
+-- Invite metadata stored in people.data:
+--   invite_token       text     — 16-char random lookup key (URL: /register?t=TOKEN)
+--   invite_kind        text     — 'invite' | 'access_request'
+--   invite_expires_at  text     — ISO timestamp
+--   invite_attempts    integer  — failed validation attempts
+--   invite_blocked_at  text     — ISO timestamp, set after too many attempts
+--   invite_invited_by  uuid     — person UUID of the inviter
+
+-- Fast token lookup
+CREATE INDEX IF NOT EXISTS people_invite_token_idx
+  ON public.people ((data->>'invite_token'))
+  WHERE data->>'invite_token' IS NOT NULL;
+
+-- Efficient scoped invite list queries
+CREATE INDEX IF NOT EXISTS people_invite_kind_account_idx
+  ON public.people (account_id, status)
+  WHERE data->>'invite_kind' IS NOT NULL;

package/.framework/src/App.tsx

@@ -4,6 +4,7 @@ import { useAuth } from './contexts/AuthContext'
 import { LoadingSpinner } from './components/ui/LoadingSpinner'
 import { LoginPage } from './pages/auth/LoginPage'
 import { RegisterPage } from './pages/auth/RegisterPage'
+import { PendingApprovalPage } from './pages/auth/PendingApprovalPage'
 import { NotFoundPage } from './pages/NotFoundPage'
 import { DashboardPage } from './pages/DashboardPage'
 import { AppWrapper } from './components/AppWrapper'
@@ -37,6 +38,11 @@ function App() {
           <Route path="/register" element={<RegisterPage />} />
           <Route path="*" element={<Navigate to="/login" replace />} />
         </Routes>
+      ) : user.status === 'pending' ? (
+        // Access request submitted but not yet approved — block full app access
+        <Routes>
+          <Route path="*" element={<PendingApprovalPage />} />
+        </Routes>
       ) : (
         <AuthenticatedRouter />
       )}

package/.framework/src/apps/admin/index.tsx

@@ -33,6 +33,9 @@ const PromptConfigDetailPage = lazy(() => import('../../pages/admin/PromptConfig
 const APIKeysPage = lazy(() => import('../../pages/admin/APIKeysPage').then(m => ({ default: m.APIKeysPage })))
 const APIKeyDetailPage = lazy(() => import('../../pages/admin/APIKeyDetailPage').then(m => ({ default: m.APIKeyDetailPage })))
 
+// Access pages
+const InvitesPage = lazy(() => import('../../pages/admin/InvitesPage').then(m => ({ default: m.InvitesPage })))
+
 // Observability pages
 const ObservabilityDashboard = lazy(() => import('../../pages/admin/ObservabilityDashboard').then(m => ({ default: m.ObservabilityDashboard })))
 const PipelineExecutionsPage = lazy(() => import('../../pages/admin/PipelineExecutionsPage').then(m => ({ default: m.PipelineExecutionsPage })))
@@ -120,6 +123,9 @@ function AdminRoutes() {
           <Route path="configs/api-keys/:id" element={<APIKeyDetailPage />} />
           <Route path="configs/api-keys" element={<APIKeysPage />} />
 
+          {/* Access section */}
+          <Route path="access/invites" element={<InvitesPage />} />
+
           {/* Observability section */}
           <Route path="observability" element={<ObservabilityDashboard />} />
           <Route path="observability/dashboard" element={<ObservabilityDashboard />} />

package/.framework/src/components/admin/AdminSidebar.tsx

@@ -29,7 +29,8 @@ import {
   Shield,
   MessageSquare,
   Key,
-  TestTube
+  TestTube,
+  UserPlus
 } from "lucide-react"
 import {
   Sidebar,
@@ -64,6 +65,12 @@ const navigationSections = [
       { title: "API Keys", url: "/spine-framework/admin/configs/api-keys", icon: Key },
     ]
   },
+  {
+    title: "Access",
+    items: [
+      { title: "Invites", url: "/spine-framework/admin/access/invites", icon: UserPlus },
+    ]
+  },
   {
     title: "Runtime",
     items: [

package/.framework/src/components/shared/InviteManager.tsx

@@ -0,0 +1,352 @@
+/**
+ * @module src/components/shared/InviteManager
+ * @audience installer
+ * @layer frontend-component
+ * @stability stable
+ *
+ * Reusable invite and access-request management UI.
+ * Consumed by Cortex TeamPage, Portal TeamPage, and the Admin InvitesPage.
+ *
+ * Layout:
+ *   [ Email input ]  [ Generate Link button ]   ← always visible
+ *   ─────────────────────────────────────────
+ *   Invite list table with status + actions
+ *
+ * @prop accountId       - Scope invites to this account UUID.
+ *                         Omit (system_admin only) to show all accounts.
+ * @prop defaultRoleSlug - Role to pre-assign on new invites ('support', 'member', etc.)
+ * @prop scope           - 'account' = scoped to one account | 'system' = all accounts
+ *
+ * @seeAlso functions/invites.ts  (API)
+ * @seeAlso pages/admin/InvitesPage.tsx
+ * @seeAlso custom/apps/cortex/pages/team/TeamPage.tsx
+ * @seeAlso custom/apps/portal/pages/team/TeamPage.tsx
+ */
+
+import React, { useState, useEffect, useCallback } from 'react'
+import { apiFetch } from '../../lib/api'
+
+// ─── TYPES ────────────────────────────────────────────────────────────────────
+
+export type InviteScope = 'account' | 'system'
+
+export interface InviteManagerProps {
+  accountId?: string
+  defaultRoleSlug: string
+  scope: InviteScope
+}
+
+interface InviteRow {
+  id: string
+  email: string
+  full_name: string
+  status: 'invited' | 'pending' | 'approved' | 'active' | 'inactive' | 'expired' | 'blocked'
+  kind: 'invite' | 'access_request'
+  expires_at: string | null
+  blocked_at: string | null
+  created_at: string
+  account: { id: string; slug: string; display_name: string } | null
+  role: { id: string; slug: string; name: string } | null
+}
+
+// ─── HELPERS ──────────────────────────────────────────────────────────────────
+
+async function callInvitesApi(action: string, params: Record<string, any> = {}, method: 'GET' | 'POST' = 'GET') {
+  const base = '/.netlify/functions/invites'
+  if (method === 'GET') {
+    const qs = new URLSearchParams({ action, ...params }).toString()
+    const res = await apiFetch(`${base}?${qs}`)
+    return res.json()
+  }
+  const res = await apiFetch(`${base}?action=${action}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(params),
+  })
+  return res.json()
+}
+
+function deriveDisplayStatus(row: InviteRow): string {
+  if (row.blocked_at) return 'blocked'
+  if (row.status === 'inactive') return 'revoked'
+  if (row.status === 'active' && row.kind === 'invite') return 'claimed'
+  if (row.status === 'active') return 'approved'
+  if (row.status === 'pending') return 'pending approval'
+  if (row.status === 'invited') {
+    if (row.expires_at && new Date(row.expires_at) < new Date()) return 'expired'
+    return 'pending'
+  }
+  return row.status
+}
+
+const STATUS_CLASSES: Record<string, string> = {
+  pending:          'bg-yellow-100 text-yellow-800',
+  'pending approval': 'bg-blue-100 text-blue-800',
+  claimed:          'bg-blue-100 text-blue-800',
+  approved:         'bg-green-100 text-green-800',
+  expired:          'bg-slate-100 text-slate-600',
+  blocked:          'bg-red-100 text-red-800',
+  revoked:          'bg-slate-100 text-slate-500',
+}
+
+function timeUntil(iso: string | null): string {
+  if (!iso) return '—'
+  const diff = new Date(iso).getTime() - Date.now()
+  if (diff <= 0) return 'expired'
+  const days = Math.floor(diff / 86400000)
+  const hours = Math.floor((diff % 86400000) / 3600000)
+  if (days > 0) return `${days}d`
+  return `${hours}h`
+}
+
+// ─── COMPONENT ────────────────────────────────────────────────────────────────
+
+export function InviteManager({ accountId, defaultRoleSlug, scope }: InviteManagerProps) {
+  const [invites, setInvites] = useState<InviteRow[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+
+  const [newEmail, setNewEmail] = useState('')
+  const [generating, setGenerating] = useState(false)
+  const [generateError, setGenerateError] = useState('')
+  const [copiedId, setCopiedId] = useState<string | null>(null)
+
+  // ── Load invites ──────────────────────────────────────────────────────────
+  const loadInvites = useCallback(async () => {
+    setLoading(true)
+    setError('')
+    const params: Record<string, string> = {}
+    if (accountId) params.account_id = accountId
+
+    const result = await callInvitesApi('list-invites', params)
+    setLoading(false)
+    if (result.error) {
+      setError(result.error)
+    } else {
+      setInvites(result.data || [])
+    }
+  }, [accountId])
+
+  useEffect(() => { loadInvites() }, [loadInvites])
+
+  // ── Generate invite ────────────────────────────────────────────────────────
+  const handleGenerate = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!newEmail.trim() || !accountId) return
+    setGenerating(true)
+    setGenerateError('')
+
+    const result = await callInvitesApi('create-invite', {
+      email: newEmail.trim(),
+      account_id: accountId,
+      role_slug: defaultRoleSlug,
+      base_url: window.location.origin,
+    }, 'POST')
+
+    setGenerating(false)
+
+    if (result.error) {
+      setGenerateError(result.error)
+      return
+    }
+
+    // Copy URL to clipboard
+    if (result.data?.invite_url) {
+      navigator.clipboard.writeText(result.data.invite_url).catch(() => {})
+    }
+
+    setNewEmail('')
+    await loadInvites()
+  }
+
+  // ── Copy link ──────────────────────────────────────────────────────────────
+  const handleCopy = async (row: InviteRow) => {
+    // Re-generate the URL from what we know — token isn't stored in list response for security
+    // Instead, issue a reinvite to get a fresh URL (safer — old token stays valid, we just display it)
+    // For now, signal to the user to use the generate flow. A future enhancement could cache the URL.
+    const url = `${window.location.origin}/register?t=<token-not-displayable>`
+    await navigator.clipboard.writeText(url).catch(() => {})
+    setCopiedId(row.id)
+    setTimeout(() => setCopiedId(null), 2000)
+  }
+
+  // ── Actions ────────────────────────────────────────────────────────────────
+  const handleAction = async (action: string, personId: string) => {
+    const result = await callInvitesApi(action, { person_id: personId }, 'POST')
+    if (result.error) {
+      setError(result.error)
+    } else {
+      await loadInvites()
+    }
+  }
+
+  const handleReinvite = async (personId: string) => {
+    const result = await callInvitesApi('reinvite', {
+      person_id: personId,
+      base_url: window.location.origin,
+    }, 'POST')
+    if (result.error) {
+      setError(result.error)
+    } else {
+      if (result.data?.invite_url) {
+        navigator.clipboard.writeText(result.data.invite_url).catch(() => {})
+        setCopiedId(personId)
+        setTimeout(() => setCopiedId(null), 2000)
+      }
+      await loadInvites()
+    }
+  }
+
+  // ── Render ─────────────────────────────────────────────────────────────────
+  return (
+    <div className="space-y-6">
+
+      {/* Generate invite form */}
+      <form onSubmit={handleGenerate} className="flex gap-3 items-end">
+        <div className="flex-1">
+          <label htmlFor="invite-email" className="block text-sm font-medium text-slate-700 mb-1">
+            Invite by email
+          </label>
+          <input
+            id="invite-email"
+            type="email"
+            required
+            value={newEmail}
+            onChange={e => setNewEmail(e.target.value)}
+            placeholder="colleague@company.com"
+            disabled={!accountId && scope !== 'system'}
+            className="block w-full px-3 py-2 border border-slate-300 rounded-[5px] shadow-sm placeholder-slate-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm disabled:opacity-50"
+          />
+          {!accountId && scope !== 'system' && (
+            <p className="mt-1 text-xs text-slate-500">Select an account to enable invite generation.</p>
+          )}
+        </div>
+        <button
+          type="submit"
+          disabled={generating || !newEmail.trim() || (!accountId && scope !== 'system')}
+          className="px-4 py-2 rounded-[5px] bg-slate-900 text-white text-sm font-medium hover:bg-slate-800 disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
+        >
+          {generating ? 'Generating...' : 'Generate Link'}
+        </button>
+      </form>
+
+      {generateError && (
+        <div className="rounded-md bg-red-50 p-3">
+          <p className="text-sm text-red-800">{generateError}</p>
+        </div>
+      )}
+
+      <hr className="border-slate-200" />
+
+      {/* Error state */}
+      {error && (
+        <div className="rounded-md bg-red-50 p-3">
+          <p className="text-sm text-red-800">{error}</p>
+        </div>
+      )}
+
+      {/* Invite list */}
+      {loading ? (
+        <div className="flex items-center justify-center py-12">
+          <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-slate-900" />
+        </div>
+      ) : invites.length === 0 ? (
+        <div className="text-center py-12 text-slate-500">
+          <p className="text-sm">No invites yet. Generate a link above to invite someone.</p>
+        </div>
+      ) : (
+        <div className="overflow-x-auto">
+          <table className="min-w-full divide-y divide-slate-200">
+            <thead>
+              <tr>
+                <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Email</th>
+                {scope === 'system' && (
+                  <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Account</th>
+                )}
+                <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Role</th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Status</th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase tracking-wider">Expires</th>
+                <th className="px-4 py-3 text-right text-xs font-medium text-slate-500 uppercase tracking-wider">Actions</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-slate-100">
+              {invites.map(row => {
+                const displayStatus = deriveDisplayStatus(row)
+                return (
+                  <tr key={row.id} className="hover:bg-slate-50">
+                    <td className="px-4 py-3 text-sm text-slate-900">{row.email}</td>
+
+                    {scope === 'system' && (
+                      <td className="px-4 py-3 text-sm text-slate-600">
+                        {row.account?.display_name ?? '—'}
+                      </td>
+                    )}
+
+                    <td className="px-4 py-3 text-sm text-slate-600">
+                      {row.role?.name ?? '—'}
+                    </td>
+
+                    <td className="px-4 py-3">
+                      <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${STATUS_CLASSES[displayStatus] ?? 'bg-slate-100 text-slate-600'}`}>
+                        {displayStatus}
+                      </span>
+                    </td>
+
+                    <td className="px-4 py-3 text-sm text-slate-500">
+                      {row.status === 'invited' ? timeUntil(row.expires_at) : '—'}
+                    </td>
+
+                    <td className="px-4 py-3 text-right">
+                      <div className="flex gap-2 justify-end">
+
+                        {/* Pending unclaimed invite */}
+                        {row.status === 'invited' && !row.blocked_at && (
+                          <>
+                            <button
+                              onClick={() => handleAction('revoke-invite', row.id)}
+                              className="text-xs text-slate-500 hover:text-red-600 px-2 py-1 rounded border border-slate-200 hover:border-red-300"
+                            >
+                              Revoke
+                            </button>
+                          </>
+                        )}
+
+                        {/* Pending access request — approve / deny */}
+                        {row.status === 'pending' && row.kind === 'access_request' && (
+                          <>
+                            <button
+                              onClick={() => handleAction('approve', row.id)}
+                              className="text-xs text-white bg-green-600 hover:bg-green-700 px-2 py-1 rounded"
+                            >
+                              Approve
+                            </button>
+                            <button
+                              onClick={() => handleAction('deny', row.id)}
+                              className="text-xs text-red-600 hover:text-red-800 px-2 py-1 rounded border border-red-200 hover:border-red-400"
+                            >
+                              Deny
+                            </button>
+                          </>
+                        )}
+
+                        {/* Expired or blocked — re-invite */}
+                        {(displayStatus === 'expired' || displayStatus === 'blocked' || displayStatus === 'revoked') && (
+                          <button
+                            onClick={() => handleReinvite(row.id)}
+                            className="text-xs text-blue-600 hover:text-blue-800 px-2 py-1 rounded border border-blue-200 hover:border-blue-400"
+                          >
+                            {copiedId === row.id ? 'Copied!' : 'Re-invite'}
+                          </button>
+                        )}
+                      </div>
+                    </td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  )
+}

package/.framework/src/pages/admin/InvitesPage.tsx

@@ -0,0 +1,33 @@
+/**
+ * @module src/pages/admin/InvitesPage
+ * @audience installer
+ * @layer frontend-page
+ * @stability stable
+ *
+ * System-level invite management page for system_admin.
+ * Shows all invites and access requests across all accounts.
+ * Rendered at /spine-framework/admin/access/invites
+ *
+ * @seeAlso src/components/shared/InviteManager.tsx
+ */
+
+import React from 'react'
+import { InviteManager } from '../../components/shared/InviteManager'
+
+export function InvitesPage() {
+  return (
+    <div className="p-6 space-y-6">
+      <div>
+        <h1 className="text-2xl font-semibold text-slate-900">Invites & Access</h1>
+        <p className="mt-1 text-sm text-slate-500">
+          Manage invites and access requests across all accounts.
+        </p>
+      </div>
+
+      <InviteManager
+        scope="system"
+        defaultRoleSlug="support"
+      />
+    </div>
+  )
+}

package/.framework/src/pages/auth/PendingApprovalPage.tsx

@@ -0,0 +1,54 @@
+/**
+ * @module src/pages/auth/PendingApprovalPage
+ * @audience installer
+ * @layer frontend-page
+ * @stability stable
+ *
+ * Shown to authenticated users whose people.status === 'pending'.
+ * They have successfully signed up but their access request has not yet
+ * been approved by an account administrator.
+ *
+ * @seeAlso src/App.tsx (pending gate)
+ * @seeAlso functions/invites.ts (approve action)
+ */
+
+import React from 'react'
+import { useAuth } from '../../contexts/AuthContext'
+
+export function PendingApprovalPage() {
+  const { logout } = useAuth()
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-slate-50 px-4">
+      <div className="max-w-md w-full text-center space-y-6">
+        <div className="mx-auto h-16 w-16 flex items-center justify-center rounded-full bg-amber-100">
+          <svg className="h-8 w-8 text-amber-600" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+          </svg>
+        </div>
+
+        <div className="space-y-2">
+          <h1 className="text-2xl font-semibold text-slate-900">Awaiting approval</h1>
+          <p className="text-slate-600">
+            Your access request has been submitted. An account administrator will review
+            and approve your request shortly.
+          </p>
+        </div>
+
+        <div className="rounded-md bg-amber-50 border border-amber-200 p-4">
+          <p className="text-sm text-amber-800">
+            You'll be able to access the platform once your request has been approved.
+            Please check back later or contact your administrator directly.
+          </p>
+        </div>
+
+        <button
+          onClick={() => logout()}
+          className="text-sm text-slate-500 hover:text-slate-700 underline"
+        >
+          Sign out
+        </button>
+      </div>
+    </div>
+  )
+}