35 lines
1.6 KiB
TypeScript
35 lines
1.6 KiB
TypeScript
import { AuditLog } from "./types";
|
|
|
|
type AuditLogSectionProps = {
|
|
logs: AuditLog[];
|
|
};
|
|
|
|
export default function AuditLogSection({ logs }: AuditLogSectionProps) {
|
|
return (
|
|
<section className="space-y-4">
|
|
<h2 className="text-lg tracking-wide">Audit Log</h2>
|
|
<div className="overflow-x-auto border border-border/70">
|
|
<table className="w-full text-left text-sm">
|
|
<thead className="bg-black/5 text-foreground/70">
|
|
<tr>
|
|
<th className="px-3 py-2">Time</th>
|
|
<th className="px-3 py-2">Actor</th>
|
|
<th className="px-3 py-2">Action</th>
|
|
<th className="px-3 py-2">Summary</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{logs.map((log) => (
|
|
<tr key={log._id} className="border-t border-border/50">
|
|
<td className="px-3 py-2 text-xs text-foreground/70">{log.createdAt ? new Date(log.createdAt).toLocaleString() : "-"}</td>
|
|
<td className="px-3 py-2">{log.actor?.username || "system"}</td>
|
|
<td className="px-3 py-2 font-mono text-xs">{log.action}</td>
|
|
<td className="px-3 py-2">{log.summary || `${log.targetType || "target"}:${log.targetId || "-"}`}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|