@tidecloak/ui-framework 0.0.1

package/src/components/pages/connected/ApprovalsPage.tsx

@@ -0,0 +1,797 @@
+/**
+ * ApprovalsPage - Review and approve pending changes
+ *
+ * @example
+ * ```tsx
+ * <ApprovalsPage
+ *   adminAPI={AdminAPI}
+ *   tideContext={tideContext}
+ *   policyLogsAPI={policyLogsAPI}
+ *   currentUsername={username}
+ * />
+ * ```
+ */
+
+import { AdminAPI as DefaultAdminAPI } from "@tidecloak/js";
+import {
+  ApprovalsPageBase,
+  type ApprovalsPageBaseProps,
+  type ApprovalTabConfig,
+  type BaseApprovalItem,
+  type AccessApprovalItem,
+  type PolicyApprovalItem,
+  createUserColumn,
+  createRoleColumn,
+  createTimestampColumn,
+  createStatusColumn,
+  createProgressColumn,
+} from "../base";
+import { User, Shield, FileKey } from "lucide-react";
+import { type PolicyLogsAPI } from "./LogsPage";
+
+type AdminAPIInstance = {
+  setRealm?: (realm: string) => void;
+  getPendingChangeSets: () => Promise<any>;
+  approveChangeSet: (changeSet: any) => Promise<any>;
+  commitChangeSet: (changeSet: any) => Promise<any>;
+  cancelChangeSet: (changeSet: any) => Promise<any>;
+  getRawChangeSetRequest?: (changeSet: any) => Promise<any[]>;
+  approveChangeSetWithSignature?: (changeSet: any, signedRequest: string) => Promise<void>;
+};
+
+export interface TideApprovalResult {
+  id: string;
+  approved?: { request: Uint8Array };
+  denied?: boolean;
+  pending?: boolean;
+}
+
+/** Get from useTideCloak() hook */
+export interface TideApprovalContext {
+  initializeTideRequest: <T extends { encode: () => Uint8Array }>(request: T) => Promise<T>;
+  approveTideRequests: (requests: { id: string; request: Uint8Array }[]) => Promise<TideApprovalResult[]>;
+}
+
+export interface PolicyApprovalData {
+  id: string;
+  roleId: string;
+  requestedBy: string;
+  requestedByEmail?: string;
+  threshold: number;
+  approvalCount: number;
+  rejectionCount?: number;
+  commitReady?: boolean;
+  approvedBy?: string[];
+  deniedBy?: string[];
+  status: string;
+  timestamp: string | number;
+  policyRequestData: string;
+  contractCode?: string;
+}
+
+/** Implement this to store policy approvals (or use createLocalStoragePolicyApprovalsAPI for dev) */
+export interface PolicyApprovalsAPI {
+  getPendingPolicies: () => Promise<PolicyApprovalData[]>;
+  approve?: (id: string, rejected?: boolean, username?: string) => Promise<void>;
+  revoke?: (id: string, username?: string) => Promise<void>;
+  commit?: (id: string) => Promise<void>;
+  cancel?: (id: string) => Promise<void>;
+  _isLocalStorage?: boolean;
+}
+
+const POLICY_APPROVALS_STORAGE_KEY = "tidecloak_policy_approvals";
+
+/** localStorage adapter for development */
+export function createLocalStoragePolicyApprovalsAPI(
+  storageKey = POLICY_APPROVALS_STORAGE_KEY
+): PolicyApprovalsAPI {
+  const getAll = (): PolicyApprovalData[] => {
+    try {
+      const data = localStorage.getItem(storageKey);
+      return data ? JSON.parse(data) : [];
+    } catch {
+      return [];
+    }
+  };
+
+  const saveAll = (approvals: PolicyApprovalData[]) => {
+    localStorage.setItem(storageKey, JSON.stringify(approvals));
+  };
+
+  return {
+    _isLocalStorage: true as const,
+
+    getPendingPolicies: async () => {
+      return getAll().filter((a) => a.status === "pending");
+    },
+
+    approve: async (id: string, rejected?: boolean, username?: string) => {
+      const approvals = getAll();
+      const index = approvals.findIndex((a) => a.id === id);
+      if (index >= 0) {
+        const approval = approvals[index];
+        approval.approvedBy = approval.approvedBy || [];
+        approval.deniedBy = approval.deniedBy || [];
+
+        if (rejected) {
+          if (username && !approval.deniedBy.includes(username)) {
+            approval.deniedBy.push(username);
+          }
+        } else {
+          if (username && !approval.approvedBy.includes(username)) {
+            approval.approvedBy.push(username);
+          }
+        }
+
+        approval.approvalCount = approval.approvedBy.length;
+        approval.rejectionCount = approval.deniedBy.length;
+        approval.commitReady = approval.approvalCount >= approval.threshold;
+        saveAll(approvals);
+      }
+    },
+
+    revoke: async (id: string, username?: string) => {
+      const approvals = getAll();
+      const index = approvals.findIndex((a) => a.id === id);
+      if (index >= 0) {
+        const approval = approvals[index];
+        if (username) {
+          approval.approvedBy = (approval.approvedBy || []).filter((u) => u !== username);
+          approval.deniedBy = (approval.deniedBy || []).filter((u) => u !== username);
+        }
+        approval.approvalCount = (approval.approvedBy || []).length;
+        approval.rejectionCount = (approval.deniedBy || []).length;
+        approval.commitReady = approval.approvalCount >= approval.threshold;
+        saveAll(approvals);
+      }
+    },
+
+    commit: async (id: string) => {
+      const approvals = getAll();
+      const index = approvals.findIndex((a) => a.id === id);
+      if (index >= 0) {
+        approvals[index].status = "committed";
+        saveAll(approvals);
+      }
+    },
+
+    cancel: async (id: string) => {
+      const approvals = getAll().filter((a) => a.id !== id);
+      saveAll(approvals);
+    },
+  };
+}
+
+export interface AccessMetadataRecord {
+  changeSetId: string;
+  username: string;
+  userEmail?: string;
+  clientId?: string;
+  role?: string;
+  timestamp: string | number;
+  actionType?: string;
+  changeSetType?: string;
+}
+
+/** Implement this to store access change metadata (or use createLocalStorageAccessMetadataAPI for dev) */
+export interface AccessMetadataAPI {
+  getMetadata: (changeSetId: string) => Promise<AccessMetadataRecord | null>;
+  getAllMetadata: () => Promise<AccessMetadataRecord[]>;
+  saveMetadata: (record: AccessMetadataRecord) => Promise<void>;
+  deleteMetadata: (changeSetId: string) => Promise<void>;
+  _isLocalStorage?: boolean;
+}
+
+const ACCESS_METADATA_STORAGE_KEY = "tidecloak_access_metadata";
+
+/** localStorage adapter for development */
+export function createLocalStorageAccessMetadataAPI(
+  storageKey = ACCESS_METADATA_STORAGE_KEY
+): AccessMetadataAPI {
+  const getAll = (): AccessMetadataRecord[] => {
+    try {
+      const data = localStorage.getItem(storageKey);
+      return data ? JSON.parse(data) : [];
+    } catch {
+      return [];
+    }
+  };
+
+  const saveAll = (records: AccessMetadataRecord[]) => {
+    localStorage.setItem(storageKey, JSON.stringify(records));
+  };
+
+  return {
+    _isLocalStorage: true as const,
+
+    getMetadata: async (changeSetId: string) => {
+      const records = getAll();
+      return records.find((r) => r.changeSetId === changeSetId) || null;
+    },
+
+    getAllMetadata: async () => {
+      return getAll();
+    },
+
+    saveMetadata: async (record: AccessMetadataRecord) => {
+      const records = getAll();
+      const index = records.findIndex((r) => r.changeSetId === record.changeSetId);
+      if (index >= 0) {
+        records[index] = record;
+      } else {
+        records.push(record);
+      }
+      saveAll(records);
+    },
+
+    deleteMetadata: async (changeSetId: string) => {
+      const records = getAll().filter((r) => r.changeSetId !== changeSetId);
+      saveAll(records);
+    },
+  };
+}
+
+/** Tab config with optional enclave support */
+export interface EnclaveApprovalTabConfig {
+  /** Get raw request bytes for enclave approval (enables enclave if provided) */
+  getRawRequest?: (item: any) => Promise<Uint8Array | null>;
+  /** Submit signed approval after user approves in enclave */
+  submitSignedApproval?: (item: any, signedRequest: string) => Promise<void>;
+  /** Handle denial from enclave */
+  onEnclaveDenied?: (item: any) => Promise<void>;
+}
+
+export interface ApprovalsPageProps extends Omit<ApprovalsPageBaseProps, "tabs"> {
+  /** AdminAPI instance */
+  adminAPI?: AdminAPIInstance;
+  /** Policy approvals storage adapter */
+  policyApprovalsAPI?: PolicyApprovalsAPI;
+  /** Policy logs adapter for activity tracking */
+  policyLogsAPI?: PolicyLogsAPI;
+  /** Access metadata adapter (merges with AdminAPI data) */
+  accessMetadataAPI?: AccessMetadataAPI;
+  /** Tide context for enclave approvals (from useTideCloak hook) */
+  tideContext?: TideApprovalContext;
+  /** Realm name */
+  realm?: string;
+  /** Custom tabs config */
+  tabs?: ApprovalsPageBaseProps["tabs"];
+  /** Additional tabs with optional enclave support */
+  additionalTabs?: (ApprovalTabConfig<BaseApprovalItem> & EnclaveApprovalTabConfig)[];
+  /** Show policy tab (default: true) */
+  showPolicyTab?: boolean;
+  /** Help text below description */
+  helpText?: ApprovalsPageBaseProps["helpText"];
+  /** Current username for logging */
+  currentUsername?: string;
+}
+
+/**
+ * Helper function to wrap an onReview handler with approval enclave logic.
+ * When tideContext is provided, the review will open the Tide approval enclave.
+ */
+function createEnclaveReviewHandler<T extends { id: string }>(
+  tideContext: TideApprovalContext | undefined,
+  getRawRequest: (item: T) => Promise<Uint8Array | null>,
+  submitSignedApproval: (item: T, signedRequest: string) => Promise<void>,
+  onDenied: (item: T) => Promise<void>,
+  fallbackApprove: (item: T) => Promise<void>
+): (item: T) => Promise<void> {
+  return async (item: T) => {
+    // Use Tide approval enclave if context is provided
+    if (tideContext?.approveTideRequests) {
+      try {
+        const rawBytes = await getRawRequest(item);
+
+        if (rawBytes && rawBytes.length > 0) {
+          // Open Tide approval enclave (shows approval UI popup)
+          const results = await tideContext.approveTideRequests([{
+            id: `approval-${item.id}`,
+            request: rawBytes,
+          }]);
+
+          const result = results[0];
+
+          if (result?.approved) {
+            // Convert approved request back to base64 for the API
+            const signedRequest = btoa(String.fromCharCode(...result.approved.request));
+            await submitSignedApproval(item, signedRequest);
+            return;
+          } else if (result?.denied) {
+            // User denied in the enclave
+            await onDenied(item);
+            return;
+          }
+          // If pending, do nothing - user closed the popup without deciding
+          return;
+        }
+      } catch {
+        // Tide approval enclave failed, fall back to simple approval
+      }
+    }
+
+    // Fallback to simple approval (no enclave)
+    await fallbackApprove(item);
+  };
+}
+
+// Warning banner for localStorage
+function LocalStorageWarning() {
+  return (
+    <div
+      style={{
+        backgroundColor: "#fef3c7",
+        border: "1px solid #f59e0b",
+        borderRadius: "0.375rem",
+        padding: "0.75rem 1rem",
+        marginBottom: "1rem",
+        display: "flex",
+        alignItems: "flex-start",
+        gap: "0.5rem",
+      }}
+    >
+      <span style={{ fontSize: "1rem" }}>⚠️</span>
+      <div style={{ fontSize: "0.875rem", color: "#92400e" }}>
+        <strong>Development Mode:</strong> Policy approvals are stored in browser localStorage and will not persist
+        across devices or browsers. For production, implement your own{" "}
+        <code style={{ backgroundColor: "#fde68a", padding: "0 0.25rem", borderRadius: "0.25rem" }}>
+          PolicyApprovalsAPI
+        </code>{" "}
+        with a backend database.
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Helper to check if an error is a JSON parse error from a text success response.
+ * AdminAPI methods try to JSON.parse responses, but the server often returns plain text
+ * like "Successful", "Change set cancelled", etc. These are actually success messages.
+ */
+function isTextResponseError(err: unknown): boolean {
+  return err instanceof SyntaxError && (
+    err.message.includes("Unexpected token") ||
+    err.message.includes("is not valid JSON")
+  );
+}
+
+/**
+ * Helper to extract change set info from an item.
+ * AdminAPI returns { changeSetId, changeSetType, actionType } directly on items.
+ * For backwards compatibility, also checks for retrievalInfo.
+ */
+function getChangeSet(item: any): { changeSetId: string; changeSetType: string; actionType: string } {
+  // If item has retrievalInfo (backwards compat), use it
+  if (item.retrievalInfo) {
+    return item.retrievalInfo;
+  }
+  // Otherwise use properties directly on item (AdminAPI format)
+  return {
+    changeSetId: item.changeSetId || item.draftRecordId || item.id,
+    changeSetType: item.changeSetType || "USER",
+    actionType: item.actionType || "ADD",
+  };
+}
+
+export function ApprovalsPage({
+  adminAPI: adminAPIProp,
+  policyApprovalsAPI: policyApprovalsAPIProp,
+  policyLogsAPI,
+  accessMetadataAPI: accessMetadataAPIProp,
+  tideContext,
+  realm,
+  tabs: tabsProp,
+  additionalTabs,
+  showPolicyTab = true,
+  helpText: helpTextProp,
+  currentUsername,
+  ...props
+}: ApprovalsPageProps) {
+  // Use localStorage by default for policy approvals (like RolesPage pattern)
+  const policyApprovalsAPI = policyApprovalsAPIProp ?? createLocalStoragePolicyApprovalsAPI();
+  const isPolicyLocalStorage = policyApprovalsAPI._isLocalStorage === true;
+
+  // Use localStorage by default for access metadata
+  const accessMetadataAPI = accessMetadataAPIProp ?? createLocalStorageAccessMetadataAPI();
+  const isAccessMetadataLocalStorage = accessMetadataAPI._isLocalStorage === true;
+
+  // Use provided AdminAPI instance or fall back to default singleton
+  const api = (adminAPIProp || DefaultAdminAPI) as AdminAPIInstance;
+
+  // Set realm if provided
+  if (realm && api.setRealm) {
+    api.setRealm(realm);
+  }
+
+  // Build tabs based on what APIs are available
+  const defaultTabs: ApprovalsPageBaseProps["tabs"] = {
+    access: {
+      key: "access",
+      label: "Access",
+      icon: <User style={{ height: "1rem", width: "1rem" }} />,
+      fetchData: async () => {
+        const approvals = await api.getPendingChangeSets();
+
+        // Get all metadata records for merging
+        const allMetadata = await accessMetadataAPI.getAllMetadata();
+        const metadataMap = new Map(allMetadata.map((m) => [m.changeSetId, m]));
+
+        // Map items and merge with metadata
+        return (approvals || []).map((item: any) => {
+          const changeSetId = item.changeSetId || item.draftRecordId || item.id;
+          const metadata = metadataMap.get(changeSetId);
+
+          // Extract from userRecord array if available (server returns user info there)
+          const firstUserRecord = item.userRecord?.[0];
+
+          // Determine commit readiness based on status field
+          // Server sets status to "APPROVED" after enclave approval
+          const isCommitReady =
+            item.status === "APPROVED" ||
+            item.deleteStatus === "APPROVED" ||
+            item.commitReady === true;
+
+          return {
+            ...item,
+            id: changeSetId,
+            // Extract username from userRecord[0] or item or metadata
+            username: firstUserRecord?.username || item.username || item.userName || metadata?.username || "",
+            // Extract clientId from userRecord[0] or item or metadata
+            clientId: firstUserRecord?.clientId || item.clientId || item.client || metadata?.clientId || "",
+            role: item.role || item.roleName || metadata?.role || "",
+            timestamp: item.timestamp || item.createdAt || item.created || metadata?.timestamp || Date.now(),
+            status: item.status || "pending",
+            // Add commitReady flag for canCommit check
+            commitReady: isCommitReady,
+          };
+        }) as AccessApprovalItem[];
+      },
+      columns: [
+        createUserColumn<AccessApprovalItem>(),
+        createRoleColumn<AccessApprovalItem>(),
+        {
+          key: "client",
+          header: "Client",
+          responsive: "lg" as const,
+          cell: (item) => (
+            <span style={{ fontSize: "0.875rem", color: "#6b7280" }}>{item.clientId || "-"}</span>
+          ),
+        },
+        createTimestampColumn<AccessApprovalItem>({ responsive: "md" }),
+        createStatusColumn<AccessApprovalItem>(),
+      ],
+      emptyState: {
+        icon: <User style={{ height: "3rem", width: "3rem", color: "#6b7280" }} />,
+        title: "No pending access requests",
+        description: "User access change requests will appear here.",
+      },
+      actions: {
+        onReview: createEnclaveReviewHandler<AccessApprovalItem>(
+          tideContext,
+          // Get raw request from AdminAPI
+          async (item) => {
+            if (!api.getRawChangeSetRequest) return null;
+            const changeSet = getChangeSet(item);
+            try {
+              const rawRequests = await api.getRawChangeSetRequest(changeSet);
+              if (rawRequests && rawRequests.length > 0) {
+                const rawRequest = rawRequests[0];
+                const changeSetDraftRequests = rawRequest.changeSetDraftRequests;
+                if (changeSetDraftRequests) {
+                  return typeof changeSetDraftRequests === "string"
+                    ? Uint8Array.from(atob(changeSetDraftRequests), c => c.charCodeAt(0))
+                    : changeSetDraftRequests;
+                }
+              }
+            } catch {
+              // Failed to get raw change set request
+            }
+            return null;
+          },
+          // Submit signed approval
+          async (item, signedRequest) => {
+            if (!api.approveChangeSetWithSignature) {
+              throw new Error("approveChangeSetWithSignature not available");
+            }
+            try {
+              await api.approveChangeSetWithSignature(getChangeSet(item), signedRequest);
+            } catch (err) {
+              // Server returns plain text like "Successful" - treat as success
+              if (isTextResponseError(err)) {
+                return;
+              }
+              throw err;
+            }
+          },
+          // On denied - cancel the change set
+          async (item) => {
+            const changeSet = getChangeSet(item);
+            try {
+              await api.cancelChangeSet(changeSet);
+            } catch (err) {
+              // Server returns plain text - treat as success
+              if (!isTextResponseError(err)) {
+                throw err;
+              }
+            }
+            // Clean up metadata after denial
+            await accessMetadataAPI.deleteMetadata(changeSet.changeSetId);
+          },
+          // Fallback approve
+          async (item) => {
+            try {
+              await api.approveChangeSet(getChangeSet(item));
+            } catch (err) {
+              // Server returns plain text - treat as success
+              if (isTextResponseError(err)) {
+                return;
+              }
+              throw err;
+            }
+          }
+        ),
+        onCommit: async (item) => {
+          const changeSet = getChangeSet(item);
+          try {
+            await api.commitChangeSet(changeSet);
+          } catch (err) {
+            // Server returns plain text - treat as success
+            if (!isTextResponseError(err)) {
+              throw err;
+            }
+          }
+          // Clean up metadata after successful commit
+          await accessMetadataAPI.deleteMetadata(changeSet.changeSetId);
+        },
+        onCancel: async (item) => {
+          const changeSet = getChangeSet(item);
+          try {
+            await api.cancelChangeSet(changeSet);
+          } catch (err) {
+            // Server returns plain text - treat as success
+            if (!isTextResponseError(err)) {
+              throw err;
+            }
+          }
+          // Clean up metadata after successful cancel
+          await accessMetadataAPI.deleteMetadata(changeSet.changeSetId);
+        },
+      },
+      canCommit: (item) => {
+        // commitReady is computed in fetchData based on status === "APPROVED"
+        return (item as any).commitReady === true;
+      },
+      queryKeys: ["access-approvals"],
+    },
+  };
+
+  // Add policy tab (shown by default, can be hidden with showPolicyTab={false})
+  if (showPolicyTab) {
+    defaultTabs.policies = {
+      key: "policies",
+      label: "Policies",
+      icon: <FileKey style={{ height: "1rem", width: "1rem" }} />,
+      fetchData: async () => {
+        try {
+          const policies = await policyApprovalsAPI.getPendingPolicies();
+          return (policies || []) as PolicyApprovalItem[];
+        } catch {
+          return [];
+        }
+      },
+      columns: [
+        {
+          key: "role",
+          header: "Role",
+          cell: (item) => (
+            <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+              <Shield style={{ height: "1rem", width: "1rem", color: "#6b7280" }} />
+              <span style={{ fontFamily: "monospace" }}>{item.roleId}</span>
+            </div>
+          ),
+        },
+        {
+          key: "requestedBy",
+          header: "Requested By",
+          responsive: "sm" as const,
+          cell: (item) => item.requestedByEmail || item.requestedBy,
+        },
+        createProgressColumn<PolicyApprovalItem>(),
+        createStatusColumn<PolicyApprovalItem>(),
+      ],
+      emptyState: {
+        icon: <FileKey style={{ height: "3rem", width: "3rem", color: "#6b7280" }} />,
+        title: "No pending policy changes",
+        description: "Policy change requests will appear here.",
+      },
+      actions: {
+        onReview: policyApprovalsAPI.approve
+          ? createEnclaveReviewHandler<PolicyApprovalItem>(
+              tideContext,
+              // Get raw request from policyRequestData
+              async (item) => {
+                if (item.policyRequestData) {
+                  try {
+                    return Uint8Array.from(atob(item.policyRequestData), c => c.charCodeAt(0));
+                  } catch {
+                    return null;
+                  }
+                }
+                return null;
+              },
+              // Submit signed approval: approve(id, rejected=false, username)
+              async (item, _signedRequest) => {
+                await policyApprovalsAPI.approve!(item.id, false, currentUsername);
+                // Log the approval
+                if (policyLogsAPI) {
+                  await policyLogsAPI.addLog({
+                    policyId: item.id,
+                    roleId: item.roleId,
+                    action: "approved",
+                    performedBy: currentUsername || "unknown",
+                    performedByEmail: item.requestedByEmail,
+                    policyStatus: (item.approvalCount || 0) + 1 >= item.threshold ? "approved" : "pending",
+                    policyThreshold: item.threshold,
+                    approvalCount: (item.approvalCount || 0) + 1,
+                    rejectionCount: item.rejectionCount,
+                  });
+                }
+              },
+              // On denied: approve(id, rejected=true, username)
+              async (item) => {
+                await policyApprovalsAPI.approve!(item.id, true, currentUsername);
+                // Log the denial
+                if (policyLogsAPI) {
+                  await policyLogsAPI.addLog({
+                    policyId: item.id,
+                    roleId: item.roleId,
+                    action: "denied",
+                    performedBy: currentUsername || "unknown",
+                    performedByEmail: item.requestedByEmail,
+                    policyStatus: "pending",
+                    policyThreshold: item.threshold,
+                    approvalCount: item.approvalCount,
+                    rejectionCount: (item.rejectionCount || 0) + 1,
+                  });
+                }
+              },
+              // Fallback approve (no enclave)
+              async (item) => {
+                await policyApprovalsAPI.approve!(item.id, false, currentUsername);
+                // Log the approval
+                if (policyLogsAPI) {
+                  await policyLogsAPI.addLog({
+                    policyId: item.id,
+                    roleId: item.roleId,
+                    action: "approved",
+                    performedBy: currentUsername || "unknown",
+                    performedByEmail: item.requestedByEmail,
+                    policyStatus: (item.approvalCount || 0) + 1 >= item.threshold ? "approved" : "pending",
+                    policyThreshold: item.threshold,
+                    approvalCount: (item.approvalCount || 0) + 1,
+                    rejectionCount: item.rejectionCount,
+                  });
+                }
+              }
+            )
+          : undefined,
+        onRevoke: policyApprovalsAPI.revoke && currentUsername
+          ? async (item) => {
+              if (!confirm("Are you sure you want to revoke your decision on this policy?")) {
+                return;
+              }
+              await policyApprovalsAPI.revoke!(item.id, currentUsername);
+              // Log the revoke
+              if (policyLogsAPI) {
+                await policyLogsAPI.addLog({
+                  policyId: item.id,
+                  roleId: item.roleId,
+                  action: "revoked",
+                  performedBy: currentUsername,
+                  performedByEmail: item.requestedByEmail,
+                  policyStatus: "pending",
+                  policyThreshold: item.threshold,
+                  approvalCount: item.approvalCount,
+                  rejectionCount: item.rejectionCount,
+                });
+              }
+            }
+          : undefined,
+        onCommit: policyApprovalsAPI.commit
+          ? async (item) => {
+              await policyApprovalsAPI.commit!(item.id);
+              if (policyLogsAPI) {
+                await policyLogsAPI.addLog({
+                  policyId: item.id,
+                  roleId: item.roleId,
+                  action: "committed",
+                  performedBy: currentUsername || "unknown",
+                  performedByEmail: item.requestedByEmail,
+                  policyStatus: "committed",
+                  policyThreshold: item.threshold,
+                  approvalCount: item.approvalCount,
+                  rejectionCount: item.rejectionCount,
+                });
+              }
+            }
+          : undefined,
+        onCancel: policyApprovalsAPI.cancel
+          ? async (item) => {
+              await policyApprovalsAPI.cancel!(item.id);
+              if (policyLogsAPI) {
+                await policyLogsAPI.addLog({
+                  policyId: item.id,
+                  roleId: item.roleId,
+                  action: "cancelled",
+                  performedBy: currentUsername || "unknown",
+                  performedByEmail: item.requestedByEmail,
+                  policyStatus: "cancelled",
+                  policyThreshold: item.threshold,
+                  approvalCount: item.approvalCount,
+                  rejectionCount: item.rejectionCount,
+                });
+              }
+            }
+          : undefined,
+      },
+      canCommit: (item) => item.commitReady || (item.approvalCount || 0) >= item.threshold,
+      hasUserDecided: currentUsername
+        ? (item) => {
+            const approvedBy = item.approvedBy || [];
+            const deniedBy = item.deniedBy || [];
+            return approvedBy.includes(currentUsername) || deniedBy.includes(currentUsername);
+          }
+        : undefined,
+      queryKeys: ["policy-approvals"],
+    };
+  }
+
+  // Process additional tabs to wrap onReview with enclave support
+  const processedAdditionalTabs = additionalTabs?.map((tab) => {
+    // If tab has getRawRequest, wrap onReview with enclave support
+    if (tab.getRawRequest && tab.actions?.onReview) {
+      const originalOnReview = tab.actions.onReview;
+      return {
+        ...tab,
+        actions: {
+          ...tab.actions,
+          onReview: createEnclaveReviewHandler(
+            tideContext,
+            tab.getRawRequest,
+            tab.submitSignedApproval || (async (_item, _signedRequest) => {
+              // Default: just call original onReview
+              await originalOnReview(_item);
+            }),
+            tab.onEnclaveDenied || (async (item) => {
+              // Default: call onCancel or onDelete if available
+              if (tab.actions?.onCancel) await tab.actions.onCancel(item);
+              else if (tab.actions?.onDelete) await tab.actions.onDelete(item);
+            }),
+            originalOnReview
+          ),
+        },
+      };
+    }
+    return tab;
+  });
+
+  // Show localStorage warning if using localStorage API
+  const helpText = isPolicyLocalStorage ? (
+    <>
+      <LocalStorageWarning />
+      {helpTextProp}
+    </>
+  ) : (
+    helpTextProp
+  );
+
+  return (
+    <ApprovalsPageBase
+      tabs={tabsProp || defaultTabs}
+      additionalTabs={processedAdditionalTabs}
+      helpText={helpText}
+      currentUserId={currentUsername}
+      {...props}
+    />
+  );
+}