@tidecloak/ui-framework 0.0.1

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

@@ -0,0 +1,267 @@
+/**
+ * LogsPage - View access and policy activity logs
+ *
+ * @example
+ * ```tsx
+ * <LogsPage adminAPI={AdminAPI} policyLogsAPI={policyLogsAPI} />
+ * ```
+ */
+
+import { AdminAPI as DefaultAdminAPI } from "@tidecloak/js";
+import {
+  LogsPageBase,
+  type LogsPageBaseProps,
+  type AccessLogItem,
+  type PolicyLogItem,
+  createLogTimestampColumn,
+  createActionColumn,
+  createLogProgressColumn,
+} from "../base";
+import { User, Shield } from "lucide-react";
+import { StatusBadge } from "../../common/StatusBadge";
+
+// Type for the AdminAPI instance
+type AdminAPIInstance = {
+  setRealm?: (realm: string) => void;
+  getAccessLogs: (params: { first: number; max: number }) => Promise<any>;
+};
+
+export interface PolicyLogData {
+  id: string;
+  policyId: string;
+  roleId: string;
+  action: string;
+  performedBy: string;
+  performedByEmail?: string;
+  timestamp: number; // Unix timestamp in milliseconds
+  createdAt?: number; // Unix timestamp in seconds (for display)
+  policyStatus?: string;
+  policyThreshold?: number;
+  approvalCount?: number;
+  rejectionCount?: number;
+  details?: string;
+}
+
+/** Implement this to store policy logs (or use createLocalStoragePolicyLogsAPI for dev) */
+export interface PolicyLogsAPI {
+  getPolicyLogs: (params: { first: number; max: number }) => Promise<PolicyLogData[]>;
+  addLog: (log: Omit<PolicyLogData, "id" | "timestamp" | "createdAt">) => Promise<void>;
+  _isLocalStorage?: boolean;
+}
+
+const POLICY_LOGS_STORAGE_KEY = "tidecloak_policy_logs";
+
+/** localStorage adapter for development */
+export function createLocalStoragePolicyLogsAPI(storageKey = POLICY_LOGS_STORAGE_KEY): PolicyLogsAPI {
+  const getAll = (): PolicyLogData[] => {
+    try {
+      const data = localStorage.getItem(storageKey);
+      return data ? JSON.parse(data) : [];
+    } catch {
+      return [];
+    }
+  };
+
+  const saveAll = (logs: PolicyLogData[]) => {
+    localStorage.setItem(storageKey, JSON.stringify(logs));
+  };
+
+  return {
+    _isLocalStorage: true as const,
+
+    getPolicyLogs: async (params: { first: number; max: number }) => {
+      const logs = getAll();
+      // Sort by timestamp descending (newest first)
+      logs.sort((a, b) => b.timestamp - a.timestamp);
+      return logs.slice(params.first, params.first + params.max);
+    },
+
+    addLog: async (log: Omit<PolicyLogData, "id" | "timestamp" | "createdAt">) => {
+      const logs = getAll();
+      const now = Date.now();
+      const newLog: PolicyLogData = {
+        ...log,
+        id: `log-${now}-${Math.random().toString(36).slice(2, 9)}`,
+        timestamp: now,
+        createdAt: Math.floor(now / 1000), // Unix seconds for display
+      };
+      logs.push(newLog);
+      saveAll(logs);
+    },
+  };
+}
+
+export interface LogsPageProps extends Omit<LogsPageBaseProps, "tabs"> {
+  /** AdminAPI instance */
+  adminAPI?: AdminAPIInstance;
+  /** Policy logs adapter */
+  policyLogsAPI?: PolicyLogsAPI;
+  /** Realm name */
+  realm?: string;
+  /** Custom tabs config */
+  tabs?: LogsPageBaseProps["tabs"];
+  /** Show policy tab (default: true) */
+  showPolicyTab?: boolean;
+  /** Help text below description */
+  helpText?: LogsPageBaseProps["helpText"];
+}
+
+// Warning banner for localStorage
+function LocalStorageWarning() {
+  return (
+    <div
+      style={{
+        backgroundColor: "#fef3c7",
+        border: "1px solid #f59e0b",
+        borderRadius: "0.375rem",
+        padding: "0.75rem 1rem",
+        marginBottom: "1rem",
+        display: "flex",
+        alignItems: "flex-start",
+        gap: "0.5rem",
+      }}
+    >
+      <span style={{ fontSize: "1rem" }}>⚠️</span>
+      <div style={{ fontSize: "0.875rem", color: "#92400e" }}>
+        <strong>Development Mode:</strong> Policy logs are stored in browser localStorage and will not persist across
+        devices or browsers. For production, implement your own{" "}
+        <code style={{ backgroundColor: "#fde68a", padding: "0 0.25rem", borderRadius: "0.25rem" }}>PolicyLogsAPI</code>{" "}
+        with a backend database.
+      </div>
+    </div>
+  );
+}
+
+export function LogsPage({
+  adminAPI: adminAPIProp,
+  policyLogsAPI: policyLogsAPIProp,
+  realm,
+  tabs: tabsProp,
+  showPolicyTab = true,
+  helpText: helpTextProp,
+  ...props
+}: LogsPageProps) {
+  // Use localStorage by default for policy logs (like RolesPage pattern)
+  const policyLogsAPI = policyLogsAPIProp ?? createLocalStoragePolicyLogsAPI();
+  const isPolicyLocalStorage = policyLogsAPI._isLocalStorage === true;
+
+  // Use provided AdminAPI instance or fall back to default singleton
+  const api = (adminAPIProp || DefaultAdminAPI) as AdminAPIInstance;
+
+  // Set realm if provided
+  if (realm && api.setRealm) {
+    api.setRealm(realm);
+  }
+
+  const defaultTabs: LogsPageBaseProps["tabs"] = {
+    access: {
+      key: "access",
+      label: "Access Logs",
+      icon: <User style={{ height: "1rem", width: "1rem" }} />,
+      fetchData: async (limit, offset) => {
+        const events = await api.getAccessLogs({ first: offset, max: limit });
+        return (events || []) as AccessLogItem[];
+      },
+      columns: [
+        createLogTimestampColumn<AccessLogItem>({ field: "time" }),
+        {
+          key: "type",
+          header: "Event",
+          cell: (item) => <span style={{ fontSize: "0.875rem" }}>{item.type}</span>,
+        },
+        {
+          key: "username",
+          header: "Username",
+          cell: (item) => (
+            <span style={{ fontSize: "0.875rem" }}>{item.details?.username || "-"}</span>
+          ),
+        },
+        {
+          key: "ip",
+          header: "IP Address",
+          responsive: "md" as const,
+          cell: (item) => (
+            <span style={{ fontSize: "0.875rem", fontFamily: "monospace" }}>
+              {item.ipAddress || "-"}
+            </span>
+          ),
+        },
+      ],
+      emptyState: {
+        icon: <User style={{ height: "3rem", width: "3rem", color: "#6b7280" }} />,
+        title: "No access logs found",
+        description: "User events will appear here.",
+      },
+      queryKeys: ["access-logs"],
+    },
+  };
+
+  // Add policy tab (shown by default, can be hidden with showPolicyTab={false})
+  if (showPolicyTab) {
+    defaultTabs.policies = {
+      key: "policies",
+      label: "Policy Logs",
+      icon: <Shield style={{ height: "1rem", width: "1rem" }} />,
+      fetchData: async (limit, offset) => {
+        try {
+          const logs = await policyLogsAPI.getPolicyLogs({ first: offset, max: limit });
+          return (logs || []) as PolicyLogItem[];
+        } catch {
+          return [];
+        }
+      },
+      columns: [
+        createLogTimestampColumn<PolicyLogItem>({ field: "createdAt" }),
+        createActionColumn<PolicyLogItem>(),
+        {
+          key: "role",
+          header: "Role",
+          cell: (item) => (
+            <span style={{ fontSize: "0.875rem", fontFamily: "monospace" }}>
+              {item.roleId || "N/A"}
+            </span>
+          ),
+        },
+        {
+          key: "performedBy",
+          header: "Performed By",
+          responsive: "md" as const,
+          cell: (item) => (
+            <span style={{ fontSize: "0.875rem" }}>
+              {item.performedByEmail || item.performedBy || "-"}
+            </span>
+          ),
+        },
+        createLogProgressColumn<PolicyLogItem>(),
+        {
+          key: "status",
+          header: "Status",
+          cell: (item) => {
+            if (!item.policyStatus) {
+              return <span style={{ color: "#6b7280", fontSize: "0.875rem" }}>-</span>;
+            }
+            return <StatusBadge status={item.policyStatus} />;
+          },
+        },
+      ],
+      emptyState: {
+        icon: <Shield style={{ height: "3rem", width: "3rem", color: "#6b7280" }} />,
+        title: "No policy logs found",
+        description: "Policy activity will appear here.",
+      },
+      queryKeys: ["policy-logs"],
+    };
+  }
+
+  // Show localStorage warning if using localStorage API
+  const helpText = isPolicyLocalStorage ? (
+    <>
+      <LocalStorageWarning />
+      {helpTextProp}
+    </>
+  ) : (
+    helpTextProp
+  );
+
+  return <LogsPageBase tabs={tabsProp || defaultTabs} helpText={helpText} {...props} />;
+}