Fix: Verbose Syslog
Special email configured at backend to access these page via .env
This commit is contained in:
+333
-134
@@ -1,204 +1,403 @@
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { Search, Filter, Download, User, Settings, Key, UserPlus, AlertTriangle, Loader2 } from "lucide-react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import {
|
||||
Search, Filter, RefreshCw, ChevronLeft, ChevronRight,
|
||||
LogIn, Key, UserPlus, Shield, Settings,
|
||||
AlertTriangle, Terminal, Loader2,
|
||||
CheckCircle2, XCircle, Link2, UserCog,
|
||||
} from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import {
|
||||
Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { api, AuditLogEntry } from "@/lib/api";
|
||||
import { useCurrentOrganizationId } from "@/hooks/useCurrentOrganization";
|
||||
import { formatDateTime } from "@/lib/date";
|
||||
|
||||
const getEventIcon = (action: string) => {
|
||||
if (action.includes("member") || action.includes("MEMBER")) {
|
||||
return <UserPlus className="w-4 h-4" />;
|
||||
}
|
||||
if (action.includes("policy") || action.includes("POLICY") || action.includes("mfa")) {
|
||||
return <Settings className="w-4 h-4" />;
|
||||
}
|
||||
if (action.includes("delete") || action.includes("DELETE") || action.includes("disable")) {
|
||||
return <AlertTriangle className="w-4 h-4" />;
|
||||
}
|
||||
if (action.includes("client") || action.includes("oidc") || action.includes("key")) {
|
||||
return <Key className="w-4 h-4" />;
|
||||
}
|
||||
return <User className="w-4 h-4" />;
|
||||
};
|
||||
// ─── category / display helpers ──────────────────────────────────────────────
|
||||
|
||||
const getEventTitle = (action: string) => {
|
||||
const parts = action.split(".");
|
||||
return parts.map(p => p.charAt(0).toUpperCase() + p.slice(1)).join(" ");
|
||||
};
|
||||
type Category = "auth" | "ssh" | "admin" | "member" | "policy" | "security" | "oauth" | "other";
|
||||
|
||||
const getActionCategory = (action: string): string => {
|
||||
if (action.includes("member") || action.includes("MEMBER")) return "members";
|
||||
if (action.includes("policy") || action.includes("POLICY") || action.includes("mfa")) return "policies";
|
||||
if (action.includes("client") || action.includes("OIDC")) return "clients";
|
||||
const getCategory = (action: string): Category => {
|
||||
const a = action.toLowerCase();
|
||||
if (a.startsWith("session") || a === "user.login" || a === "user.logout") return "auth";
|
||||
if (a.startsWith("ssh")) return "ssh";
|
||||
if (a.startsWith("admin.")) return "admin";
|
||||
if (a.includes("member") || a.includes("invite") || a.startsWith("org.member")) return "member";
|
||||
if (a.includes("policy") || a.includes("mfa.policy") || a.startsWith("org.security")) return "policy";
|
||||
if (a.includes("mfa") || a.includes("totp") || a.includes("webauthn") || a.includes("passkey") || a.includes("password")) return "security";
|
||||
if (a.startsWith("external_auth")) return "oauth";
|
||||
return "other";
|
||||
};
|
||||
|
||||
const CATEGORY_META: Record<Category, { label: string; color: string }> = {
|
||||
auth: { label: "Auth", color: "bg-blue-500/10 text-blue-600 dark:text-blue-400" },
|
||||
ssh: { label: "SSH", color: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400" },
|
||||
admin: { label: "Admin", color: "bg-red-500/10 text-red-600 dark:text-red-400" },
|
||||
member: { label: "Member", color: "bg-violet-500/10 text-violet-600 dark:text-violet-400" },
|
||||
policy: { label: "Policy", color: "bg-amber-500/10 text-amber-600 dark:text-amber-400" },
|
||||
security: { label: "Security", color: "bg-orange-500/10 text-orange-600 dark:text-orange-400" },
|
||||
oauth: { label: "OAuth", color: "bg-cyan-500/10 text-cyan-600 dark:text-cyan-400" },
|
||||
other: { label: "Other", color: "bg-muted text-muted-foreground" },
|
||||
};
|
||||
|
||||
const getCategoryIcon = (cat: Category) => {
|
||||
const cls = "w-4 h-4";
|
||||
switch (cat) {
|
||||
case "auth": return <LogIn className={cls} />;
|
||||
case "ssh": return <Terminal className={cls} />;
|
||||
case "admin": return <UserCog className={cls} />;
|
||||
case "member": return <UserPlus className={cls} />;
|
||||
case "policy": return <Settings className={cls} />;
|
||||
case "security": return <Shield className={cls} />;
|
||||
case "oauth": return <Link2 className={cls} />;
|
||||
default: return <Key className={cls} />;
|
||||
}
|
||||
};
|
||||
|
||||
const ACTION_LABELS: Record<string, string> = {
|
||||
// Sessions
|
||||
"session.create": "Signed in",
|
||||
"session.revoke": "Signed out",
|
||||
"user.login": "Signed in",
|
||||
"user.logout": "Signed out",
|
||||
// Members
|
||||
"org.member.add": "Member added",
|
||||
"org.member.remove": "Member removed",
|
||||
"org.member.role_change": "Member role changed",
|
||||
"org.ownership.transferred": "Ownership transferred",
|
||||
// Admin actions
|
||||
"admin.mfa.remove": "MFA removed by admin",
|
||||
"admin.oauth.unlink": "OAuth unlinked by admin",
|
||||
"admin.password.set": "Password set by admin",
|
||||
"admin.email.verify": "Email verified by admin",
|
||||
// Security / policy
|
||||
"org.security_policy.update": "Security policy updated",
|
||||
"user.security_policy.override_update":"User policy override updated",
|
||||
"mfa.policy.user_suspended": "User suspended (MFA policy)",
|
||||
"mfa.policy.user_compliant": "User MFA compliant",
|
||||
// Password
|
||||
"user.password_change": "Password changed",
|
||||
"user.password_reset": "Password reset",
|
||||
// SSH
|
||||
"ssh.key.added": "SSH key added",
|
||||
"ssh.key.verified": "SSH key verified",
|
||||
"ssh.key.deleted": "SSH key removed",
|
||||
"ssh.cert.requested": "SSH certificate requested",
|
||||
"ssh.cert.issued": "SSH certificate issued",
|
||||
"ssh.cert.failed": "SSH certificate request failed",
|
||||
"ssh.cert.revoked": "SSH certificate revoked",
|
||||
// WebAuthn / Passkey
|
||||
"webauthn.register.completed": "Passkey registered",
|
||||
"webauthn.credential.deleted": "Passkey removed",
|
||||
"webauthn.login.success": "Signed in with passkey",
|
||||
"webauthn.login.failed": "Passkey login failed",
|
||||
// TOTP
|
||||
"totp.enroll.completed": "TOTP enrolled",
|
||||
"totp.disabled": "TOTP disabled",
|
||||
"totp.verify.failed": "TOTP verification failed",
|
||||
// External auth
|
||||
"external_auth.link.completed": "OAuth account linked",
|
||||
"external_auth.unlink": "OAuth account unlinked",
|
||||
"external_auth.login": "Signed in via OAuth",
|
||||
"external_auth.login.failed": "OAuth login failed",
|
||||
// Org
|
||||
"org.create": "Organisation created",
|
||||
"org.update": "Organisation updated",
|
||||
"org.delete": "Organisation deleted",
|
||||
// User lifecycle
|
||||
"user.register": "User registered",
|
||||
"user.suspend": "User suspended",
|
||||
"user.unsuspend":"User unsuspended",
|
||||
"user.delete": "User deleted",
|
||||
};
|
||||
|
||||
const getActionLabel = (action: string) =>
|
||||
ACTION_LABELS[action] ??
|
||||
action.replace(/[._]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
|
||||
|
||||
// ─── action filter options (value = enum dot-notation) ───────────────────────
|
||||
|
||||
const ACTION_FILTER_OPTIONS = [
|
||||
{ value: "all", label: "All actions" },
|
||||
// Auth
|
||||
{ value: "session.create", label: "Sign in" },
|
||||
{ value: "session.revoke", label: "Sign out" },
|
||||
{ value: "external_auth.login", label: "OAuth login" },
|
||||
// Members
|
||||
{ value: "org.member.add", label: "Member added" },
|
||||
{ value: "org.member.remove", label: "Member removed" },
|
||||
{ value: "org.member.role_change", label: "Role changed" },
|
||||
// Admin actions
|
||||
{ value: "admin.mfa.remove", label: "MFA removed (admin)" },
|
||||
{ value: "admin.oauth.unlink", label: "OAuth unlinked (admin)" },
|
||||
{ value: "admin.password.set", label: "Password set (admin)" },
|
||||
// Security / policy
|
||||
{ value: "org.security_policy.update", label: "Security policy changed" },
|
||||
{ value: "user.password_change", label: "Password changed" },
|
||||
{ value: "user.password_reset", label: "Password reset" },
|
||||
// SSH
|
||||
{ value: "ssh.key.added", label: "SSH key added" },
|
||||
{ value: "ssh.key.verified", label: "SSH key verified" },
|
||||
{ value: "ssh.cert.issued", label: "SSH cert issued" },
|
||||
{ value: "ssh.cert.revoked", label: "SSH cert revoked" },
|
||||
// MFA
|
||||
{ value: "totp.enroll.completed", label: "TOTP enrolled" },
|
||||
{ value: "totp.disabled", label: "TOTP disabled" },
|
||||
{ value: "webauthn.register.completed", label: "Passkey registered" },
|
||||
{ value: "webauthn.credential.deleted", label: "Passkey removed" },
|
||||
// User lifecycle
|
||||
{ value: "user.register", label: "User registered" },
|
||||
{ value: "user.suspend", label: "User suspended" },
|
||||
];
|
||||
|
||||
const PER_PAGE = 50;
|
||||
|
||||
// ─── cert metadata detail ─────────────────────────────────────────────────────
|
||||
|
||||
function CertDetail({ metadata }: { metadata?: Record<string, unknown> | null }) {
|
||||
if (!metadata) return null;
|
||||
const principal = metadata.principal as string | undefined;
|
||||
const principals = metadata.principals as string[] | undefined;
|
||||
const serial = metadata.serial_number ?? metadata.serial ?? metadata.cert_serial;
|
||||
const principalList = principal ? [principal] : Array.isArray(principals) ? principals : [];
|
||||
if (!principalList.length && !serial) return null;
|
||||
return (
|
||||
<span className="text-xs text-muted-foreground ml-2">
|
||||
{principalList.length > 0 && <>principal: <span className="font-mono">{principalList.join(", ")}</span></>}
|
||||
{principalList.length > 0 && serial && " · "}
|
||||
{serial != null && <>serial: <span className="font-mono">{String(serial)}</span></>}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── component ────────────────────────────────────────────────────────────────
|
||||
|
||||
export default function OrgAuditPage() {
|
||||
const params = useParams<{ orgId?: string }>();
|
||||
const { orgId: fallbackOrgId } = useCurrentOrganizationId();
|
||||
const orgId = params.orgId || fallbackOrgId;
|
||||
const { orgId } = useCurrentOrganizationId();
|
||||
|
||||
const [search, setSearch] = useState("");
|
||||
const [typeFilter, setTypeFilter] = useState("all");
|
||||
const [auditLogs, setAuditLogs] = useState<AuditLogEntry[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [search, setSearch] = useState("");
|
||||
const [debouncedSearch, setDebouncedSearch] = useState("");
|
||||
const [actionFilter, setActionFilter] = useState("all");
|
||||
const [successFilter, setSuccessFilter] = useState("all");
|
||||
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 [error, setError] = useState<string | null>(null);
|
||||
|
||||
const fetchAuditLogs = useCallback(async (currentOrgId: string) => {
|
||||
// debounce search
|
||||
useEffect(() => {
|
||||
const t = setTimeout(() => setDebouncedSearch(search), 400);
|
||||
return () => clearTimeout(t);
|
||||
}, [search]);
|
||||
|
||||
// reset page on filter change
|
||||
useEffect(() => { setPage(1); }, [actionFilter, successFilter, debouncedSearch]);
|
||||
|
||||
const fetchLogs = useCallback(async () => {
|
||||
if (!orgId) { setIsLoading(false); return; }
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
const response = await api.organizations.getAuditLogs(currentOrgId);
|
||||
setAuditLogs(response.audit_logs || []);
|
||||
const params: Record<string, string> = {
|
||||
page: String(page),
|
||||
per_page: String(PER_PAGE),
|
||||
};
|
||||
if (actionFilter !== "all") params.action = actionFilter;
|
||||
if (successFilter !== "all") params.success = successFilter;
|
||||
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);
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch audit logs:", err);
|
||||
console.error("Failed to fetch org audit logs:", err);
|
||||
setError("Failed to load audit logs. Please try again.");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, []);
|
||||
}, [orgId, page, actionFilter, successFilter, debouncedSearch]);
|
||||
|
||||
useEffect(() => {
|
||||
setError(null);
|
||||
setAuditLogs([]);
|
||||
if (!orgId) {
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
fetchAuditLogs(orgId);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [orgId]);
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
return new Intl.DateTimeFormat("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
}).format(date);
|
||||
};
|
||||
|
||||
const filteredLogs = auditLogs.filter((log) => {
|
||||
const matchesSearch =
|
||||
search === "" ||
|
||||
log.description?.toLowerCase().includes(search.toLowerCase()) ||
|
||||
log.action.toLowerCase().includes(search.toLowerCase()) ||
|
||||
log.user?.email.toLowerCase().includes(search.toLowerCase());
|
||||
|
||||
const matchesFilter =
|
||||
typeFilter === "all" ||
|
||||
getActionCategory(log.action) === typeFilter;
|
||||
|
||||
return matchesSearch && matchesFilter;
|
||||
});
|
||||
useEffect(() => { fetchLogs(); }, [fetchLogs]);
|
||||
|
||||
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">Audit Log</h1>
|
||||
<h1 className="page-title">Org Audit Log</h1>
|
||||
<p className="page-description">
|
||||
View all administrative actions and changes
|
||||
All organisation activity — user events, admin actions, policy changes
|
||||
{totalCount > 0 && ` · ${totalCount.toLocaleString()} total`}
|
||||
</p>
|
||||
</div>
|
||||
<Button variant="outline">
|
||||
<Download className="w-4 h-4 mr-2" />
|
||||
Export
|
||||
<Button variant="outline" size="sm" onClick={fetchLogs} disabled={isLoading}>
|
||||
<RefreshCw className={`w-4 h-4 mr-2 ${isLoading ? "animate-spin" : ""}`} />
|
||||
Refresh
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 mb-4">
|
||||
{/* Filters */}
|
||||
<div className="flex flex-col sm:flex-row gap-3 mb-4">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search events..."
|
||||
placeholder="Search descriptions…"
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
<Select value={typeFilter} onValueChange={setTypeFilter}>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<Select value={actionFilter} onValueChange={setActionFilter}>
|
||||
<SelectTrigger className="w-[210px]">
|
||||
<Filter className="w-4 h-4 mr-2" />
|
||||
<SelectValue placeholder="Filter by type" />
|
||||
<SelectValue placeholder="Filter by action" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All events</SelectItem>
|
||||
<SelectItem value="members">Member changes</SelectItem>
|
||||
<SelectItem value="policies">Policy changes</SelectItem>
|
||||
<SelectItem value="clients">OIDC clients</SelectItem>
|
||||
{ACTION_FILTER_OPTIONS.map((o) => (
|
||||
<SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select value={successFilter} onValueChange={setSuccessFilter}>
|
||||
<SelectTrigger className="w-[150px]">
|
||||
<SelectValue placeholder="Status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All statuses</SelectItem>
|
||||
<SelectItem value="true">Success only</SelectItem>
|
||||
<SelectItem value="false">Failures only</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center p-8">
|
||||
<div className="flex items-center justify-center py-16">
|
||||
<Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
|
||||
<span className="ml-2 text-muted-foreground">Loading audit logs...</span>
|
||||
<span className="ml-2 text-muted-foreground">Loading…</span>
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="p-8 text-center text-destructive">
|
||||
{error}
|
||||
<div className="py-12 text-center text-destructive">
|
||||
<AlertTriangle className="w-8 h-8 mx-auto mb-2" />
|
||||
<p>{error}</p>
|
||||
</div>
|
||||
) : filteredLogs.length === 0 ? (
|
||||
<div className="p-8 text-center text-muted-foreground">
|
||||
No audit events found
|
||||
) : auditLogs.length === 0 ? (
|
||||
<div className="py-12 text-center text-muted-foreground">
|
||||
No audit events match the current filters.
|
||||
</div>
|
||||
) : (
|
||||
<div className="divide-y">
|
||||
{filteredLogs.map((log) => (
|
||||
<div key={log.id} className="p-4 flex items-start gap-4">
|
||||
<div
|
||||
className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${
|
||||
!log.success
|
||||
? "bg-destructive/10 text-destructive"
|
||||
: "bg-accent/10 text-accent"
|
||||
}`}
|
||||
>
|
||||
{getEventIcon(log.action)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<p className="font-medium text-foreground">
|
||||
{getEventTitle(log.action)}
|
||||
</p>
|
||||
{log.resource_type && (
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{log.resource_type}
|
||||
</Badge>
|
||||
)}
|
||||
{!log.success && (
|
||||
<Badge variant="destructive" className="text-xs">
|
||||
Failed
|
||||
</Badge>
|
||||
)}
|
||||
{auditLogs.map((log) => {
|
||||
const cat = getCategory(log.action);
|
||||
const meta = CATEGORY_META[cat];
|
||||
const isCert = log.action.startsWith("ssh.cert");
|
||||
return (
|
||||
<div key={log.id} className="flex items-start gap-4 px-4 py-3 hover:bg-muted/30 transition-colors">
|
||||
{/* Icon */}
|
||||
<div
|
||||
className={`mt-0.5 w-9 h-9 rounded-lg flex items-center justify-center flex-shrink-0 ${
|
||||
log.success ? meta.color : "bg-destructive/10 text-destructive"
|
||||
}`}
|
||||
>
|
||||
{log.success ? getCategoryIcon(cat) : <XCircle className="w-4 h-4" />}
|
||||
</div>
|
||||
<div className="mt-1 text-sm text-muted-foreground">
|
||||
<span>by {log.user?.full_name || log.user?.email || "System"}</span>
|
||||
|
||||
{/* 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">
|
||||
{getActionLabel(log.action)}
|
||||
</span>
|
||||
<Badge variant="secondary" className={`text-xs px-1.5 py-0 ${meta.color}`}>
|
||||
{meta.label}
|
||||
</Badge>
|
||||
{!log.success && (
|
||||
<Badge variant="destructive" className="text-xs px-1.5 py-0">Failed</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
{log.description && (
|
||||
<>
|
||||
<span className="mx-2">•</span>
|
||||
<span>{log.description}</span>
|
||||
</>
|
||||
<p className="mt-0.5 text-sm text-muted-foreground">
|
||||
{log.description}
|
||||
{isCert && <CertDetail metadata={log.metadata} />}
|
||||
</p>
|
||||
)}
|
||||
{log.error_message && (
|
||||
<p className="mt-0.5 text-xs text-destructive">{log.error_message}</p>
|
||||
)}
|
||||
|
||||
{/* 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>
|
||||
) : log.user_id ? (
|
||||
<span className="font-mono">{log.user_id.slice(0, 8)}…</span>
|
||||
) : (
|
||||
<span className="italic">System</span>
|
||||
)}
|
||||
{log.ip_address && (
|
||||
<span className="font-mono">{log.ip_address}</span>
|
||||
)}
|
||||
{log.resource_type && (
|
||||
<Badge variant="outline" className="text-xs px-1.5 py-0 font-mono">
|
||||
{log.resource_type}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Timestamp */}
|
||||
<div className="flex flex-col items-end gap-1 flex-shrink-0">
|
||||
<p className="text-xs text-muted-foreground whitespace-nowrap">
|
||||
{formatDateTime(log.created_at)}
|
||||
</p>
|
||||
{log.success ? (
|
||||
<CheckCircle2 className="w-3.5 h-3.5 text-emerald-500" />
|
||||
) : (
|
||||
<XCircle className="w-3.5 h-3.5 text-destructive" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground whitespace-nowrap">
|
||||
{formatDate(log.created_at)}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<div className="flex items-center justify-between mt-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Page {page} of {totalPages} · {totalCount.toLocaleString()} events
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline" size="sm"
|
||||
disabled={page <= 1 || isLoading}
|
||||
onClick={() => setPage((p) => p - 1)}
|
||||
>
|
||||
<ChevronLeft className="w-4 h-4" /> Prev
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline" size="sm"
|
||||
disabled={page >= totalPages || isLoading}
|
||||
onClick={() => setPage((p) => p + 1)}
|
||||
>
|
||||
Next <ChevronRight className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user