@tidecloak/ui-framework 0.0.1

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

@@ -0,0 +1,680 @@
+import React, { useState, useCallback, useEffect } from "react";
+import { CheckSquare, User, Shield, FileKey, Eye, Upload, X, Undo2, Check, Clock, CheckCircle2, XCircle, Trash2 } from "lucide-react";
+import { formatTimestamp, delay } from "../../../utils";
+import { useAutoRefresh } from "../../../hooks/useAutoRefresh";
+import { useSelection } from "../../../hooks/useSelection";
+import { RefreshButton } from "../../common/RefreshButton";
+import { StatusBadge } from "../../common/StatusBadge";
+import { ActionButton, ActionButtonGroup } from "../../common/ActionButton";
+import { LoadingSkeleton } from "../../common/LoadingSkeleton";
+import { EmptyState } from "../../common/EmptyState";
+import { TabsView } from "../../tabs/TabsView";
+import { DataTable } from "../../data-table/DataTable";
+import { DetailDialog } from "../../dialogs/DetailDialog";
+import { defaultComponents } from "../../ui";
+import type { BaseDataItem, ColumnDef, DetailField, ChangeSetRequest, ToastConfig } from "../../../types";
+
+export interface BaseApprovalItem extends BaseDataItem {
+  status: string;
+  timestamp: string | number;
+  retrievalInfo?: ChangeSetRequest;
+}
+
+export interface AccessApprovalItem extends BaseApprovalItem {
+  username: string;
+  role: string;
+  clientId: string;
+  commitReady: boolean;
+  decisionMade: boolean;
+  rejectionFound?: boolean;
+}
+
+export interface RoleApprovalItem extends BaseApprovalItem {
+  role: string;
+  compositeRole?: string;
+  clientId: string;
+  requestType: string;
+  requestedBy: string;
+}
+
+export interface PolicyApprovalItem extends BaseApprovalItem {
+  roleId: string;
+  requestedBy: string;
+  requestedByEmail?: string;
+  threshold: number;
+  approvalCount: number;
+  rejectionCount?: number;
+  commitReady?: boolean;
+  approvedBy?: string[];
+  deniedBy?: string[];
+  policyRequestData: string;
+  contractCode?: string;
+}
+
+export interface ApprovalDecision {
+  decidedBy: string;
+  decidedByEmail?: string;
+  decision: "approved" | "rejected";
+  timestamp: string | number;
+}
+
+export interface ApprovalTabConfig<T extends BaseApprovalItem> {
+  key: string;
+  label: string;
+  icon?: React.ReactNode;
+  /** Data fetcher */
+  fetchData: () => Promise<T[]>;
+  /** Column definitions for the table */
+  columns: ColumnDef<T>[];
+  /** Empty state configuration */
+  emptyState: {
+    icon: React.ReactNode;
+    title: string;
+    description: string;
+  };
+  /** Action handlers */
+  actions: {
+    onReview?: (item: T) => Promise<void>;
+    onCommit?: (item: T) => Promise<void>;
+    onCancel?: (item: T) => Promise<void>;
+    onRevoke?: (item: T) => Promise<void>;
+    onView?: (item: T) => void;
+    onDelete?: (item: T) => Promise<void>;
+  };
+  /** Check if item is ready to commit */
+  canCommit?: (item: T) => boolean;
+  /** Check if user has made a decision */
+  hasUserDecided?: (item: T) => boolean;
+  /** Query keys for cache invalidation */
+  queryKeys?: string[];
+}
+
+export interface ApprovalsPageBaseProps<
+  TAccess extends AccessApprovalItem = AccessApprovalItem,
+  TRole extends RoleApprovalItem = RoleApprovalItem,
+  TPolicy extends PolicyApprovalItem = PolicyApprovalItem
+> {
+  /** Page title */
+  title?: string;
+  /** Page description */
+  description?: string;
+  /** Tab configurations for default tabs */
+  tabs: {
+    access?: ApprovalTabConfig<TAccess>;
+    roles?: ApprovalTabConfig<TRole>;
+    policies?: ApprovalTabConfig<TPolicy>;
+  };
+  /** Additional custom tabs */
+  additionalTabs?: ApprovalTabConfig<any>[];
+  /** Initial active tab (can be any tab key) */
+  initialTab?: string;
+  /** Toast notification handler */
+  toast?: (config: ToastConfig) => void;
+  /** Auto-refresh interval in seconds */
+  refreshInterval?: number;
+  /** Query invalidation handler */
+  invalidateQueries?: (queryKeys: string[]) => void;
+  /** Current user ID (for checking decisions) */
+  currentUserId?: 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<any>;
+    Skeleton?: React.ComponentType<{ className?: string }>;
+    // Table components
+    Table?: React.ComponentType<any>;
+    TableHeader?: React.ComponentType<any>;
+    TableBody?: React.ComponentType<any>;
+    TableRow?: React.ComponentType<any>;
+    TableHead?: React.ComponentType<any>;
+    TableCell?: React.ComponentType<any>;
+    // Tabs components
+    Tabs?: React.ComponentType<any>;
+    TabsList?: React.ComponentType<any>;
+    TabsTrigger?: React.ComponentType<any>;
+    TabsContent?: React.ComponentType<any>;
+    // Dialog components
+    Dialog?: React.ComponentType<any>;
+    DialogContent?: React.ComponentType<any>;
+    DialogHeader?: React.ComponentType<any>;
+    DialogTitle?: React.ComponentType<any>;
+    DialogDescription?: React.ComponentType<any>;
+    DialogFooter?: React.ComponentType<any>;
+  };
+  /** Additional class name */
+  className?: string;
+  /** Optional help text shown below description */
+  helpText?: React.ReactNode;
+}
+
+// ============================================================================
+// GENERIC APPROVAL TAB COMPONENT
+// ============================================================================
+
+interface ApprovalTabProps<T extends BaseApprovalItem> {
+  config: ApprovalTabConfig<T>;
+  refreshInterval: number;
+  toast?: (config: ToastConfig) => void;
+  invalidateQueries?: (queryKeys: string[]) => void;
+  currentUserId?: string;
+  components?: ApprovalsPageBaseProps['components'];
+  /** Trigger to force refresh from parent */
+  refreshTrigger?: number;
+  /** Callback to report loading state to parent */
+  onLoadingChange?: (isLoading: boolean) => void;
+  /** Callback to report seconds remaining to parent */
+  onSecondsRemainingChange?: (seconds: number) => void;
+}
+
+function ApprovalTab<T extends BaseApprovalItem>({
+  config,
+  refreshInterval,
+  toast,
+  invalidateQueries,
+  currentUserId,
+  components = {},
+  refreshTrigger,
+  onLoadingChange,
+  onSecondsRemainingChange,
+}: ApprovalTabProps<T>) {
+  const [data, setData] = useState<T[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isProcessing, setIsProcessing] = useState(false);
+
+  const fetchData = useCallback(async () => {
+    setIsLoading(true);
+    onLoadingChange?.(true);
+    try {
+      const result = await config.fetchData();
+      setData(result);
+      if (invalidateQueries && config.queryKeys) {
+        invalidateQueries(config.queryKeys);
+      }
+    } catch (error) {
+      console.error(`Error fetching ${config.key} approvals:`, error);
+      toast?.({
+        title: `Failed to fetch ${config.label.toLowerCase()}`,
+        description: error instanceof Error ? error.message : "Unknown error",
+        variant: "destructive",
+      });
+    } finally {
+      setIsLoading(false);
+      onLoadingChange?.(false);
+    }
+  }, [config, invalidateQueries, toast, onLoadingChange]);
+
+  const { secondsRemaining, refreshNow } = useAutoRefresh({
+    intervalSeconds: refreshInterval,
+    refresh: fetchData,
+    isBlocked: isLoading || isProcessing,
+  });
+
+  // Report seconds remaining to parent
+  useEffect(() => {
+    if (secondsRemaining !== null) {
+      onSecondsRemainingChange?.(secondsRemaining);
+    }
+  }, [secondsRemaining, onSecondsRemainingChange]);
+
+  useEffect(() => {
+    void refreshNow();
+  }, [refreshNow]);
+
+  // Trigger refresh when refreshTrigger changes from parent
+  useEffect(() => {
+    if (refreshTrigger && refreshTrigger > 0) {
+      void refreshNow();
+    }
+  }, [refreshTrigger, refreshNow]);
+
+  const handleAction = async (
+    action: ((item: T) => Promise<void>) | undefined,
+    item: T,
+    successMessage: string
+  ) => {
+    if (!action) return;
+    setIsProcessing(true);
+    try {
+      await action(item);
+      toast?.({ title: successMessage });
+      await delay(500);
+      await refreshNow();
+    } catch (error) {
+      console.error("Action error:", error);
+      toast?.({
+        title: "Action failed",
+        description: error instanceof Error ? error.message : "Unknown error",
+        variant: "destructive",
+      });
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  // Add actions column to config columns
+  const columnsWithActions: ColumnDef<T>[] = [
+    ...config.columns,
+    {
+      key: "actions",
+      header: "Actions",
+      align: "right",
+      cell: (item) => {
+        const canCommit = config.canCommit?.(item) ?? false;
+        const hasDecided = config.hasUserDecided?.(item) ?? false;
+
+        return (
+          <ActionButtonGroup>
+            {/* Review button */}
+            {config.actions.onReview && !hasDecided && (
+              <ActionButton
+                action={canCommit ? "commit" : "review"}
+                onClick={() => handleAction(
+                  canCommit ? config.actions.onCommit : config.actions.onReview,
+                  item,
+                  canCommit ? "Committed successfully" : "Reviewed successfully"
+                )}
+                title={canCommit ? "Commit change" : "Review request"}
+                disabled={isProcessing}
+                ButtonComponent={components.Button}
+              />
+            )}
+
+            {/* Revoke button (shown if user has decided) */}
+            {config.actions.onRevoke && hasDecided && (
+              <ActionButton
+                action="revoke"
+                onClick={() => handleAction(config.actions.onRevoke, item, "Decision revoked")}
+                title="Revoke your decision"
+                disabled={isProcessing}
+                ButtonComponent={components.Button}
+              />
+            )}
+
+            {/* Commit button (if ready and separate from review) */}
+            {config.actions.onCommit && canCommit && !config.actions.onReview && (
+              <ActionButton
+                action="commit"
+                onClick={() => handleAction(config.actions.onCommit, item, "Committed successfully")}
+                title="Commit change"
+                disabled={isProcessing}
+                ButtonComponent={components.Button}
+              />
+            )}
+
+            {/* View button */}
+            {config.actions.onView && (
+              <ActionButton
+                action="view"
+                onClick={() => config.actions.onView!(item)}
+                title="View details"
+                ButtonComponent={components.Button}
+              />
+            )}
+
+            {/* Cancel/Delete button */}
+            {config.actions.onCancel && (
+              <ActionButton
+                action="cancel"
+                onClick={() => handleAction(config.actions.onCancel, item, "Cancelled successfully")}
+                title="Cancel request"
+                disabled={isProcessing}
+                ButtonComponent={components.Button}
+              />
+            )}
+            {config.actions.onDelete && (
+              <ActionButton
+                action="delete"
+                onClick={() => handleAction(config.actions.onDelete, item, "Deleted successfully")}
+                title="Delete request"
+                disabled={isProcessing}
+                ButtonComponent={components.Button}
+              />
+            )}
+          </ActionButtonGroup>
+        );
+      },
+    },
+  ];
+
+  // Loading state
+  if (isLoading && data.length === 0) {
+    return (
+      <div style={{ padding: "1rem" }}>
+        <LoadingSkeleton rows={3} type="table" SkeletonComponent={components.Skeleton} />
+      </div>
+    );
+  }
+
+  // Empty state
+  if (!data || data.length === 0) {
+    return (
+      <div style={{ padding: "1rem" }}>
+        <EmptyState
+          icon={config.emptyState.icon}
+          title={config.emptyState.title}
+          description={config.emptyState.description}
+        />
+      </div>
+    );
+  }
+
+  // Table view
+  return (
+    <DataTable
+      data={data}
+      columns={columnsWithActions}
+      components={{
+        Table: components.Table,
+        TableHeader: components.TableHeader,
+        TableBody: components.TableBody,
+        TableRow: components.TableRow,
+        TableHead: components.TableHead,
+        TableCell: components.TableCell,
+        Skeleton: components.Skeleton,
+      }}
+    />
+  );
+}
+
+// ============================================================================
+// MAIN APPROVALS PAGE COMPONENT
+// ============================================================================
+
+/**
+ * ApprovalsPage - Generic approvals page with tabs for access, roles, and policies
+ *
+ * @example
+ * ```tsx
+ * <ApprovalsPage
+ *   tabs={{
+ *     access: {
+ *       key: 'access',
+ *       label: 'Access',
+ *       fetchData: api.admin.accessApprovals.list,
+ *       columns: accessColumns,
+ *       emptyState: { icon: <User />, title: 'No pending requests', description: '...' },
+ *       actions: {
+ *         onReview: handleReview,
+ *         onCommit: handleCommit,
+ *         onCancel: handleCancel,
+ *       },
+ *       canCommit: (item) => item.commitReady,
+ *     },
+ *     // ... other tabs
+ *   }}
+ *   toast={toast}
+ *   invalidateQueries={queryClient.invalidateQueries}
+ * />
+ * ```
+ */
+export function ApprovalsPageBase<
+  TAccess extends AccessApprovalItem = AccessApprovalItem,
+  TRole extends RoleApprovalItem = RoleApprovalItem,
+  TPolicy extends PolicyApprovalItem = PolicyApprovalItem
+>({
+  title = "Change Requests",
+  description = "Review and approve pending access, role, and policy change requests.",
+  tabs,
+  additionalTabs = [],
+  initialTab = "access",
+  toast,
+  refreshInterval = 15,
+  invalidateQueries,
+  currentUserId,
+  components = {},
+  className,
+  helpText,
+}: ApprovalsPageBaseProps<TAccess, TRole, TPolicy>) {
+  const [activeTab, setActiveTab] = useState<string>(initialTab);
+  const [badgeCounts, setBadgeCounts] = useState<Record<string, number>>({});
+  const [refreshTrigger, setRefreshTrigger] = useState(0);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [secondsRemaining, setSecondsRemaining] = useState(refreshInterval);
+
+  // 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;
+
+  // Handle manual refresh
+  const handleRefresh = useCallback(() => {
+    setRefreshTrigger((prev) => prev + 1);
+  }, []);
+
+  // Build tab definitions
+  const tabDefs = [];
+
+  if (tabs.access) {
+    tabDefs.push({
+      key: "access",
+      label: tabs.access.label || "Access",
+      icon: tabs.access.icon || <User style={{ height: "1rem", width: "1rem" }} />,
+      badge: badgeCounts.access,
+      content: (
+        <ApprovalTab
+          config={tabs.access as ApprovalTabConfig<any>}
+          refreshInterval={refreshInterval}
+          toast={toast}
+          invalidateQueries={invalidateQueries}
+          currentUserId={currentUserId}
+          components={components}
+          refreshTrigger={refreshTrigger}
+          onLoadingChange={setIsRefreshing}
+          onSecondsRemainingChange={setSecondsRemaining}
+        />
+      ),
+    });
+  }
+
+  if (tabs.roles) {
+    tabDefs.push({
+      key: "roles",
+      label: tabs.roles.label || "Roles",
+      icon: tabs.roles.icon || <Shield style={{ height: "1rem", width: "1rem" }} />,
+      badge: badgeCounts.roles,
+      content: (
+        <ApprovalTab
+          config={tabs.roles as ApprovalTabConfig<any>}
+          refreshInterval={refreshInterval}
+          toast={toast}
+          invalidateQueries={invalidateQueries}
+          currentUserId={currentUserId}
+          components={components}
+          refreshTrigger={refreshTrigger}
+          onLoadingChange={setIsRefreshing}
+          onSecondsRemainingChange={setSecondsRemaining}
+        />
+      ),
+    });
+  }
+
+  if (tabs.policies) {
+    tabDefs.push({
+      key: "policies",
+      label: tabs.policies.label || "Policies",
+      icon: tabs.policies.icon || <FileKey style={{ height: "1rem", width: "1rem" }} />,
+      badge: badgeCounts.policies,
+      content: (
+        <ApprovalTab
+          config={tabs.policies as ApprovalTabConfig<any>}
+          refreshInterval={refreshInterval}
+          toast={toast}
+          invalidateQueries={invalidateQueries}
+          currentUserId={currentUserId}
+          components={components}
+          refreshTrigger={refreshTrigger}
+          onLoadingChange={setIsRefreshing}
+          onSecondsRemainingChange={setSecondsRemaining}
+        />
+      ),
+    });
+  }
+
+  // Add any additional custom tabs
+  for (const tabConfig of additionalTabs) {
+    tabDefs.push({
+      key: tabConfig.key,
+      label: tabConfig.label,
+      icon: tabConfig.icon,
+      badge: badgeCounts[tabConfig.key],
+      content: (
+        <ApprovalTab
+          config={tabConfig}
+          refreshInterval={refreshInterval}
+          toast={toast}
+          invalidateQueries={invalidateQueries}
+          currentUserId={currentUserId}
+          components={components}
+          refreshTrigger={refreshTrigger}
+          onLoadingChange={setIsRefreshing}
+          onSecondsRemainingChange={setSecondsRemaining}
+        />
+      ),
+    });
+  }
+
+  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 }}>
+            <CheckSquare style={{ width: "1.5rem", height: "1.5rem" }} />
+            {title}
+          </h1>
+          <p style={{ fontSize: "0.875rem", color: "#6b7280", margin: "0.25rem 0 0" }}>{description}</p>
+        </div>
+        <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+          <RefreshButton
+            onClick={handleRefresh}
+            isRefreshing={isRefreshing}
+            secondsRemaining={secondsRemaining}
+            title="Refresh now"
+          />
+        </div>
+      </div>
+
+      {/* Help text */}
+      {helpText && <div style={{ marginBottom: "1rem" }}>{helpText}</div>}
+
+      {/* Tabs */}
+      <Card>
+        <CardContent style={{ padding: 0 }}>
+          <TabsView
+            tabs={tabDefs}
+            activeTab={activeTab}
+            onTabChange={setActiveTab}
+            components={{
+              Tabs: components.Tabs,
+              TabsList: components.TabsList,
+              TabsTrigger: components.TabsTrigger,
+              TabsContent: components.TabsContent,
+              Badge: components.Badge,
+            }}
+          />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+// ============================================================================
+// HELPER FUNCTIONS FOR CREATING COMMON COLUMNS
+// ============================================================================
+
+/**
+ * Create user column for access approvals
+ */
+export function createUserColumn<T extends { username: string }>(): ColumnDef<T> {
+  return {
+    key: "user",
+    header: "User",
+    cell: (item) => (
+      <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+        <div style={{ display: "flex", height: "2rem", width: "2rem", alignItems: "center", justifyContent: "center", borderRadius: "9999px", backgroundColor: "rgba(59, 130, 246, 0.1)" }}>
+          <User style={{ height: "1rem", width: "1rem", color: "#3b82f6" }} />
+        </div>
+        <span style={{ fontWeight: 500 }}>{item.username}</span>
+      </div>
+    ),
+  };
+}
+
+/**
+ * Create role column
+ */
+export function createRoleColumn<T extends { role?: string; roleId?: string }>(): ColumnDef<T> {
+  return {
+    key: "role",
+    header: "Role",
+    responsive: "sm",
+    cell: (item) => (
+      <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+        <Shield style={{ height: "1rem", width: "1rem", color: "#6b7280" }} />
+        <span style={{ fontSize: "0.875rem", fontFamily: "monospace" }}>{item.role || item.roleId}</span>
+      </div>
+    ),
+  };
+}
+
+/**
+ * Create timestamp column
+ */
+export function createTimestampColumn<T extends { timestamp?: string | number; createdAt?: number }>(
+  options?: { header?: string; responsive?: "sm" | "md" | "lg" }
+): ColumnDef<T> {
+  return {
+    key: "timestamp",
+    header: options?.header || "Created",
+    responsive: options?.responsive || "md",
+    cell: (item) => {
+      const ts = item.timestamp || (item.createdAt ? item.createdAt * 1000 : undefined);
+      return (
+        <span style={{ fontSize: "0.875rem", color: "#6b7280" }}>
+          {ts ? formatTimestamp(ts) : "-"}
+        </span>
+      );
+    },
+  };
+}
+
+/**
+ * Create status column
+ */
+export function createStatusColumn<T extends { status?: string; commitReady?: boolean }>(
+  options?: { getStatus?: (item: T) => string }
+): ColumnDef<T> {
+  return {
+    key: "status",
+    header: "Status",
+    cell: (item) => {
+      const status = options?.getStatus?.(item) || item.status || "pending";
+      return <StatusBadge status={status} />;
+    },
+  };
+}
+
+/**
+ * Create progress column for threshold-based approvals
+ */
+export function createProgressColumn<T extends { approvalCount?: number; rejectionCount?: number; threshold: number }>(): ColumnDef<T> {
+  return {
+    key: "progress",
+    header: "Progress",
+    responsive: "md",
+    cell: (item) => (
+      <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+        <span style={{ color: "#16a34a" }}>{item.approvalCount || 0}</span>
+        <span style={{ color: "#6b7280" }}>/</span>
+        <span>{item.threshold}</span>
+        {(item.rejectionCount ?? 0) > 0 && (
+          <span style={{ color: "#dc2626", fontSize: "0.875rem" }}>
+            ({item.rejectionCount} rejected)
+          </span>
+        )}
+      </div>
+    ),
+  };
+}