@tidecloak/ui-framework 0.0.1

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

@@ -0,0 +1,581 @@
+import React, { useState, useEffect, useRef } from "react";
+import { ScrollText, Activity, Shield, Plus, Check, X, Upload, Ban, Eye } from "lucide-react";
+import { formatLogTimestamp, computeRowsForViewportHeight } from "../../../utils";
+import { useAutoRefresh } from "../../../hooks/useAutoRefresh";
+import { usePagination } from "../../../hooks/usePagination";
+import { RefreshButton } from "../../common/RefreshButton";
+import { StatusBadge } from "../../common/StatusBadge";
+import { ActionButton } 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, ToastConfig } from "../../../types";
+
+export interface BaseLogItem extends BaseDataItem {
+  timestamp: number; // Unix timestamp in milliseconds
+  type?: string;
+  action?: string;
+}
+
+export interface AccessLogItem extends BaseLogItem {
+  type: string;
+  clientId?: string;
+  userId?: string;
+  ipAddress?: string;
+  details?: Record<string, any>;
+}
+
+export interface PolicyLogItem extends BaseLogItem {
+  policyId: string;
+  roleId: string;
+  action: string;
+  performedBy: string;
+  performedByEmail?: string;
+  details?: string;
+  policyStatus?: string;
+  policyThreshold?: number;
+  approvalCount?: number;
+  rejectionCount?: number;
+}
+
+export interface LogsTabConfig<T extends BaseLogItem> {
+  key: string;
+  label: string;
+  icon?: React.ReactNode;
+  /** Data fetcher - receives limit and offset */
+  fetchData: (limit: number, offset: number) => Promise<T[]>;
+  /** Column definitions for the table */
+  columns: ColumnDef<T>[];
+  /** Empty state configuration */
+  emptyState: {
+    icon: React.ReactNode;
+    title: string;
+    description: string;
+  };
+  /** Optional row click handler */
+  onRowClick?: (item: T) => void;
+  /** Query keys for cache invalidation */
+  queryKeys?: string[];
+}
+
+export interface LogsPageBaseProps<
+  TAccess extends AccessLogItem = AccessLogItem,
+  TPolicy extends PolicyLogItem = PolicyLogItem
+> {
+  /** Page title */
+  title?: string;
+  /** Page description */
+  description?: string;
+  /** Tab configurations */
+  tabs: {
+    access?: LogsTabConfig<TAccess>;
+    sessions?: {
+      key: string;
+      label: string;
+      icon?: React.ReactNode;
+      /** Embedded content component */
+      content: React.ReactNode;
+    };
+    policies?: LogsTabConfig<TPolicy>;
+  };
+  /** Initial active tab */
+  initialTab?: "access" | "sessions" | "policies";
+  /** Toast notification handler */
+  toast?: (config: ToastConfig) => void;
+  /** Auto-refresh interval in seconds */
+  refreshInterval?: number;
+  /** Query invalidation handler */
+  invalidateQueries?: (queryKeys: string[]) => void;
+  /** Available page sizes */
+  pageSizes?: number[];
+  /** Enable auto page sizing */
+  autoPageSize?: boolean;
+  /** URL state management */
+  urlState?: {
+    tab: string;
+    setTab: (tab: string) => void;
+  };
+  /** 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 }>;
+    Select?: React.ComponentType<any>;
+    SelectTrigger?: React.ComponentType<any>;
+    SelectValue?: React.ComponentType<any>;
+    SelectContent?: React.ComponentType<any>;
+    SelectItem?: React.ComponentType<any>;
+    // 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 LOGS TAB COMPONENT
+// ============================================================================
+
+interface LogsTabProps<T extends BaseLogItem> {
+  config: LogsTabConfig<T>;
+  refreshInterval: number;
+  toast?: (config: ToastConfig) => void;
+  invalidateQueries?: (queryKeys: string[]) => void;
+  pageSizes: number[];
+  autoPageSize: boolean;
+  components?: LogsPageBaseProps['components'];
+}
+
+function LogsTab<T extends BaseLogItem>({
+  config,
+  refreshInterval,
+  toast,
+  invalidateQueries,
+  pageSizes,
+  autoPageSize,
+  components = {},
+}: LogsTabProps<T>) {
+  const [data, setData] = useState<T[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const viewportRef = useRef<HTMLDivElement>(null);
+
+  // Pagination
+  const pagination = usePagination({
+    initialPageSize: autoPageSize ? 50 : pageSizes[0],
+    autoPageSize,
+    viewportRef: autoPageSize ? viewportRef : undefined,
+  });
+
+  const fetchData = async () => {
+    setIsLoading(true);
+    try {
+      const result = await config.fetchData(
+        pagination.pageSize,
+        pagination.page * pagination.pageSize
+      );
+      setData(result);
+      if (invalidateQueries && config.queryKeys) {
+        invalidateQueries(config.queryKeys);
+      }
+    } catch (error) {
+      console.error(`Error fetching ${config.key} logs:`, error);
+      toast?.({
+        title: `Failed to fetch ${config.label.toLowerCase()}`,
+        description: error instanceof Error ? error.message : "Unknown error",
+        variant: "destructive",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const { secondsRemaining, refreshNow } = useAutoRefresh({
+    intervalSeconds: refreshInterval,
+    refresh: fetchData,
+    isBlocked: isLoading,
+  });
+
+  // Fetch on mount and when pagination changes
+  useEffect(() => {
+    void fetchData();
+  }, [pagination.page, pagination.pageSize]);
+
+  const hasNextPage = data.length === pagination.pageSize;
+
+  // 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 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 hasSelectComponents = Select && SelectTrigger && SelectValue && SelectContent && SelectItem;
+
+  return (
+    <Card>
+      <CardContent style={{ padding: 0 }}>
+        {/* Pagination Controls */}
+        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "0.5rem", padding: "0.75rem 1rem", borderBottom: "1px solid #e5e7eb" }}>
+          <div style={{ fontSize: "0.875rem", color: "#6b7280" }}>
+            Page <span style={{ fontWeight: 500, color: "#111827" }}>{pagination.page + 1}</span>
+          </div>
+          <div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
+            {/* Page Size Selector */}
+            {hasSelectComponents && (
+              <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", fontSize: "0.875rem", color: "#6b7280" }}>
+                Page size
+                <Select
+                  value={pagination.pageSizeSelectValue}
+                  onValueChange={pagination.onPageSizeSelect}
+                >
+                  <SelectTrigger style={{ height: "2rem", width: "5.75rem" }}>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {autoPageSize && <SelectItem value="auto">Auto</SelectItem>}
+                    {pageSizes.map((size) => (
+                      <SelectItem key={size} value={String(size)}>
+                        {size}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            )}
+
+            {/* Navigation */}
+            <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => pagination.setPage(Math.max(0, pagination.page - 1))}
+                disabled={pagination.page === 0 || isLoading}
+              >
+                Previous
+              </Button>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => pagination.setPage(pagination.page + 1)}
+                disabled={!hasNextPage || isLoading}
+              >
+                Next
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        {/* Content */}
+        {isLoading && data.length === 0 ? (
+          <LoadingSkeleton rows={5} type="list" SkeletonComponent={components.Skeleton} />
+        ) : data.length > 0 ? (
+          <div
+            ref={viewportRef}
+            style={autoPageSize ? { height: "max(320px, calc(100vh - 360px))", overflow: "auto" } : undefined}
+          >
+            <div style={{ minWidth: "850px" }}>
+              <DataTable
+                data={data}
+                columns={config.columns}
+                onRowClick={config.onRowClick}
+                components={{
+                  Table: components.Table,
+                  TableHeader: components.TableHeader,
+                  TableBody: components.TableBody,
+                  TableRow: components.TableRow,
+                  TableHead: components.TableHead,
+                  TableCell: components.TableCell,
+                  Skeleton: components.Skeleton,
+                }}
+              />
+            </div>
+          </div>
+        ) : (
+          <EmptyState
+            icon={config.emptyState.icon}
+            title={config.emptyState.title}
+            description={config.emptyState.description}
+          />
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// ============================================================================
+// MAIN LOGS PAGE COMPONENT
+// ============================================================================
+
+/**
+ * LogsPage - Generic logs page with tabs for access, sessions, and policies
+ *
+ * @example
+ * ```tsx
+ * <LogsPage
+ *   tabs={{
+ *     access: {
+ *       key: 'access',
+ *       label: 'Access',
+ *       fetchData: (limit, offset) => api.admin.logs.access(limit, offset),
+ *       columns: accessColumns,
+ *       emptyState: { icon: <ScrollText />, title: 'No logs', description: '...' },
+ *     },
+ *     sessions: {
+ *       key: 'sessions',
+ *       label: 'Sessions',
+ *       content: <SessionHistoryContent />,
+ *     },
+ *     policies: {
+ *       key: 'policies',
+ *       label: 'Policies',
+ *       fetchData: (limit, offset) => api.admin.sshPolicies.getLogs(limit, offset),
+ *       columns: policyColumns,
+ *       emptyState: { icon: <Shield />, title: 'No policy logs', description: '...' },
+ *     },
+ *   }}
+ * />
+ * ```
+ */
+export function LogsPageBase<
+  TAccess extends AccessLogItem = AccessLogItem,
+  TPolicy extends PolicyLogItem = PolicyLogItem
+>({
+  title = "Logs",
+  description = "Review access changes and activity",
+  tabs,
+  initialTab = "access",
+  toast,
+  refreshInterval = 15,
+  invalidateQueries,
+  pageSizes = [25, 50, 100, 200],
+  autoPageSize = true,
+  urlState,
+  components = {},
+  className,
+  helpText,
+}: LogsPageBaseProps<TAccess, TPolicy>) {
+  const [activeTab, setActiveTab] = useState<string>(urlState?.tab || initialTab);
+
+  // Sync with URL state
+  useEffect(() => {
+    if (urlState?.tab && urlState.tab !== activeTab) {
+      setActiveTab(urlState.tab);
+    }
+  }, [urlState?.tab]);
+
+  const handleTabChange = (tab: string) => {
+    setActiveTab(tab);
+    urlState?.setTab(tab);
+  };
+
+  // Build tab definitions
+  const tabDefs = [];
+
+  if (tabs.access) {
+    tabDefs.push({
+      key: "access",
+      label: tabs.access.label || "Access",
+      icon: tabs.access.icon,
+      content: (
+        <LogsTab
+          config={tabs.access as LogsTabConfig<any>}
+          refreshInterval={refreshInterval}
+          toast={toast}
+          invalidateQueries={invalidateQueries}
+          pageSizes={pageSizes}
+          autoPageSize={autoPageSize}
+          components={components}
+        />
+      ),
+    });
+  }
+
+  if (tabs.sessions) {
+    tabDefs.push({
+      key: "sessions",
+      label: tabs.sessions.label || "Sessions",
+      icon: tabs.sessions.icon || <Activity style={{ height: "1rem", width: "1rem" }} />,
+      content: tabs.sessions.content,
+    });
+  }
+
+  if (tabs.policies) {
+    tabDefs.push({
+      key: "policies",
+      label: tabs.policies.label || "Policies",
+      icon: tabs.policies.icon || <Shield style={{ height: "1rem", width: "1rem" }} />,
+      content: (
+        <LogsTab
+          config={tabs.policies as LogsTabConfig<any>}
+          refreshInterval={refreshInterval}
+          toast={toast}
+          invalidateQueries={invalidateQueries}
+          pageSizes={pageSizes}
+          autoPageSize={autoPageSize}
+          components={components}
+        />
+      ),
+    });
+  }
+
+  // Get current isFetching state for refresh button
+  const [isFetching, setIsFetching] = useState(false);
+
+  const { secondsRemaining, refreshNow } = useAutoRefresh({
+    intervalSeconds: refreshInterval,
+    refresh: async () => {
+      // Trigger refetch - actual fetching happens in tabs
+    },
+    isBlocked: isFetching,
+  });
+
+  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 }}>
+            <ScrollText 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={() => void refreshNow()}
+            isRefreshing={isFetching}
+            secondsRemaining={secondsRemaining}
+            title="Refresh now"
+          />
+        </div>
+      </div>
+
+      {/* Help text */}
+      {helpText && <div style={{ marginBottom: "1rem" }}>{helpText}</div>}
+
+      {/* Tabs */}
+      <TabsView
+        tabs={tabDefs}
+        activeTab={activeTab}
+        onTabChange={handleTabChange}
+        components={{
+          Tabs: components.Tabs,
+          TabsList: components.TabsList,
+          TabsTrigger: components.TabsTrigger,
+          TabsContent: components.TabsContent,
+          Badge: components.Badge,
+        }}
+      />
+    </div>
+  );
+}
+
+// ============================================================================
+// HELPER FUNCTIONS FOR CREATING COMMON COLUMNS
+// ============================================================================
+
+/**
+ * Create timestamp column for logs
+ */
+export function createLogTimestampColumn<T extends { timestamp?: number; createdAt?: number; time?: number }>(
+  options?: { header?: string; field?: "timestamp" | "createdAt" | "time" }
+): ColumnDef<T> {
+  return {
+    key: "timestamp",
+    header: options?.header || "Timestamp",
+    cell: (item) => {
+      const field = options?.field || "timestamp";
+      let ts = (item as any)[field];
+
+      // Handle various timestamp formats
+      if (field === "createdAt" && ts) {
+        ts = ts * 1000; // Convert seconds to ms
+      } else if (field === "time") {
+        ts = (item as any).time;
+      }
+
+      return (
+        <span style={{ fontSize: "0.875rem", whiteSpace: "nowrap" }}>
+          {ts ? formatLogTimestamp(ts) : "-"}
+        </span>
+      );
+    },
+  };
+}
+
+/**
+ * Create action column with icon and color
+ */
+export function createActionColumn<T extends { action: string }>(): ColumnDef<T> {
+  const iconStyle = { height: "1rem", width: "1rem" };
+
+  const getActionIcon = (action: string) => {
+    switch (action) {
+      case "created": return <Plus style={iconStyle} />;
+      case "approved": return <Check style={iconStyle} />;
+      case "rejected":
+      case "denied": return <X style={iconStyle} />;
+      case "committed": return <Upload style={iconStyle} />;
+      case "cancelled": return <Ban style={iconStyle} />;
+      default: return <Activity style={iconStyle} />;
+    }
+  };
+
+  const getActionColor = (action: string): string => {
+    switch (action) {
+      case "created": return "#2563eb";
+      case "approved": return "#16a34a";
+      case "rejected":
+      case "denied": return "#dc2626";
+      case "committed": return "#9333ea";
+      case "cancelled": return "#6b7280";
+      default: return "#6b7280";
+    }
+  };
+
+  return {
+    key: "action",
+    header: "Action",
+    cell: (item) => (
+      <div style={{ display: "flex", alignItems: "center", gap: "0.375rem", fontSize: "0.875rem", fontWeight: 500, color: getActionColor(item.action) }}>
+        {getActionIcon(item.action)}
+        <span style={{ textTransform: "capitalize" }}>{item.action === "denied" ? "rejected" : item.action}</span>
+      </div>
+    ),
+  };
+}
+
+/**
+ * Create progress column for policy logs
+ */
+export function createLogProgressColumn<T extends { policyThreshold?: number; approvalCount?: number; rejectionCount?: number }>(): ColumnDef<T> {
+  return {
+    key: "progress",
+    header: "Progress",
+    cell: (item) => {
+      if (!item.policyThreshold) {
+        return <span style={{ color: "#6b7280" }}>-</span>;
+      }
+
+      return (
+        <div style={{ display: "flex", alignItems: "center", gap: "0.25rem", fontSize: "0.875rem" }}>
+          <span style={{ color: "#16a34a" }}>{item.approvalCount || 0}</span>
+          <span style={{ color: "#6b7280" }}>/</span>
+          <span>{item.policyThreshold}</span>
+          {(item.rejectionCount ?? 0) > 0 && (
+            <span style={{ color: "#dc2626", fontSize: "0.75rem", marginLeft: "0.25rem" }}>
+              ({item.rejectionCount} ✗)
+            </span>
+          )}
+        </div>
+      );
+    },
+  };
+}