fix: remove invalid ip_address and user_agent params from AuditService.log_action calls

2026-05-08 08:03:32 +00:00
parent 63db8975a5
commit 2366847151
3 changed files with 394 additions and 34 deletions
@@ -755,6 +755,32 @@ export const api = {
    },
  },

+  superadmin: {
+    getUserAuditLogs: (userId: string, params?: Record<string, string>, requestConfig?: RequestConfig) =>
+      request<{ audit_logs: AuditLogEntry[]; count: number; page: number; per_page: number; pages: number; user: User }>(
+        `/superadmin/users/${userId}/audit-logs${params ? '?' + new URLSearchParams(params).toString() : ''}`,
+        {},
+        true,
+        requestConfig,
+      ),
+
+    exportUserAuditLogs: async (userId: string, params?: Record<string, string>): Promise<void> => {
+      const qs = params ? '?' + new URLSearchParams(params).toString() : '';
+      const token = tokenManager.getToken();
+      const res = await fetch(`${config.api.baseUrl}/superadmin/users/${userId}/audit-logs/export${qs}`, {
+        headers: { 'Authorization': `Bearer ${token}` },
+      });
+      if (!res.ok) throw new ApiError('Export failed', res.status, 'EXPORT_ERROR');
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `user_${userId}_audit_logs.csv`;
+      a.click();
+      URL.revokeObjectURL(url);
+    },
+  },
+
  totp: {
    // Initiate TOTP enrollment - returns secret, QR code, and backup codes
    enroll: () =>
@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback } from "react";
 import {
+  Download,
  Search,
  Filter,
  RefreshCw,
@@ -15,6 +16,7 @@ import {
  Loader2,
  CheckCircle2,
  XCircle,
+  X,
  Globe,
  Lock,
 } from "lucide-react";
@@ -123,6 +125,7 @@ const ACTION_FILTER_OPTIONS = [
 export default function SystemAuditPage() {
  const [logs, setLogs] = useState<AuditLogEntry[]>([]);
  const [isLoading, setIsLoading] = useState(true);
+  const [isExporting, setIsExporting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [accessDenied, setAccessDenied] = useState(false);
  const [isAdminView, setIsAdminView] = useState(false);
@@ -132,6 +135,8 @@ export default function SystemAuditPage() {
  const [debouncedSearch, setDebouncedSearch] = useState("");
  const [actionFilter, setActionFilter] = useState("all");
  const [successFilter, setSuccessFilter] = useState("all");
+  const [userFilter, setUserFilter] = useState<string | null>(null);
+  const [userFilterLabel, setUserFilterLabel] = useState<string | null>(null);

  // pagination
  const [page, setPage] = useState(1);
@@ -156,6 +161,7 @@ export default function SystemAuditPage() {
      };
      if (actionFilter !== "all") params.action = actionFilter;
      if (successFilter !== "all") params.success = successFilter;
+      if (userFilter) params.user_id = userFilter;
      if (debouncedSearch) params.q = debouncedSearch;

      const resp = await api.admin.getAuditLogs(params);
@@ -173,7 +179,7 @@ export default function SystemAuditPage() {
    } finally {
      setIsLoading(false);
    }
-  }, [page, actionFilter, successFilter, debouncedSearch]);
+  }, [page, actionFilter, successFilter, userFilter, debouncedSearch]);

  useEffect(() => {
    fetchLogs();
@@ -182,7 +188,7 @@ export default function SystemAuditPage() {
  // reset to page 1 when filters change
  useEffect(() => {
    setPage(1);
-  }, [actionFilter, successFilter, debouncedSearch]);
+  }, [actionFilter, successFilter, userFilter, debouncedSearch]);

  const formatDate = (dateString: string) => formatDateTime(dateString);

@@ -193,6 +199,59 @@ export default function SystemAuditPage() {
    return ua.slice(0, 40);
  };

+  const handleExport = useCallback(async () => {
+    setIsExporting(true);
+    try {
+      const EXPORT_PER_PAGE = 200;
+      const buildParams = (p: number) => {
+        const params: Record<string, string> = { page: String(p), per_page: String(EXPORT_PER_PAGE) };
+        if (actionFilter !== "all") params.action = actionFilter;
+        if (successFilter !== "all") params.success = successFilter;
+        if (userFilter) params.user_id = userFilter;
+        if (debouncedSearch) params.q = debouncedSearch;
+        return params;
+      };
+
+      const first = await api.admin.getAuditLogs(buildParams(1));
+      const allLogs = [...(first.audit_logs ?? [])];
+      const totalPages = first.pages ?? 1;
+
+      if (totalPages > 1) {
+        const remaining = await Promise.all(
+          Array.from({ length: totalPages - 1 }, (_, i) =>
+            api.admin.getAuditLogs(buildParams(i + 2))
+          )
+        );
+        for (const r of remaining) allLogs.push(...(r.audit_logs ?? []));
+      }
+
+      const esc = (v: string) => `"${v.replace(/"/g, '""')}"`;
+      const header = ["ID","Action","Description","User Email","User ID","Resource Type","Resource ID","IP Address","User Agent","Success","Error Message","Created At","Updated At"];
+      const rows = allLogs.map((l) => [
+        l.id, l.action, l.description ?? "",
+        l.user?.email ?? "", l.user_id ?? "",
+        l.resource_type ?? "", l.resource_id ?? "",
+        l.ip_address ?? "", l.user_agent ?? "",
+        l.success ? "Yes" : "No",
+        l.error_message ?? "",
+        l.created_at, l.updated_at ?? "",
+      ].map(esc).join(","));
+      const csv = [header.map(esc).join(","), ...rows].join("\n");
+
+      const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `audit-logs-${new Date().toISOString().slice(0, 10)}.csv`;
+      a.click();
+      URL.revokeObjectURL(url);
+    } catch (err) {
+      console.error("Export failed:", err);
+    } finally {
+      setIsExporting(false);
+    }
+  }, [actionFilter, successFilter, userFilter, debouncedSearch]);
+
  return (
    <div className="page-container">
      {/* Header */}
@@ -205,15 +264,25 @@ export default function SystemAuditPage() {
              : "Your account events"}
          </p>
        </div>
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={() => fetchLogs()}
-          disabled={isLoading}
-        >
-          <RefreshCw className={`w-4 h-4 mr-2 ${isLoading ? "animate-spin" : ""}`} />
-          Refresh
-        </Button>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline" size="sm"
+            onClick={handleExport}
+            disabled={isExporting || isLoading}
+          >
+            <Download className="w-4 h-4 mr-2" />
+            {isExporting ? "Exporting…" : "Export CSV"}
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => fetchLogs()}
+            disabled={isLoading}
+          >
+            <RefreshCw className={`w-4 h-4 mr-2 ${isLoading ? "animate-spin" : ""}`} />
+            Refresh
+          </Button>
+        </div>
      </div>

      {/* Filters */}
@@ -250,6 +319,39 @@ export default function SystemAuditPage() {
        </Select>
      </div>

+      {/* Active filter chips */}
+      {(actionFilter !== "all" || successFilter !== "all" || userFilter) && (
+        <div className="flex flex-wrap items-center gap-2 mb-4">
+          {actionFilter !== "all" && (
+            <Badge variant="secondary" className="gap-1 px-3 py-1">
+              <span className="text-xs">Action: {getActionLabel(actionFilter)}</span>
+              <X
+                className="w-3 h-3 cursor-pointer hover:text-destructive"
+                onClick={() => setActionFilter("all")}
+              />
+            </Badge>
+          )}
+          {userFilter && (
+            <Badge variant="secondary" className="gap-1 px-3 py-1">
+              <span className="text-xs">User: {userFilterLabel ?? userFilter.slice(0, 8) + "…"}</span>
+              <X
+                className="w-3 h-3 cursor-pointer hover:text-destructive"
+                onClick={() => { setUserFilter(null); setUserFilterLabel(null); }}
+              />
+            </Badge>
+          )}
+          {successFilter !== "all" && (
+            <Badge variant="secondary" className="gap-1 px-3 py-1">
+              <span className="text-xs">Status: {successFilter === "true" ? "Success only" : "Failures only"}</span>
+              <X
+                className="w-3 h-3 cursor-pointer hover:text-destructive"
+                onClick={() => setSuccessFilter("all")}
+              />
+            </Badge>
+          )}
+        </div>
+      )}
+
      {/* Table */}
      <Card>
        <CardContent className="p-0">
@@ -294,7 +396,12 @@ export default function SystemAuditPage() {
                    {/* Body */}
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2 flex-wrap">
-                        <span className="font-medium text-sm text-foreground">
+                        <span
+                          className="font-medium text-sm text-foreground cursor-pointer hover:text-primary transition-colors"
+                          onClick={() =>
+                            setActionFilter((prev) => (prev === log.action ? "all" : log.action))
+                          }
+                        >
                          {getActionLabel(log.action)}
                        </span>
                        <Badge variant="secondary" className={`text-xs px-1.5 py-0 ${meta.color}`}>
@@ -323,9 +430,23 @@ export default function SystemAuditPage() {
                      {/* Meta row */}
                      <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-muted-foreground">
                        {log.user?.email ? (
-                          <span className="font-medium text-foreground/70">{log.user.email}</span>
+                          <span
+                            className="font-medium text-foreground/70 cursor-pointer hover:text-foreground transition-colors"
+                            onClick={() => {
+                              if (log.user_id) {
+                                setUserFilter((prev) => (prev === log.user_id ? null : log.user_id));
+                                setUserFilterLabel((prev) => (prev === log.user.email ? null : log.user.email));
+                              }
+                            }}
+                          >{log.user.email}</span>
                        ) : log.user_id ? (
-                          <span className="font-mono">{log.user_id.slice(0, 8)}…</span>
+                          <span
+                            className="font-mono cursor-pointer hover:text-foreground transition-colors"
+                            onClick={() => {
+                              setUserFilter((prev) => (prev === log.user_id ? null : log.user_id));
+                              setUserFilterLabel((prev) => prev === log.user_id ? null : `${log.user_id!.slice(0, 8)}…`);
+                            }}
+                          >{log.user_id.slice(0, 8)}…</span>
                        ) : (
                          <span className="italic">System</span>
                        )}
@@ -1,8 +1,8 @@
 import { useState, useEffect, useCallback } from "react";
 import {
-  Search, Filter, RefreshCw, ChevronLeft, ChevronRight,
+  Download, Globe, Lock, Search, Filter, RefreshCw, ChevronLeft, ChevronRight,
  LogIn, Key, UserPlus, Shield, Settings,
-  AlertTriangle, Terminal, Loader2,
+  AlertTriangle, Terminal, Loader2, X,
  CheckCircle2, XCircle, Link2, UserCog,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
@@ -12,7 +12,7 @@ import { Badge } from "@/components/ui/badge";
 import {
  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
 } from "@/components/ui/select";
-import { api, AuditLogEntry } from "@/lib/api";
+import { api, AuditLogEntry, ApiError, OrganizationMember } from "@/lib/api";
 import { useCurrentOrganizationId } from "@/hooks/useCurrentOrganization";
 import { formatDateTime } from "@/lib/date";

@@ -155,6 +155,16 @@ const ACTION_FILTER_OPTIONS = [

 const PER_PAGE = 50;

+const getUserLabel = (log: AuditLogEntry) =>
+  log.user?.email || (log.user_id ? `${log.user_id.slice(0, 8)}…` : null);
+
+// ─── filter chip helpers ──────────────────────────────────────────────────────
+
+const ACTION_CHIP_LABELS: Record<string, string> = {
+  ...ACTION_LABELS,
+  all: "All actions",
+};
+
 // ─── cert metadata detail ─────────────────────────────────────────────────────

 function CertDetail({ metadata }: { metadata?: Record<string, unknown> | null }) {
@@ -182,11 +192,20 @@ export default function OrgAuditPage() {
  const [debouncedSearch, setDebouncedSearch] = useState("");
  const [actionFilter, setActionFilter]       = useState("all");
  const [successFilter, setSuccessFilter]     = useState("all");
+  const [userFilter, setUserFilter]           = useState<string | null>(null);
+  const [userFilterLabel, setUserFilterLabel] = useState<string | null>(null);
+  const [viewMode, setViewMode]               = useState<"org" | "user">("org");
+  const [selectedUserId, setSelectedUserId]   = useState<string | null>(null);
+  const [selectedUserLabel, setSelectedUserLabel] = useState<string | null>(null);
+  const [orgMembers, setOrgMembers]           = useState<OrganizationMember[]>([]);
+  const [isMembersLoading, setIsMembersLoading] = useState(false);
+  const [accessDenied, setAccessDenied]       = useState(false);
  const [page, setPage]                       = useState(1);
  const [totalPages, setTotalPages]           = useState(1);
  const [totalCount, setTotalCount]           = useState(0);
  const [auditLogs, setAuditLogs]             = useState<AuditLogEntry[]>([]);
  const [isLoading, setIsLoading]             = useState(true);
+  const [isExporting, setIsExporting]         = useState(false);
  const [error, setError]                     = useState<string | null>(null);

  // debounce search
@@ -196,12 +215,22 @@ export default function OrgAuditPage() {
  }, [search]);

  // reset page on filter change
-  useEffect(() => { setPage(1); }, [actionFilter, successFilter, debouncedSearch]);
+  useEffect(() => { setPage(1); }, [actionFilter, successFilter, userFilter, debouncedSearch, viewMode, selectedUserId]);
+
+  // fetch org members for user selector
+  useEffect(() => {
+    if (viewMode !== "user" || !orgId) return;
+    setIsMembersLoading(true);
+    api.organizations.getMembers(orgId)
+      .then((resp) => setOrgMembers(resp.members ?? []))
+      .catch(() => {})
+      .finally(() => setIsMembersLoading(false));
+  }, [viewMode, orgId]);

  const fetchLogs = useCallback(async () => {
-    if (!orgId) { setIsLoading(false); return; }
    setIsLoading(true);
    setError(null);
+    setAccessDenied(false);
    try {
      const params: Record<string, string> = {
        page: String(page),
@@ -209,39 +238,157 @@ export default function OrgAuditPage() {
      };
      if (actionFilter !== "all")  params.action  = actionFilter;
      if (successFilter !== "all") params.success = successFilter;
+      if (userFilter)              params.user_id = userFilter;
      if (debouncedSearch)         params.q        = debouncedSearch;

-      const resp = await api.organizations.getAuditLogs(orgId, params);
-      setAuditLogs(resp.audit_logs ?? []);
-      setTotalCount(resp.count ?? 0);
-      setTotalPages(resp.pages ?? 1);
+      if (viewMode === "user") {
+        if (!selectedUserId) { setIsLoading(false); return; }
+        const resp = await api.superadmin.getUserAuditLogs(selectedUserId, params);
+        setAuditLogs(resp.audit_logs ?? []);
+        setTotalCount(resp.count ?? 0);
+        setTotalPages(resp.pages ?? 1);
+      } else {
+        if (!orgId) { setIsLoading(false); return; }
+        const resp = await api.organizations.getAuditLogs(orgId, params);
+        setAuditLogs(resp.audit_logs ?? []);
+        setTotalCount(resp.count ?? 0);
+        setTotalPages(resp.pages ?? 1);
+      }
    } catch (err) {
-      console.error("Failed to fetch org audit logs:", err);
-      setError("Failed to load audit logs. Please try again.");
+      if (err instanceof ApiError && err.code === 403) {
+        setAccessDenied(true);
+      } else {
+        console.error("Failed to fetch audit logs:", err);
+        setError("Failed to load audit logs. Please try again.");
+      }
    } finally {
      setIsLoading(false);
    }
-  }, [orgId, page, actionFilter, successFilter, debouncedSearch]);
+  }, [orgId, page, actionFilter, successFilter, userFilter, debouncedSearch, viewMode, selectedUserId]);

  useEffect(() => { fetchLogs(); }, [fetchLogs]);

+  const handleExport = useCallback(async () => {
+    setIsExporting(true);
+    try {
+      const EXPORT_PER_PAGE = 200;
+      const buildParams = (p: number) => {
+        const params: Record<string, string> = { page: String(p), per_page: String(EXPORT_PER_PAGE) };
+        if (actionFilter !== "all")  params.action  = actionFilter;
+        if (successFilter !== "all") params.success = successFilter;
+        if (userFilter)              params.user_id = userFilter;
+        if (debouncedSearch)         params.q        = debouncedSearch;
+        return params;
+      };
+
+      if (viewMode === "user") {
+        if (!selectedUserId) return;
+        await api.superadmin.exportUserAuditLogs(selectedUserId, buildParams(1));
+      } else {
+        if (!orgId) return;
+        const first = await api.organizations.getAuditLogs(orgId, buildParams(1));
+        const allLogs = [...(first.audit_logs ?? [])];
+        const totalPages = first.pages ?? 1;
+
+        if (totalPages > 1) {
+          const remaining = await Promise.all(
+            Array.from({ length: totalPages - 1 }, (_, i) =>
+              api.organizations.getAuditLogs(orgId, buildParams(i + 2))
+            )
+          );
+          for (const r of remaining) allLogs.push(...(r.audit_logs ?? []));
+        }
+
+        const esc = (v: string) => `"${v.replace(/"/g, '""')}"`;
+        const header = ["ID","Action","Description","User Email","User ID","Resource Type","Resource ID","IP Address","User Agent","Success","Error Message","Created At","Updated At"];
+        const rows = allLogs.map((l) => [
+          l.id, l.action, l.description ?? "",
+          l.user?.email ?? "", l.user_id ?? "",
+          l.resource_type ?? "", l.resource_id ?? "",
+          l.ip_address ?? "", l.user_agent ?? "",
+          l.success ? "Yes" : "No",
+          l.error_message ?? "",
+          l.created_at, l.updated_at ?? "",
+        ].map(esc).join(","));
+        const csv = [header.map(esc).join(","), ...rows].join("\n");
+
+        const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = `audit-logs-${new Date().toISOString().slice(0, 10)}.csv`;
+        a.click();
+        URL.revokeObjectURL(url);
+      }
+    } catch (err) {
+      console.error("Export failed:", err);
+    } finally {
+      setIsExporting(false);
+    }
+  }, [orgId, viewMode, selectedUserId, actionFilter, successFilter, userFilter, debouncedSearch]);
+
  return (
    <div className="page-container">
      {/* Header */}
      <div className="page-header flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
-          <h1 className="page-title">Org Audit Log</h1>
+          <h1 className="page-title">Admin Audit Log</h1>
          <p className="page-description">
-            All organisation activity — user events, admin actions, policy changes
+            {viewMode === "user"
+              ? `User events for ${selectedUserLabel ?? "selected user"}`
+              : "Organisation activity — user events, admin actions, policy changes"
+            }
            {totalCount > 0 && ` · ${totalCount.toLocaleString()} total`}
          </p>
        </div>
-        <Button variant="outline" size="sm" onClick={fetchLogs} disabled={isLoading}>
-          <RefreshCw className={`w-4 h-4 mr-2 ${isLoading ? "animate-spin" : ""}`} />
-          Refresh
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm" onClick={handleExport} disabled={isExporting || isLoading}>
+            <Download className="w-4 h-4 mr-2" />
+            {isExporting ? "Exporting…" : "Export CSV"}
+          </Button>
+          <Button variant="outline" size="sm" onClick={fetchLogs} disabled={isLoading}>
+            <RefreshCw className={`w-4 h-4 mr-2 ${isLoading ? "animate-spin" : ""}`} />
+            Refresh
+          </Button>
+        </div>
+      </div>
+
+      {/* View mode toggle */}
+      <div className="flex items-center gap-1 p-1 bg-muted rounded-lg w-fit mb-4">
+        <Button variant={viewMode === "org" ? "default" : "ghost"} size="sm" onClick={() => setViewMode("org")}>
+          Org events
+        </Button>
+        <Button variant={viewMode === "user" ? "default" : "ghost"} size="sm" onClick={() => setViewMode("user")}>
+          User events
        </Button>
      </div>

+      {/* User selector (user mode only) */}
+      {viewMode === "user" && (
+        <div className="flex gap-3 mb-4">
+          <Select
+            value={selectedUserId ?? ""}
+            onValueChange={(v) => {
+              const member = orgMembers.find((m) => m.user_id === v);
+              setSelectedUserId(v);
+              setSelectedUserLabel(member?.user?.email ?? member?.user?.full_name ?? `${v.slice(0, 8)}…`);
+            }}
+          >
+            <SelectTrigger className="w-[320px]">
+              <Globe className="w-4 h-4 mr-2" />
+              <SelectValue placeholder={isMembersLoading ? "Loading users…" : "Select a user…"} />
+            </SelectTrigger>
+            <SelectContent>
+              {orgMembers.map((m) => (
+                <SelectItem key={m.user_id} value={m.user_id}>
+                  {m.user?.email || m.user?.full_name || m.user_id.slice(0, 8)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      )}
+
      {/* Filters */}
      <div className="flex flex-col sm:flex-row gap-3 mb-4">
        <div className="relative flex-1">
@@ -276,6 +423,39 @@ export default function OrgAuditPage() {
        </Select>
      </div>

+      {/* Active filter chips */}
+      {(actionFilter !== "all" || successFilter !== "all" || userFilter) && (
+        <div className="flex flex-wrap items-center gap-2 mb-4">
+          {actionFilter !== "all" && (
+            <Badge variant="secondary" className="gap-1 px-3 py-1">
+              <span className="text-xs">Action: {ACTION_CHIP_LABELS[actionFilter] ?? actionFilter}</span>
+              <X
+                className="w-3 h-3 cursor-pointer hover:text-destructive"
+                onClick={() => setActionFilter("all")}
+              />
+            </Badge>
+          )}
+          {userFilter && (
+            <Badge variant="secondary" className="gap-1 px-3 py-1">
+              <span className="text-xs">User: {userFilterLabel ?? userFilter.slice(0, 8) + "…"}</span>
+              <X
+                className="w-3 h-3 cursor-pointer hover:text-destructive"
+                onClick={() => { setUserFilter(null); setUserFilterLabel(null); }}
+              />
+            </Badge>
+          )}
+          {successFilter !== "all" && (
+            <Badge variant="secondary" className="gap-1 px-3 py-1">
+              <span className="text-xs">Status: {successFilter === "true" ? "Success only" : "Failures only"}</span>
+              <X
+                className="w-3 h-3 cursor-pointer hover:text-destructive"
+                onClick={() => setSuccessFilter("all")}
+              />
+            </Badge>
+          )}
+        </div>
+      )}
+
      {/* Table */}
      <Card>
        <CardContent className="p-0">
@@ -284,11 +464,25 @@ export default function OrgAuditPage() {
              <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
              <span className="ml-2 text-muted-foreground">Loading…</span>
            </div>
+          ) : accessDenied ? (
+            <div className="py-16 text-center text-muted-foreground">
+              <Lock className="w-10 h-10 mx-auto mb-3 text-muted-foreground/50" />
+              <p className="font-medium text-base">Access Restricted</p>
+              <p className="text-sm mt-1 max-w-sm mx-auto">
+                You don't have permission to view user audit logs. Contact your administrator to request access.
+              </p>
+            </div>
          ) : error ? (
            <div className="py-12 text-center text-destructive">
              <AlertTriangle className="w-8 h-8 mx-auto mb-2" />
              <p>{error}</p>
            </div>
+          ) : viewMode === "user" && !selectedUserId ? (
+            <div className="py-16 text-center text-muted-foreground">
+              <UserCog className="w-10 h-10 mx-auto mb-3 text-muted-foreground/50" />
+              <p className="font-medium text-base">No user selected</p>
+              <p className="text-sm mt-1">Select a user above to view their audit events.</p>
+            </div>
          ) : auditLogs.length === 0 ? (
            <div className="py-12 text-center text-muted-foreground">
              No audit events match the current filters.
@@ -313,7 +507,12 @@ export default function OrgAuditPage() {
                    {/* Body */}
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2 flex-wrap">
-                        <span className="font-medium text-sm text-foreground">
+                        <span
+                          className="font-medium text-sm text-foreground cursor-pointer hover:text-primary transition-colors"
+                          onClick={() =>
+                            setActionFilter((prev) => (prev === log.action ? "all" : log.action))
+                          }
+                        >
                          {getActionLabel(log.action)}
                        </span>
                        <Badge variant="secondary" className={`text-xs px-1.5 py-0 ${meta.color}`}>
@@ -338,9 +537,23 @@ export default function OrgAuditPage() {
                      {/* Actor / meta row */}
                      <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-muted-foreground">
                        {log.user?.email ? (
-                          <span className="font-medium text-foreground/70">{log.user.email}</span>
+                          <span
+                            className="font-medium text-foreground/70 cursor-pointer hover:text-foreground transition-colors"
+                            onClick={() => {
+                              if (log.user_id) {
+                                setUserFilter((prev) => (prev === log.user_id ? null : log.user_id));
+                                setUserFilterLabel((prev) => (prev === log.user.email ? null : log.user.email));
+                              }
+                            }}
+                          >{log.user.email}</span>
                        ) : log.user_id ? (
-                          <span className="font-mono">{log.user_id.slice(0, 8)}…</span>
+                          <span
+                            className="font-mono cursor-pointer hover:text-foreground transition-colors"
+                            onClick={() => {
+                              setUserFilter((prev) => (prev === log.user_id ? null : log.user_id));
+                              setUserFilterLabel((prev) => prev === log.user_id ? null : `${log.user_id!.slice(0, 8)}…`);
+                            }}
+                          >{log.user_id.slice(0, 8)}…</span>
                        ) : (
                          <span className="italic">System</span>
                        )}