@tidecloak/ui-framework 0.0.1

package/src/components/pages/base/RolesPageBase.tsx

@@ -0,0 +1,1470 @@
+import React, { useState, useMemo, useCallback } from "react";
+import {
+  KeyRound,
+  Pencil,
+  Plus,
+  Trash2,
+  Search,
+  Shield,
+  FileCode,
+} from "lucide-react";
+import { useAutoRefresh } from "../../../hooks/useAutoRefresh";
+import { RefreshButton } from "../../common/RefreshButton";
+import { defaultComponents } from "../../ui";
+import type { BaseDataItem, ColumnDef, FormFieldDef } from "../../../types";
+
+export interface RoleItem extends BaseDataItem {
+  name: string;
+  description?: string;
+  clientRole?: boolean;
+  /** For display purposes - which type this role belongs to */
+  roleType?: "realm" | "client";
+}
+
+/** Role type configuration for RolesPage */
+export type RoleTypeConfig = "realm" | "client" | "all";
+
+export interface PolicyTemplateItem {
+  id: string;
+  name: string;
+  description?: string;
+  csCode: string;
+  parameters: TemplateParameter[];
+}
+
+export interface TemplateParameter {
+  name: string;
+  type: "string" | "number" | "boolean" | "select";
+  required?: boolean;
+  defaultValue?: string | number | boolean;
+  helpText?: string;
+  options?: string[]; // For select type
+}
+
+export interface PolicyConfig {
+  enabled: boolean;
+  contractType: string;
+  approvalType: "implicit" | "explicit";
+  executionType: "public" | "private";
+  threshold: number;
+}
+
+export interface RolesPageBaseProps<TRole extends RoleItem = RoleItem> {
+  /** Page title */
+  title?: string;
+  /** Page description */
+  description?: string;
+  /** Help text shown below description */
+  helpText?: React.ReactNode;
+  /** SSH role info text */
+  sshRoleInfo?: string;
+  /** Whether the API is ready to be called (defaults to true for backwards compatibility) */
+  isReady?: boolean;
+  /** Role type configuration: 'realm', 'client', or 'all' (default: 'realm') */
+  roleType?: RoleTypeConfig;
+  /** Special role prefix (e.g., "ssh:", "admin:"). Used to identify and auto-prefix special roles. */
+  specialRolePrefix?: string;
+  /** Special role type label (e.g., "SSH", "Admin"). Used for display purposes. */
+  specialRoleType?: string;
+
+  // Data fetching
+  /** Fetch roles */
+  fetchRoles: () => Promise<{ roles: TRole[] } | TRole[]>;
+  /** Fetch policy templates */
+  fetchTemplates?: () => Promise<{ templates: PolicyTemplateItem[] } | PolicyTemplateItem[]>;
+  /** Fetch users for threshold calculation */
+  fetchUsers?: () => Promise<any[]>;
+  /** Fetch pending approvals */
+  fetchPendingApprovals?: () => Promise<any[]>;
+  /** Fetch existing policy for a role */
+  fetchRolePolicy?: (roleName: string) => Promise<{ policy: PolicyConfig | null }>;
+
+  // Actions
+  /** Create role */
+  onCreate: (data: { name: string; description?: string; policy?: PolicyConfig; roleType?: "realm" | "client" }) => Promise<void>;
+  /** Update role */
+  onUpdate: (data: { name: string; description?: string }) => Promise<void>;
+  /** Delete role */
+  onDelete: (roleName: string) => Promise<{ approvalCreated?: boolean }>;
+  /** Create policy request (for SSH roles) */
+  onCreatePolicy?: (params: {
+    roleName: string;
+    policyConfig: PolicyConfig;
+    templateId?: string;
+    templateParams?: Record<string, any>;
+    threshold: number;
+  }) => Promise<void>;
+
+  // Configuration
+  /** Contract type options */
+  contractTypes?: { value: string; label: string; description?: string }[];
+  /** Default policy config */
+  defaultPolicyConfig?: PolicyConfig;
+  /** Check if role is a special prefixed role */
+  isSpecialRole?: (role: TRole | string) => boolean;
+  /** Normalize special role name (add prefix) */
+  normalizeSpecialRoleName?: (name: string) => string;
+  /** Customizable UI labels */
+  labels?: {
+    /** Special role prefix (default: "ssh:") */
+    specialRolePrefix?: string;
+    /** Special role type label (default: "SSH") */
+    specialRoleType?: string;
+    /** Special role checkbox label */
+    specialRoleCheckbox?: string;
+    /** Special role hint text */
+    specialRoleHint?: string;
+    /** Policy section title */
+    policySectionTitle?: string;
+    /** Policy section description */
+    policySectionDescription?: string;
+    /** Default policy option label */
+    defaultPolicyLabel?: string;
+    /** Default policy description */
+    defaultPolicyDescription?: string;
+    /** Create policy checkbox label */
+    createPolicyCheckbox?: string;
+    /** Role type labels */
+    clientRoleLabel?: string;
+    realmRoleLabel?: string;
+    /** Info text shown in header */
+    specialRoleInfo?: string;
+    /** Button labels */
+    addRoleButton?: string;
+    createButton?: string;
+    saveButton?: string;
+    cancelButton?: string;
+    deleteButton?: string;
+    /** Dialog titles */
+    addRoleTitle?: string;
+    editRoleTitle?: string;
+    deleteRoleTitle?: string;
+    /** Placeholders */
+    searchPlaceholder?: string;
+    roleNamePlaceholder?: string;
+    specialRoleNamePlaceholder?: string;
+    descriptionPlaceholder?: string;
+    /** Empty state */
+    noRolesTitle?: string;
+    noRolesDescription?: string;
+    /** No search results message */
+    noSearchResultsMessage?: string;
+    /** Messages */
+    roleCreatedMessage?: string;
+    roleUpdatedMessage?: string;
+    roleDeletedMessage?: string;
+    policyCreatedMessage?: string;
+    /** Badge text for special roles in table */
+    specialRoleBadge?: string;
+    /** Description for create role dialog */
+    createRoleDescription?: string;
+    /** Description for edit role dialog */
+    editRoleDescription?: string;
+    /** Role name disabled hint */
+    roleNameDisabledHint?: string;
+    /** Policy update warning */
+    policyUpdateWarning?: string;
+    /** Delete confirmation message */
+    deleteConfirmMessage?: string;
+    /** Approval request message */
+    approvalRequestMessage?: string;
+    /** No description text */
+    noDescriptionText?: string;
+    /** Loading policy text */
+    loadingPolicyText?: string;
+    /** Update signing policy checkbox label */
+    updatePolicyCheckbox?: string;
+    /** Policy template label */
+    policyTemplateLabel?: string;
+  };
+  /** Calculate threshold from users */
+  calculateThreshold?: (users: any[], pendingApprovals: any[]) => number;
+  /** Admin role set for threshold calculation */
+  adminRoleSet?: Set<string>;
+
+  // UI
+  /** Custom columns for role table */
+  columns?: ColumnDef<TRole>[];
+  /** Toast function */
+  toast?: (options: { title: string; description?: string; variant?: string }) => void;
+  /** Invalidate queries */
+  invalidateQueries?: (keys: string[]) => void;
+  /** Query keys to invalidate on changes */
+  queryKeys?: string[];
+  /** Auto-refresh interval in seconds */
+  refreshInterval?: number;
+  /** Additional class name */
+  className?: string;
+
+  // Custom components
+  components?: {
+    Card?: React.ComponentType<{ children: React.ReactNode; className?: string }>;
+    CardContent?: React.ComponentType<{ children: React.ReactNode; className?: string }>;
+    Button?: React.ComponentType<any>;
+    Badge?: React.ComponentType<{ children: React.ReactNode; variant?: string; className?: string }>;
+    Skeleton?: React.ComponentType<{ className?: string }>;
+    Input?: React.ComponentType<any>;
+    Label?: React.ComponentType<any>;
+    Textarea?: React.ComponentType<any>;
+    Checkbox?: React.ComponentType<any>;
+    Select?: React.ComponentType<any>;
+    SelectTrigger?: React.ComponentType<any>;
+    SelectValue?: React.ComponentType<any>;
+    SelectContent?: React.ComponentType<any>;
+    SelectItem?: React.ComponentType<any>;
+    Table?: React.ComponentType<{ children: React.ReactNode }>;
+    TableHeader?: React.ComponentType<{ children: React.ReactNode }>;
+    TableBody?: React.ComponentType<{ children: React.ReactNode }>;
+    TableRow?: React.ComponentType<{ children: React.ReactNode }>;
+    TableHead?: React.ComponentType<{ children: React.ReactNode; className?: string }>;
+    TableCell?: React.ComponentType<{ children: React.ReactNode; className?: string }>;
+    Dialog?: React.ComponentType<{ open: boolean; onOpenChange: (open: boolean) => void; children: React.ReactNode }>;
+    DialogContent?: React.ComponentType<{ className?: string; children: React.ReactNode }>;
+    DialogHeader?: React.ComponentType<{ children: React.ReactNode }>;
+    DialogTitle?: React.ComponentType<{ children: React.ReactNode }>;
+    DialogDescription?: React.ComponentType<{ children: React.ReactNode }>;
+    DialogFooter?: React.ComponentType<{ children: React.ReactNode; className?: string }>;
+    AlertDialog?: React.ComponentType<{ open: boolean; onOpenChange: (open: boolean) => void; children: React.ReactNode }>;
+    AlertDialogContent?: React.ComponentType<{ children: React.ReactNode }>;
+    AlertDialogHeader?: React.ComponentType<{ children: React.ReactNode }>;
+    AlertDialogTitle?: React.ComponentType<{ children: React.ReactNode }>;
+    AlertDialogDescription?: React.ComponentType<{ children: React.ReactNode }>;
+    AlertDialogFooter?: React.ComponentType<{ children: React.ReactNode }>;
+    AlertDialogCancel?: React.ComponentType<{ children: React.ReactNode }>;
+    AlertDialogAction?: React.ComponentType<any>;
+    Separator?: React.ComponentType<{ className?: string }>;
+  };
+}
+
+// Default contract types
+const DEFAULT_CONTRACT_TYPES = [
+  { value: "BasicCustom<Policy>:BasicCustom<1>", label: "Basic - All data at creation time" },
+  { value: "DynamicCustom<Policy>:DynamicCustom<1>", label: "Dynamic - Challenge can change" },
+  { value: "DynamicApprovedCustom<Policy>:DynamicApprovedCustom<1>", label: "Dynamic Approved - With human readable approval" },
+];
+
+const DEFAULT_POLICY_CONFIG: PolicyConfig = {
+  enabled: true,
+  contractType: "BasicCustom<Policy>:BasicCustom<1>",
+  approvalType: "implicit",
+  executionType: "private",
+  threshold: 1,
+};
+
+// ============================================================================
+// Component
+// ============================================================================
+
+// Default labels
+const DEFAULT_LABELS = {
+  specialRoleCheckbox: "Special role (auto-prefix)",
+  specialRoleHint: "This will create a prefixed role.",
+  policySectionTitle: "Signing Policy",
+  policySectionDescription: "Configure the policy for this role.",
+  defaultPolicyLabel: "Default Policy",
+  defaultPolicyDescription: "Uses the built-in policy contract",
+  createPolicyCheckbox: "Create signing policy for this role",
+  clientRoleLabel: "Client Role",
+  realmRoleLabel: "Realm Role",
+  specialRoleInfo: "",
+  addRoleButton: "Add Role",
+  createButton: "Create Role",
+  saveButton: "Save Changes",
+  cancelButton: "Cancel",
+  deleteButton: "Delete",
+  addRoleTitle: "Add New Role",
+  editRoleTitle: "Edit Role",
+  deleteRoleTitle: "Delete Role",
+  searchPlaceholder: "Search roles...",
+  roleNamePlaceholder: "e.g., developer",
+  specialRoleNamePlaceholder: "e.g., root",
+  descriptionPlaceholder: "Describe the role's purpose...",
+  noRolesTitle: "No roles found",
+  noRolesDescription: "Create a role to get started",
+  noSearchResultsMessage: "Try a different search term",
+  roleCreatedMessage: "Role created successfully",
+  roleUpdatedMessage: "Role updated successfully",
+  roleDeletedMessage: "Role deleted successfully",
+  policyCreatedMessage: "Policy request created",
+  specialRoleBadge: "Special",
+  createRoleDescription: "Create a new role for access control",
+  editRoleDescription: "Update the role settings",
+  roleNameDisabledHint: "Role names cannot be changed",
+  policyUpdateWarning: "Updating the policy will create a new pending approval request that must be approved by admins.",
+  deleteConfirmMessage: "Are you sure you want to delete the role \"{name}\"? This action cannot be undone.",
+  approvalRequestMessage: "Role has users assigned. An approval request has been created for review.",
+  noDescriptionText: "No description",
+  loadingPolicyText: "Loading policy...",
+  updatePolicyCheckbox: "Update signing policy",
+  policyTemplateLabel: "Policy Template",
+};
+
+export function RolesPageBase<TRole extends RoleItem = RoleItem>({
+  title = "Manage Roles",
+  description = "Create and manage user roles for access control",
+  helpText,
+  isReady = true,
+  roleType = "realm",
+  specialRolePrefix = "roleWithPolicy:",
+  specialRoleType = "Policy Role",
+  fetchRoles,
+  fetchTemplates,
+  fetchUsers,
+  fetchPendingApprovals,
+  fetchRolePolicy,
+  onCreate,
+  onUpdate,
+  onDelete,
+  onCreatePolicy,
+  contractTypes = DEFAULT_CONTRACT_TYPES,
+  defaultPolicyConfig = DEFAULT_POLICY_CONFIG,
+  isSpecialRole: isSpecialRoleProp,
+  normalizeSpecialRoleName: normalizeSpecialRoleNameProp,
+  labels: customLabels = {},
+  calculateThreshold,
+  adminRoleSet,
+  columns,
+  toast,
+  invalidateQueries,
+  queryKeys = [],
+  refreshInterval = 15,
+  className,
+  components = {},
+}: RolesPageBaseProps<TRole>) {
+  // Merge labels with defaults, using specialRolePrefix and specialRoleType for default labels
+  const labels = {
+    ...DEFAULT_LABELS,
+    specialRolePrefix,
+    specialRoleType,
+    ...customLabels,
+  };
+
+  // Create default implementations using the prefix
+  const prefixPattern = specialRolePrefix.replace(/[.*+?^${}()|[\]\\]/g, '\\$&').replace(/:$/, '[:\\-]');
+  const prefixRegex = new RegExp(`^${prefixPattern}`, 'i');
+
+  const isSpecialRole = isSpecialRoleProp ?? ((role: TRole | string) => {
+    const name = typeof role === "string" ? role : role.name;
+    return prefixRegex.test(name);
+  });
+
+  const normalizeSpecialRoleName = normalizeSpecialRoleNameProp ?? ((value: string) => {
+    const trimmed = value.trim();
+    if (!trimmed) return "";
+    if (prefixRegex.test(trimmed)) return trimmed;
+    return `${specialRolePrefix}${trimmed}`;
+  });
+
+  // Get components (use defaultComponents from ui if not provided)
+  const Card = components.Card || defaultComponents.Card;
+  const CardContent = components.CardContent || defaultComponents.CardContent;
+  const Button = components.Button || defaultComponents.Button;
+  const Badge = components.Badge || defaultComponents.Badge;
+  const Skeleton = components.Skeleton || defaultComponents.Skeleton;
+  const Input = components.Input || defaultComponents.Input;
+  const Label = components.Label || defaultComponents.Label;
+  const Textarea = components.Textarea || defaultComponents.Textarea;
+  const Checkbox = components.Checkbox || defaultComponents.Checkbox;
+  const Select = components.Select || defaultComponents.Select;
+  const SelectTrigger = components.SelectTrigger || defaultComponents.SelectTrigger;
+  const SelectValue = components.SelectValue || defaultComponents.SelectValue;
+  const SelectContent = components.SelectContent || defaultComponents.SelectContent;
+  const SelectItem = components.SelectItem || defaultComponents.SelectItem;
+  const Table = components.Table || defaultComponents.Table;
+  const TableHeader = components.TableHeader || defaultComponents.TableHeader;
+  const TableBody = components.TableBody || defaultComponents.TableBody;
+  const TableRow = components.TableRow || defaultComponents.TableRow;
+  const TableHead = components.TableHead || defaultComponents.TableHead;
+  const TableCell = components.TableCell || defaultComponents.TableCell;
+  const Dialog = components.Dialog || defaultComponents.Dialog;
+  const DialogContent = components.DialogContent || defaultComponents.DialogContent;
+  const DialogHeader = components.DialogHeader || defaultComponents.DialogHeader;
+  const DialogTitle = components.DialogTitle || defaultComponents.DialogTitle;
+  const DialogDescription = components.DialogDescription || defaultComponents.DialogDescription;
+  const DialogFooter = components.DialogFooter || defaultComponents.DialogFooter;
+  const AlertDialog = components.AlertDialog || defaultComponents.AlertDialog;
+  const AlertDialogContent = components.AlertDialogContent || defaultComponents.AlertDialogContent;
+  const AlertDialogHeader = components.AlertDialogHeader || defaultComponents.AlertDialogHeader;
+  const AlertDialogTitle = components.AlertDialogTitle || defaultComponents.AlertDialogTitle;
+  const AlertDialogDescription = components.AlertDialogDescription || defaultComponents.AlertDialogDescription;
+  const AlertDialogFooter = components.AlertDialogFooter || defaultComponents.AlertDialogFooter;
+  const AlertDialogCancel = components.AlertDialogCancel || defaultComponents.AlertDialogCancel;
+  const AlertDialogAction = components.AlertDialogAction || defaultComponents.AlertDialogAction;
+
+  // State
+  const [roles, setRoles] = useState<TRole[]>([]);
+  const [templates, setTemplates] = useState<PolicyTemplateItem[]>([]);
+  const [users, setUsers] = useState<any[]>([]);
+  const [pendingApprovals, setPendingApprovals] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isFetching, setIsFetching] = useState(false);
+  const [search, setSearch] = useState("");
+
+  // Dialog state
+  const [editingRole, setEditingRole] = useState<TRole | null>(null);
+  const [creatingRole, setCreatingRole] = useState(false);
+  const [deletingRole, setDeletingRole] = useState<TRole | null>(null);
+  const [createAsSshRole, setCreateAsSshRole] = useState(true);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isCreatingPolicy, setIsCreatingPolicy] = useState(false);
+  // Role type selection (only relevant when roleType is 'all')
+  const [createRoleType, setCreateRoleType] = useState<"realm" | "client">(
+    roleType === "client" ? "client" : "realm"
+  );
+
+  // Form state
+  const [formData, setFormData] = useState({ name: "", description: "" });
+  const [policyConfig, setPolicyConfig] = useState<PolicyConfig>(defaultPolicyConfig);
+  const [selectedTemplateId, setSelectedTemplateId] = useState<string | null>(null);
+  const [templateParams, setTemplateParams] = useState<Record<string, any>>({});
+
+  // Edit policy state
+  const [editingPolicyConfig, setEditingPolicyConfig] = useState<PolicyConfig | null>(null);
+  const [loadingPolicy, setLoadingPolicy] = useState(false);
+  const [isUpdatingPolicy, setIsUpdatingPolicy] = useState(false);
+  const [editSelectedTemplateId, setEditSelectedTemplateId] = useState<string | null>(null);
+  const [editTemplateParams, setEditTemplateParams] = useState<Record<string, any>>({});
+
+  // Fetch data
+  const fetchData = useCallback(async () => {
+    setIsFetching(true);
+    try {
+      const rolesResult = await fetchRoles();
+      const rolesList = Array.isArray(rolesResult) ? rolesResult : rolesResult.roles || [];
+      setRoles(rolesList);
+
+      if (fetchTemplates) {
+        const templatesResult = await fetchTemplates();
+        const templatesList = Array.isArray(templatesResult) ? templatesResult : templatesResult.templates || [];
+        setTemplates(templatesList);
+      }
+
+      if (fetchUsers) {
+        const usersResult = await fetchUsers();
+        setUsers(usersResult);
+      }
+
+      if (fetchPendingApprovals) {
+        const approvalsResult = await fetchPendingApprovals();
+        setPendingApprovals(approvalsResult);
+      }
+    } catch (error) {
+      console.error("Failed to fetch roles data:", error);
+      toast?.({
+        title: "Failed to fetch data",
+        description: error instanceof Error ? error.message : "Unknown error",
+        variant: "destructive",
+      });
+    } finally {
+      setIsLoading(false);
+      setIsFetching(false);
+    }
+  }, [fetchRoles, fetchTemplates, fetchUsers, fetchPendingApprovals, toast]);
+
+  // Initial fetch (only when API is ready)
+  React.useEffect(() => {
+    if (isReady) {
+      void fetchData();
+    }
+  }, [fetchData, isReady]);
+
+  // Auto refresh (blocked until API is ready)
+  const { secondsRemaining, refreshNow } = useAutoRefresh({
+    intervalSeconds: refreshInterval,
+    refresh: fetchData,
+    isBlocked: !isReady || isFetching,
+  });
+
+  // Calculate threshold
+  const calculatedThreshold = useMemo(() => {
+    if (calculateThreshold) {
+      return calculateThreshold(users, pendingApprovals);
+    }
+    // Default: 70% of active admins
+    const activeAdminCount = users.filter((u) => u.enabled && u.linked && u.isAdmin).length;
+    return Math.max(1, Math.floor(activeAdminCount * 0.7));
+  }, [users, pendingApprovals, calculateThreshold]);
+
+  const activeAdminCount = useMemo(() => {
+    return users.filter((u) => u.enabled && u.linked && u.isAdmin).length;
+  }, [users]);
+
+  // Get selected template
+  const selectedTemplate = selectedTemplateId
+    ? templates.find((t) => t.id === selectedTemplateId)
+    : null;
+
+  // SSH role count
+  const specialRoleCount = useMemo(
+    () => roles.filter((r) => isSpecialRole(r)).length,
+    [roles, isSpecialRole]
+  );
+
+  // Filter roles
+  const filteredRoles = useMemo(() => {
+    return roles.filter(
+      (role) =>
+        role.name.toLowerCase().includes(search.toLowerCase()) ||
+        (role.description?.toLowerCase().includes(search.toLowerCase()) ?? false)
+    );
+  }, [roles, search]);
+
+  // Handlers
+  const handleCreate = () => {
+    setFormData({ name: "", description: "" });
+    setCreateAsSshRole(true);
+    setPolicyConfig(defaultPolicyConfig);
+    setSelectedTemplateId(null);
+    setTemplateParams({});
+    setCreateRoleType(roleType === "client" ? "client" : "realm");
+    setCreatingRole(true);
+  };
+
+  const handleEdit = async (role: TRole) => {
+    setEditingRole(role);
+    setFormData({
+      name: role.name,
+      description: role.description || "",
+    });
+
+    // If SSH role, fetch current policy
+    if (isSpecialRole(role) && fetchRolePolicy) {
+      setLoadingPolicy(true);
+      setEditingPolicyConfig(null);
+      setEditSelectedTemplateId(null);
+      setEditTemplateParams({});
+      try {
+        const { policy } = await fetchRolePolicy(role.name);
+        if (policy) {
+          setEditingPolicyConfig({
+            enabled: true,
+            contractType: policy.contractType || defaultPolicyConfig.contractType,
+            approvalType: policy.approvalType || "implicit",
+            executionType: policy.executionType || "private",
+            threshold: policy.threshold || 1,
+          });
+        } else {
+          setEditingPolicyConfig({ ...defaultPolicyConfig, enabled: false });
+        }
+      } catch {
+        setEditingPolicyConfig({ ...defaultPolicyConfig, enabled: false });
+      } finally {
+        setLoadingPolicy(false);
+      }
+    } else {
+      setEditingPolicyConfig(null);
+    }
+  };
+
+  const handleCreateSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const name = createAsSshRole ? normalizeSpecialRoleName(formData.name) : formData.name.trim();
+    if (!name) {
+      toast?.({ title: "Role name is required", variant: "destructive" });
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      await onCreate({
+        name,
+        description: formData.description || undefined,
+        policy: policyConfig.enabled ? policyConfig : undefined,
+        roleType: roleType === "all" ? createRoleType : (roleType === "client" ? "client" : "realm"),
+      });
+
+      // Create policy if enabled
+      if (policyConfig.enabled && onCreatePolicy) {
+        setIsCreatingPolicy(true);
+        try {
+          await onCreatePolicy({
+            roleName: name,
+            policyConfig,
+            templateId: selectedTemplateId || undefined,
+            templateParams,
+            threshold: calculatedThreshold,
+          });
+          toast?.({ title: "Policy request created", description: "Pending admin approval" });
+        } catch (error) {
+          console.error("Failed to create policy request:", error);
+          toast?.({
+            title: "Policy creation failed",
+            description: error instanceof Error ? error.message : "Unknown error",
+            variant: "destructive",
+          });
+        } finally {
+          setIsCreatingPolicy(false);
+        }
+      }
+
+      if (invalidateQueries && queryKeys.length > 0) {
+        invalidateQueries(queryKeys);
+      }
+      await fetchData();
+      setCreatingRole(false);
+      setFormData({ name: "", description: "" });
+      setPolicyConfig(defaultPolicyConfig);
+      setSelectedTemplateId(null);
+      setTemplateParams({});
+      toast?.({ title: "Role created successfully" });
+    } catch (error) {
+      toast?.({
+        title: "Failed to create role",
+        description: error instanceof Error ? error.message : "Unknown error",
+        variant: "destructive",
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleEditSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!editingRole) return;
+
+    setIsSubmitting(true);
+    try {
+      await onUpdate({
+        name: formData.name,
+        description: formData.description || undefined,
+      });
+
+      // Update policy if changed for SSH role
+      if (
+        editingPolicyConfig &&
+        editingPolicyConfig.enabled &&
+        isSpecialRole(editingRole) &&
+        onCreatePolicy
+      ) {
+        setIsUpdatingPolicy(true);
+        try {
+          await onCreatePolicy({
+            roleName: editingRole.name,
+            policyConfig: editingPolicyConfig,
+            templateId: editSelectedTemplateId || undefined,
+            templateParams: editTemplateParams,
+            threshold: calculatedThreshold,
+          });
+          toast?.({ title: "Policy update request created", description: "Pending admin approval" });
+        } catch (error) {
+          console.error("Failed to create policy update request:", error);
+          toast?.({
+            title: "Policy update failed",
+            description: error instanceof Error ? error.message : "Unknown error",
+            variant: "destructive",
+          });
+        } finally {
+          setIsUpdatingPolicy(false);
+        }
+      }
+
+      if (invalidateQueries && queryKeys.length > 0) {
+        invalidateQueries(queryKeys);
+      }
+      await fetchData();
+      setEditingRole(null);
+      toast?.({ title: "Role updated successfully" });
+    } catch (error) {
+      toast?.({
+        title: "Failed to update role",
+        description: error instanceof Error ? error.message : "Unknown error",
+        variant: "destructive",
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleDeleteConfirm = async () => {
+    if (!deletingRole) return;
+
+    setIsSubmitting(true);
+    try {
+      const result = await onDelete(deletingRole.name);
+      if (invalidateQueries && queryKeys.length > 0) {
+        invalidateQueries(queryKeys);
+      }
+      await fetchData();
+      setDeletingRole(null);
+      setEditingRole(null);
+
+      if (result?.approvalCreated) {
+        toast?.({
+          title: "Approval request created",
+          description: "Role has users assigned. An approval request has been created for review.",
+        });
+      } else {
+        toast?.({ title: "Role deleted successfully" });
+      }
+    } catch (error) {
+      toast?.({
+        title: "Failed to delete role",
+        description: error instanceof Error ? error.message : "Unknown error",
+        variant: "destructive",
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  // Template selection helper
+  const handleTemplateSelect = (
+    templateId: string | null,
+    setTemplateIdFn: (id: string | null) => void,
+    setParamsFn: (params: Record<string, any>) => void
+  ) => {
+    if (!templateId || templateId === "default") {
+      setTemplateIdFn(null);
+      setParamsFn({});
+      return;
+    }
+
+    setTemplateIdFn(templateId);
+    const template = templates.find((t) => t.id === templateId);
+    if (template) {
+      const defaults: Record<string, any> = {};
+      template.parameters.forEach((p) => {
+        if (p.defaultValue !== undefined) {
+          defaults[p.name] = p.defaultValue;
+        }
+      });
+      setParamsFn(defaults);
+    }
+  };
+
+  // Render template parameters
+  const renderTemplateParams = (
+    template: PolicyTemplateItem | null,
+    params: Record<string, any>,
+    setParams: (params: Record<string, any>) => void
+  ) => {
+    if (!template || template.parameters.length === 0) return null;
+
+    return (
+      <div style={{ display: "flex", flexDirection: "column", gap: "0.75rem", padding: "0.75rem", border: "1px solid #e5e7eb", borderRadius: "0.375rem", backgroundColor: "#f9fafb" }}>
+        <p style={{ fontSize: "0.75rem", fontWeight: 500 }}>Template Parameters</p>
+        {template.parameters.map((param) => (
+          <div key={param.name} style={{ display: "flex", flexDirection: "column", gap: "0.25rem" }}>
+            <Label style={{ fontSize: "0.75rem" }}>
+              {param.name}
+              {param.required && <span style={{ color: "#ef4444", marginLeft: "0.25rem" }}>*</span>}
+            </Label>
+            {param.helpText && (
+              <p style={{ fontSize: "0.75rem", color: "#6b7280" }}>{param.helpText}</p>
+            )}
+            {param.type === "string" && (
+              <Input
+                value={params[param.name] || ""}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  setParams({ ...params, [param.name]: e.target.value })
+                }
+                placeholder={param.defaultValue?.toString() || ""}
+                required={param.required}
+                style={{ height: "2rem", fontSize: "0.875rem" }}
+              />
+            )}
+            {param.type === "number" && (
+              <Input
+                type="number"
+                value={params[param.name] || ""}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  setParams({ ...params, [param.name]: parseInt(e.target.value) || 0 })
+                }
+                placeholder={param.defaultValue?.toString() || ""}
+                required={param.required}
+                style={{ height: "2rem", fontSize: "0.875rem" }}
+              />
+            )}
+            {param.type === "boolean" && (
+              <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+                <Checkbox
+                  checked={params[param.name] || false}
+                  onCheckedChange={(v: boolean) =>
+                    setParams({ ...params, [param.name]: Boolean(v) })
+                  }
+                />
+                <span style={{ fontSize: "0.75rem" }}>{params[param.name] ? "Yes" : "No"}</span>
+              </div>
+            )}
+            {param.type === "select" && (
+              <Select
+                value={params[param.name] || param.defaultValue?.toString() || ""}
+                onValueChange={(v: string) => setParams({ ...params, [param.name]: v })}
+              >
+                <SelectTrigger style={{ height: "2rem", fontSize: "0.875rem" }}>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {param.options?.map((opt) => (
+                    <SelectItem key={opt} value={opt}>
+                      {opt}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  // Default columns
+  const defaultColumns: ColumnDef<TRole>[] = [
+    {
+      key: "name",
+      header: "Role Name",
+      cell: (role) => (
+        <div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
+          <div style={{ display: "flex", height: "2.25rem", width: "2.25rem", alignItems: "center", justifyContent: "center", borderRadius: "9999px", backgroundColor: "rgba(59, 130, 246, 0.1)" }}>
+            <KeyRound style={{ height: "1rem", width: "1rem", color: "#3b82f6" }} />
+          </div>
+          <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+            <p style={{ fontWeight: 500 }}>{role.name}</p>
+            {isSpecialRole(role) && (
+              <Badge variant="outline" style={{ fontSize: "0.75rem" }}>
+                {labels.specialRoleBadge}
+              </Badge>
+            )}
+          </div>
+        </div>
+      ),
+    },
+    {
+      key: "description",
+      header: "Description",
+      responsive: "sm",
+      cell: (role) => (
+        <p style={{ fontSize: "0.875rem", color: "#6b7280" }}>
+          {role.description || labels.noDescriptionText}
+        </p>
+      ),
+    },
+    {
+      key: "type",
+      header: "Type",
+      responsive: "md",
+      cell: (role) => (
+        <Badge variant={role.clientRole ? "secondary" : "default"}>
+          {role.clientRole ? labels.clientRoleLabel : labels.realmRoleLabel}
+        </Badge>
+      ),
+    },
+  ];
+
+  const tableColumns = columns || defaultColumns;
+
+  return (
+    <div style={{ padding: "1.5rem" }} className={className}>
+      {/* Header */}
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "1.5rem", flexWrap: "wrap", gap: "1rem" }}>
+        <div>
+          <h1 style={{ fontSize: "1.5rem", fontWeight: 600, display: "flex", alignItems: "center", gap: "0.5rem", margin: 0 }}>
+            <KeyRound style={{ width: "1.5rem", height: "1.5rem" }} />
+            {title}
+          </h1>
+          <p style={{ fontSize: "0.875rem", color: "#6b7280", margin: "0.25rem 0 0" }}>{description}</p>
+          {helpText && <div style={{ marginTop: "0.5rem" }}>{helpText}</div>}
+          {labels.specialRoleInfo && (
+            <p style={{ fontSize: "0.75rem", color: "#6b7280", margin: "0.25rem 0 0" }}>
+              {labels.specialRoleInfo} — {specialRoleCount} configured.
+            </p>
+          )}
+        </div>
+        <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+          <RefreshButton
+            onClick={() => void refreshNow()}
+            isRefreshing={isFetching}
+            secondsRemaining={secondsRemaining}
+            title="Refresh now"
+          />
+          <Button onClick={handleCreate} title={labels.addRoleButton}>
+            <Plus style={{ width: "1rem", height: "1rem", marginRight: "0.5rem" }} />
+            {labels.addRoleButton}
+          </Button>
+        </div>
+      </div>
+
+      {/* Roles Table */}
+      <Card>
+        <div style={{ padding: "1rem", borderBottom: "1px solid #e5e7eb" }}>
+          <div style={{ position: "relative", maxWidth: "20rem" }}>
+            <Search style={{ position: "absolute", left: "0.75rem", top: "50%", transform: "translateY(-50%)", width: "1rem", height: "1rem", color: "#9ca3af" }} />
+            <Input
+              placeholder={labels.searchPlaceholder}
+              value={search}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearch(e.target.value)}
+              style={{ paddingLeft: "2.25rem" }}
+            />
+          </div>
+        </div>
+        <CardContent style={{ padding: 0 }}>
+          {isLoading ? (
+            <div style={{ padding: "1rem", display: "flex", flexDirection: "column", gap: "0.75rem" }}>
+              {[1, 2, 3].map((i) => (
+                <div key={i} style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
+                  <Skeleton style={{ height: "2.5rem", width: "2.5rem", borderRadius: "9999px" }} />
+                  <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+                    <Skeleton style={{ height: "1rem", width: "8rem" }} />
+                    <Skeleton style={{ height: "0.75rem", width: "12rem" }} />
+                  </div>
+                  <Skeleton style={{ height: "1.5rem", width: "4rem" }} />
+                </div>
+              ))}
+            </div>
+          ) : filteredRoles.length > 0 ? (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  {tableColumns.map((col) => (
+                    <TableHead key={col.key}>
+                      {col.header}
+                    </TableHead>
+                  ))}
+                  <TableHead style={{ textAlign: "right" }}>Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {filteredRoles.map((role, rowIndex) => (
+                  <TableRow key={role.id}>
+                    {tableColumns.map((col) => (
+                      <TableCell key={col.key}>
+                        {col.cell(role, rowIndex)}
+                      </TableCell>
+                    ))}
+                    <TableCell style={{ textAlign: "right" }}>
+                      <div style={{ display: "flex", justifyContent: "flex-end", gap: "0.5rem" }}>
+                        <Button
+                          size="icon"
+                          variant="ghost"
+                          onClick={() => void handleEdit(role)}
+                        >
+                          <Pencil style={{ width: "1rem", height: "1rem" }} />
+                        </Button>
+                        <Button
+                          size="icon"
+                          variant="ghost"
+                          onClick={() => setDeletingRole(role)}
+                        >
+                          <Trash2 style={{ width: "1rem", height: "1rem" }} />
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          ) : (
+            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "3rem", textAlign: "center" }}>
+              <KeyRound style={{ width: "3rem", height: "3rem", color: "#9ca3af", marginBottom: "1rem" }} />
+              <h3 style={{ fontWeight: 500, margin: 0 }}>{labels.noRolesTitle}</h3>
+              <p style={{ fontSize: "0.875rem", color: "#6b7280", marginTop: "0.25rem" }}>
+                {search ? labels.noSearchResultsMessage : labels.noRolesDescription}
+              </p>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Create Role Dialog */}
+      <Dialog open={creatingRole} onOpenChange={(open) => !open && setCreatingRole(false)}>
+        <DialogContent style={{ maxWidth: "28rem", maxHeight: "90vh", overflow: "auto" }}>
+          <DialogHeader>
+            <DialogTitle>{labels.addRoleTitle}</DialogTitle>
+            <DialogDescription>{labels.createRoleDescription}</DialogDescription>
+          </DialogHeader>
+          <form onSubmit={handleCreateSubmit} style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+            {/* Role Type Selection - only show when 'all' is configured */}
+            {roleType === "all" && (
+              <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+                <Label>Role Type</Label>
+                <div style={{ display: "flex", gap: "1rem" }}>
+                  <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+                    <input
+                      type="radio"
+                      id="roleTypeRealm"
+                      name="roleType"
+                      checked={createRoleType === "realm"}
+                      onChange={() => setCreateRoleType("realm")}
+                      style={{ width: "1rem", height: "1rem" }}
+                    />
+                    <Label htmlFor="roleTypeRealm" style={{ fontSize: "0.875rem", fontWeight: 400, cursor: "pointer" }}>
+                      {labels.realmRoleLabel}
+                    </Label>
+                  </div>
+                  <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+                    <input
+                      type="radio"
+                      id="roleTypeClient"
+                      name="roleType"
+                      checked={createRoleType === "client"}
+                      onChange={() => setCreateRoleType("client")}
+                      style={{ width: "1rem", height: "1rem" }}
+                    />
+                    <Label htmlFor="roleTypeClient" style={{ fontSize: "0.875rem", fontWeight: 400, cursor: "pointer" }}>
+                      {labels.clientRoleLabel}
+                    </Label>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+              <Label htmlFor="roleName">Role Name</Label>
+              <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+                <Checkbox
+                  id="createAsSshRole"
+                  checked={createAsSshRole}
+                  onCheckedChange={(v: boolean) => setCreateAsSshRole(Boolean(v))}
+                />
+                <Label htmlFor="createAsSshRole" style={{ fontSize: "0.875rem", fontWeight: 400 }}>
+                  {labels.specialRoleCheckbox}
+                </Label>
+              </div>
+              <Input
+                id="roleName"
+                value={formData.name}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  const raw = e.target.value;
+                  setFormData({
+                    ...formData,
+                    name: createAsSshRole ? normalizeSpecialRoleName(raw) : raw,
+                  });
+                }}
+                placeholder={createAsSshRole ? labels.specialRoleNamePlaceholder : labels.roleNamePlaceholder}
+                required
+              />
+              {createAsSshRole && labels.specialRoleHint && (
+                <p style={{ fontSize: "0.75rem", color: "#6b7280" }}>
+                  {labels.specialRoleHint}
+                </p>
+              )}
+            </div>
+
+            <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+              <Label htmlFor="roleDescription">Description</Label>
+              <Textarea
+                id="roleDescription"
+                value={formData.description}
+                onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+                  setFormData({ ...formData, description: e.target.value })
+                }
+                placeholder={labels.descriptionPlaceholder}
+                rows={3}
+              />
+            </div>
+
+            {/* Policy Configuration - available when onCreatePolicy is provided */}
+            {onCreatePolicy && (
+              <div style={{ display: "flex", flexDirection: "column", gap: "1rem", paddingTop: "1rem", borderTop: "1px solid #e5e7eb" }}>
+                <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+                  <Shield style={{ width: "1rem", height: "1rem", color: "#6b7280" }} />
+                  <h4 style={{ fontWeight: 500 }}>{labels.policySectionTitle}</h4>
+                </div>
+                {labels.policySectionDescription && (
+                  <p style={{ fontSize: "0.75rem", color: "#6b7280" }}>
+                    {labels.policySectionDescription}
+                  </p>
+                )}
+
+                <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+                  <Checkbox
+                    id="policyEnabled"
+                    checked={policyConfig.enabled}
+                    onCheckedChange={(v: boolean) =>
+                      setPolicyConfig({ ...policyConfig, enabled: Boolean(v) })
+                    }
+                  />
+                  <Label htmlFor="policyEnabled" style={{ fontSize: "0.875rem", fontWeight: 400 }}>
+                    {labels.createPolicyCheckbox}
+                  </Label>
+                </div>
+
+                {policyConfig.enabled && (
+                  <div style={{ display: "flex", flexDirection: "column", gap: "1rem", paddingLeft: "1.5rem" }}>
+                    {/* Template Selection */}
+                    <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+                      <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+                        <FileCode style={{ width: "1rem", height: "1rem", color: "#6b7280" }} />
+                        <Label htmlFor="templateSelect">{labels.policyTemplateLabel}</Label>
+                      </div>
+                      {templates.length > 0 ? (
+                        <>
+                          <Select
+                            value={selectedTemplateId || ""}
+                            onValueChange={(v: string) =>
+                              handleTemplateSelect(
+                                v || null,
+                                setSelectedTemplateId,
+                                setTemplateParams
+                              )
+                            }
+                          >
+                            <SelectTrigger>
+                              <SelectValue placeholder="Select a template..." />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {templates.map((t) => (
+                                <SelectItem key={t.id} value={t.id}>
+                                  {t.name}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                          {selectedTemplate && (
+                            <p style={{ fontSize: "0.75rem", color: "#6b7280" }}>
+                              {selectedTemplate.description}
+                            </p>
+                          )}
+                        </>
+                      ) : (
+                        <p style={{ fontSize: "0.875rem", color: "#6b7280", fontStyle: "italic" }}>
+                          No templates available
+                        </p>
+                      )}
+                    </div>
+
+                    {/* Template Parameters */}
+                    {renderTemplateParams(selectedTemplate ?? null, templateParams, setTemplateParams)}
+
+                    {/* Contract Type */}
+                    <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+                      <Label htmlFor="contractType">Contract Type</Label>
+                      <Select
+                        value={policyConfig.contractType}
+                        onValueChange={(v: string) =>
+                          setPolicyConfig({ ...policyConfig, contractType: v })
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {contractTypes.map((ct) => (
+                            <SelectItem key={ct.value} value={ct.value}>
+                              {ct.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                      <p style={{ fontSize: "0.75rem", color: "#6b7280" }}>
+                        Contract ID: <code style={{ backgroundColor: "#f3f4f6", padding: "0 0.25rem", borderRadius: "0.25rem" }}>{policyConfig.contractType}</code>
+                      </p>
+                    </div>
+
+                    {/* Approval & Execution Type */}
+                    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1rem" }}>
+                      <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+                        <Label htmlFor="approvalType">Approval Type</Label>
+                        <Select
+                          value={policyConfig.approvalType}
+                          onValueChange={(v: string) =>
+                            setPolicyConfig({
+                              ...policyConfig,
+                              approvalType: v as "implicit" | "explicit",
+                            })
+                          }
+                        >
+                          <SelectTrigger>
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="implicit">Implicit</SelectItem>
+                            <SelectItem value="explicit">Explicit</SelectItem>
+                          </SelectContent>
+                        </Select>
+                        <p style={{ fontSize: "0.75rem", color: "#6b7280" }}>
+                          {policyConfig.approvalType === "implicit"
+                            ? "No manual approval required"
+                            : "Requires user approval"}
+                        </p>
+                      </div>
+
+                      <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+                        <Label htmlFor="executionType">Execution Type</Label>
+                        <Select
+                          value={policyConfig.executionType}
+                          onValueChange={(v: string) =>
+                            setPolicyConfig({
+                              ...policyConfig,
+                              executionType: v as "public" | "private",
+                            })
+                          }
+                        >
+                          <SelectTrigger>
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="public">Public</SelectItem>
+                            <SelectItem value="private">Private</SelectItem>
+                          </SelectContent>
+                        </Select>
+                        <p style={{ fontSize: "0.75rem", color: "#6b7280" }}>
+                          {policyConfig.executionType === "public"
+                            ? "Anyone can execute"
+                            : "Role-based execution"}
+                        </p>
+                      </div>
+                    </div>
+
+                    {/* Threshold */}
+                    {policyConfig.approvalType === "explicit" && (
+                      <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+                        <Label htmlFor="threshold">Approval Threshold</Label>
+                        <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", padding: "0.5rem", backgroundColor: "#f3f4f6", borderRadius: "0.375rem" }}>
+                          <span style={{ fontWeight: 500 }}>{calculatedThreshold}</span>
+                          <span style={{ color: "#6b7280", fontSize: "0.875rem" }}>
+                            (70% of {activeAdminCount} active admin
+                            {activeAdminCount !== 1 ? "s" : ""})
+                          </span>
+                        </div>
+                        <p style={{ fontSize: "0.75rem", color: "#6b7280" }}>
+                          Automatically calculated based on active admins
+                        </p>
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            )}
+
+            <DialogFooter>
+              <Button type="button" variant="outline" onClick={() => setCreatingRole(false)}>
+                {labels.cancelButton}
+              </Button>
+              <Button type="submit" disabled={isSubmitting || isCreatingPolicy}>
+                {isSubmitting || isCreatingPolicy ? "Creating..." : labels.createButton}
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+
+      {/* Edit Role Dialog */}
+      <Dialog open={!!editingRole} onOpenChange={(open) => !open && setEditingRole(null)}>
+        <DialogContent style={{ maxWidth: "28rem", maxHeight: "90vh", overflowY: "auto" }}>
+          <DialogHeader>
+            <DialogTitle>{labels.editRoleTitle}</DialogTitle>
+            <DialogDescription>{labels.editRoleDescription}</DialogDescription>
+          </DialogHeader>
+          <form onSubmit={handleEditSubmit} style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+            <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+              <Label>Role Name</Label>
+              <Input value={formData.name} disabled style={{ backgroundColor: "#f3f4f6" }} />
+              <p style={{ fontSize: "0.75rem", color: "#6b7280" }}>{labels.roleNameDisabledHint}</p>
+            </div>
+
+            <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+              <Label>Description</Label>
+              <Textarea
+                value={formData.description}
+                onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+                  setFormData({ ...formData, description: e.target.value })
+                }
+                placeholder={labels.descriptionPlaceholder}
+                rows={3}
+              />
+            </div>
+
+            {/* Policy Configuration - special roles only */}
+            {editingRole && isSpecialRole(editingRole) && onCreatePolicy && (
+              <div style={{ display: "flex", flexDirection: "column", gap: "1rem", paddingTop: "1rem", borderTop: "1px solid #e5e7eb" }}>
+                <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+                  <Shield style={{ width: "1rem", height: "1rem", color: "#6b7280" }} />
+                  <h4 style={{ fontWeight: 500 }}>{labels.policySectionTitle}</h4>
+                </div>
+
+                {loadingPolicy ? (
+                  <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", fontSize: "0.875rem", color: "#6b7280" }}>
+                    <div style={{ height: "1rem", width: "1rem", border: "2px solid #6b7280", borderTopColor: "transparent", borderRadius: "9999px", animation: "spin 1s linear infinite" }} />
+                    {labels.loadingPolicyText}
+                  </div>
+                ) : editingPolicyConfig ? (
+                  <>
+                    <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+                      <Checkbox
+                        id="editPolicyEnabled"
+                        checked={editingPolicyConfig.enabled}
+                        onCheckedChange={(v: boolean) =>
+                          setEditingPolicyConfig({
+                            ...editingPolicyConfig,
+                            enabled: Boolean(v),
+                          })
+                        }
+                      />
+                      <Label htmlFor="editPolicyEnabled" style={{ fontSize: "0.875rem", fontWeight: 400 }}>
+                        {editingPolicyConfig.enabled
+                          ? labels.updatePolicyCheckbox
+                          : labels.createPolicyCheckbox}
+                      </Label>
+                    </div>
+
+                    {editingPolicyConfig.enabled && (
+                      <div style={{ display: "flex", flexDirection: "column", gap: "1rem", paddingLeft: "1.5rem" }}>
+                        {/* Template Selection */}
+                        <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+                          <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+                            <FileCode style={{ width: "1rem", height: "1rem", color: "#6b7280" }} />
+                            <Label htmlFor="editTemplateSelect">{labels.policyTemplateLabel}</Label>
+                          </div>
+                          {templates.length > 0 ? (
+                            <>
+                              <Select
+                                value={editSelectedTemplateId || ""}
+                                onValueChange={(v: string) =>
+                                  handleTemplateSelect(
+                                    v || null,
+                                    setEditSelectedTemplateId,
+                                    setEditTemplateParams
+                                  )
+                                }
+                              >
+                                <SelectTrigger>
+                                  <SelectValue placeholder="Select a template..." />
+                                </SelectTrigger>
+                                <SelectContent>
+                                  {templates.map((t) => (
+                                    <SelectItem key={t.id} value={t.id}>
+                                      {t.name}
+                                    </SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              {editSelectedTemplateId && templates.find((t) => t.id === editSelectedTemplateId)?.description && (
+                                <p style={{ fontSize: "0.75rem", color: "#6b7280" }}>
+                                  {templates.find((t) => t.id === editSelectedTemplateId)?.description}
+                                </p>
+                              )}
+                            </>
+                          ) : (
+                            <p style={{ fontSize: "0.875rem", color: "#6b7280", fontStyle: "italic" }}>
+                              No templates available
+                            </p>
+                          )}
+                        </div>
+
+                        {/* Template Parameters */}
+                        {editSelectedTemplateId &&
+                          renderTemplateParams(
+                            templates.find((t) => t.id === editSelectedTemplateId) || null,
+                            editTemplateParams,
+                            setEditTemplateParams
+                          )}
+
+                        {/* Approval & Execution Type */}
+                        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1rem" }}>
+                          <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+                            <Label>Approval Type</Label>
+                            <Select
+                              value={editingPolicyConfig.approvalType}
+                              onValueChange={(v: string) =>
+                                setEditingPolicyConfig({
+                                  ...editingPolicyConfig,
+                                  approvalType: v as "implicit" | "explicit",
+                                })
+                              }
+                            >
+                              <SelectTrigger>
+                                <SelectValue />
+                              </SelectTrigger>
+                              <SelectContent>
+                                <SelectItem value="implicit">Implicit</SelectItem>
+                                <SelectItem value="explicit">Explicit</SelectItem>
+                              </SelectContent>
+                            </Select>
+                          </div>
+
+                          <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+                            <Label>Execution Type</Label>
+                            <Select
+                              value={editingPolicyConfig.executionType}
+                              onValueChange={(v: string) =>
+                                setEditingPolicyConfig({
+                                  ...editingPolicyConfig,
+                                  executionType: v as "public" | "private",
+                                })
+                              }
+                            >
+                              <SelectTrigger>
+                                <SelectValue />
+                              </SelectTrigger>
+                              <SelectContent>
+                                <SelectItem value="public">Public</SelectItem>
+                                <SelectItem value="private">Private</SelectItem>
+                              </SelectContent>
+                            </Select>
+                          </div>
+                        </div>
+
+                        {/* Threshold */}
+                        {editingPolicyConfig.approvalType === "explicit" && (
+                          <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+                            <Label>Approval Threshold</Label>
+                            <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", padding: "0.5rem", backgroundColor: "#f3f4f6", borderRadius: "0.375rem" }}>
+                              <span style={{ fontWeight: 500 }}>{calculatedThreshold}</span>
+                              <span style={{ color: "#6b7280", fontSize: "0.875rem" }}>
+                                (70% of {activeAdminCount} active admin
+                                {activeAdminCount !== 1 ? "s" : ""})
+                              </span>
+                            </div>
+                            <p style={{ fontSize: "0.75rem", color: "#6b7280" }}>
+                              Automatically calculated based on active admins
+                            </p>
+                          </div>
+                        )}
+
+                        <p style={{ fontSize: "0.75rem", backgroundColor: "#fffbeb", color: "#92400e", padding: "0.5rem", borderRadius: "0.25rem" }}>
+                          {labels.policyUpdateWarning}
+                        </p>
+                      </div>
+                    )}
+                  </>
+                ) : null}
+              </div>
+            )}
+
+            <DialogFooter style={{ display: "flex", justifyContent: "space-between" }}>
+              <Button
+                type="button"
+                variant="destructive"
+                onClick={() => editingRole && setDeletingRole(editingRole)}
+              >
+                <Trash2 style={{ height: "1rem", width: "1rem", marginRight: "0.5rem" }} />
+                {labels.deleteButton}
+              </Button>
+              <div style={{ display: "flex", gap: "0.5rem" }}>
+                <Button type="button" variant="outline" onClick={() => setEditingRole(null)}>
+                  {labels.cancelButton}
+                </Button>
+                <Button type="submit" disabled={isSubmitting || isUpdatingPolicy}>
+                  {isSubmitting || isUpdatingPolicy ? "Saving..." : labels.saveButton}
+                </Button>
+              </div>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Confirmation Dialog */}
+      <AlertDialog open={!!deletingRole} onOpenChange={(open) => !open && setDeletingRole(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{labels.deleteRoleTitle}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {labels.deleteConfirmMessage.replace("{name}", deletingRole?.name || "")}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{labels.cancelButton}</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDeleteConfirm}
+              style={{ backgroundColor: "#ef4444", color: "#ffffff" }}
+            >
+              {isSubmitting ? "Deleting..." : labels.deleteButton}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}