Initial BizOne portal setup
This commit is contained in:
489
frontend/src/components/audit-trail-board.tsx
Normal file
489
frontend/src/components/audit-trail-board.tsx
Normal file
@ -0,0 +1,489 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { type AuditTrailEntry, seedAuditTrailEntries } from '../lib/audit-trail';
|
||||
|
||||
function formatDate(value: string) {
|
||||
const date = new Date(value);
|
||||
return {
|
||||
day: date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }),
|
||||
time: date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false }),
|
||||
};
|
||||
}
|
||||
|
||||
function downloadCsv(rows: AuditTrailEntry[]) {
|
||||
const header = ['Timestamp', 'Admin User', 'Action Type', 'Module', 'IP Address', 'Severity', 'Details'];
|
||||
const csvRows = rows.map((row) =>
|
||||
[
|
||||
row.timestamp,
|
||||
row.adminUser,
|
||||
row.actionType,
|
||||
row.module,
|
||||
row.ipAddress,
|
||||
row.severity,
|
||||
row.details,
|
||||
]
|
||||
.map((cell) => `"${String(cell).replaceAll('"', '""')}"`)
|
||||
.join(','),
|
||||
);
|
||||
|
||||
const blob = new Blob([[header.join(','), ...csvRows].join('\n')], { type: 'text/csv;charset=utf-8;' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const anchor = document.createElement('a');
|
||||
anchor.href = url;
|
||||
anchor.download = 'audit-trail-export.csv';
|
||||
anchor.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
type Props = {
|
||||
initialEntries: AuditTrailEntry[];
|
||||
initialTotal?: number;
|
||||
initialPage?: number;
|
||||
initialPageSize?: number;
|
||||
initialTotalPages?: number;
|
||||
};
|
||||
|
||||
const PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
|
||||
|
||||
function buildVisiblePages(page: number, totalPages: number) {
|
||||
if (totalPages <= 5) {
|
||||
return Array.from({ length: totalPages }, (_, index) => index + 1);
|
||||
}
|
||||
|
||||
const start = Math.max(1, Math.min(page - 2, totalPages - 4));
|
||||
return Array.from({ length: 5 }, (_, index) => start + index);
|
||||
}
|
||||
|
||||
export function AuditTrailBoard({
|
||||
initialEntries,
|
||||
initialTotal,
|
||||
initialPage,
|
||||
initialPageSize,
|
||||
initialTotalPages,
|
||||
}: Props) {
|
||||
const [allEntries] = useState<AuditTrailEntry[]>(initialEntries.length > 0 ? initialEntries : seedAuditTrailEntries);
|
||||
const [entries, setEntries] = useState<AuditTrailEntry[]>(initialEntries.length > 0 ? initialEntries : seedAuditTrailEntries);
|
||||
const [total, setTotal] = useState(initialTotal ?? initialEntries.length);
|
||||
const [page, setPage] = useState(initialPage ?? 1);
|
||||
const [pageSize, setPageSize] = useState(initialPageSize ?? 50);
|
||||
const [totalPages, setTotalPages] = useState(initialTotalPages ?? 1);
|
||||
const [range, setRange] = useState('7d');
|
||||
const [adminUser, setAdminUser] = useState('all');
|
||||
const [actionType, setActionType] = useState('all');
|
||||
const [moduleName, setModuleName] = useState('all');
|
||||
const [search, setSearch] = useState('');
|
||||
const [selectedEntryId, setSelectedEntryId] = useState<string | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedEntryId(initialEntries[0]?.id ?? seedAuditTrailEntries[0]?.id ?? null);
|
||||
}, [initialEntries]);
|
||||
|
||||
useEffect(() => {
|
||||
const controller = new AbortController();
|
||||
const timeout = window.setTimeout(async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const params = new URLSearchParams();
|
||||
params.set('page', String(page));
|
||||
params.set('limit', String(pageSize));
|
||||
if (range !== 'all') params.set('range', range);
|
||||
if (adminUser !== 'all') params.set('user', adminUser);
|
||||
if (actionType !== 'all') params.set('actionType', actionType);
|
||||
if (moduleName !== 'all') params.set('module', moduleName);
|
||||
if (search.trim()) params.set('search', search.trim());
|
||||
|
||||
const response = await fetch(`/api/audit-trail?${params.toString()}`, {
|
||||
method: 'GET',
|
||||
signal: controller.signal,
|
||||
cache: 'no-store',
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
return;
|
||||
}
|
||||
|
||||
const payload = (await response.json()) as {
|
||||
items: Array<{
|
||||
id: string;
|
||||
actorName: string;
|
||||
actionType: string;
|
||||
module: string;
|
||||
ipAddress: string | null;
|
||||
severity: 'default' | 'alert';
|
||||
details: string;
|
||||
createdAt: string;
|
||||
}>;
|
||||
total: number;
|
||||
page: number;
|
||||
pageSize: number;
|
||||
totalPages: number;
|
||||
};
|
||||
|
||||
const normalized = payload.items.map((entry) => ({
|
||||
id: entry.id,
|
||||
timestamp: entry.createdAt,
|
||||
adminUser: entry.actorName,
|
||||
actionType: entry.actionType,
|
||||
module: entry.module,
|
||||
ipAddress: entry.ipAddress || '-',
|
||||
severity: entry.severity,
|
||||
details: entry.details,
|
||||
}));
|
||||
|
||||
setEntries(normalized);
|
||||
setTotal(payload.total);
|
||||
setPage(payload.page);
|
||||
setPageSize(payload.pageSize);
|
||||
setTotalPages(payload.totalPages);
|
||||
} catch (error) {
|
||||
if ((error as Error).name !== 'AbortError') {
|
||||
console.error(error);
|
||||
}
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, 250);
|
||||
|
||||
return () => {
|
||||
controller.abort();
|
||||
window.clearTimeout(timeout);
|
||||
};
|
||||
}, [actionType, adminUser, moduleName, page, pageSize, range, search]);
|
||||
|
||||
const selectedEntry =
|
||||
entries.find((entry) => entry.id === selectedEntryId) ?? entries[0] ?? null;
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedEntryId && entries[0]?.id) {
|
||||
setSelectedEntryId(entries[0].id);
|
||||
return;
|
||||
}
|
||||
|
||||
if (selectedEntryId && !entries.some((entry) => entry.id === selectedEntryId)) {
|
||||
setSelectedEntryId(entries[0]?.id ?? null);
|
||||
}
|
||||
}, [entries, selectedEntryId]);
|
||||
|
||||
const users = Array.from(new Set(allEntries.map((entry) => entry.adminUser)));
|
||||
const actions = Array.from(new Set(allEntries.map((entry) => entry.actionType)));
|
||||
const modules = Array.from(new Set(allEntries.map((entry) => entry.module)));
|
||||
|
||||
const alertsCount = allEntries.filter((entry) => entry.severity === 'alert').length;
|
||||
const mostActiveAdmin =
|
||||
users
|
||||
.map((user) => ({
|
||||
user,
|
||||
count: allEntries.filter((entry) => entry.adminUser === user).length,
|
||||
}))
|
||||
.sort((a, b) => b.count - a.count)[0] ?? { user: 'Admin User', count: 0 };
|
||||
const visiblePages = useMemo(() => buildVisiblePages(page, totalPages), [page, totalPages]);
|
||||
const pageStart = entries.length === 0 ? 0 : (page - 1) * pageSize + 1;
|
||||
const pageEnd = entries.length === 0 ? 0 : (page - 1) * pageSize + entries.length;
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="page-header">
|
||||
<div>
|
||||
<p className="page-eyebrow">Settings</p>
|
||||
<h1 className="page-heading">Audit Trail</h1>
|
||||
<p className="page-copy">Monitor administrative actions, role changes, and system modifications from one place.</p>
|
||||
</div>
|
||||
<button type="button" className="audit-export-button" onClick={() => downloadCsv(entries)}>
|
||||
<span className="material-symbols-outlined">download</span>
|
||||
Export to Excel
|
||||
</button>
|
||||
<a
|
||||
className="audit-export-button secondary"
|
||||
href={`/api/audit-trail/export?${new URLSearchParams({
|
||||
...(range !== 'all' ? { range } : {}),
|
||||
...(adminUser !== 'all' ? { user: adminUser } : {}),
|
||||
...(actionType !== 'all' ? { actionType } : {}),
|
||||
...(moduleName !== 'all' ? { module: moduleName } : {}),
|
||||
...(search.trim() ? { search: search.trim() } : {}),
|
||||
}).toString()}`}
|
||||
>
|
||||
<span className="material-symbols-outlined">download</span>
|
||||
Export Server CSV
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<section className="audit-kpi-grid">
|
||||
<article className="audit-kpi-card">
|
||||
<div className="audit-kpi-head">
|
||||
<span>Total Actions (Last 24H)</span>
|
||||
<span className="material-symbols-outlined">history</span>
|
||||
</div>
|
||||
<div className="audit-kpi-metric">
|
||||
<strong>{entries.length.toLocaleString('en-US')}</strong>
|
||||
<span className="audit-kpi-trend is-positive">12.5%</span>
|
||||
</div>
|
||||
<div className="audit-kpi-bar">
|
||||
<div style={{ width: `${Math.min(100, 35 + entries.length * 8)}%` }} />
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article className="audit-kpi-card">
|
||||
<div className="audit-kpi-head">
|
||||
<span>Security Alerts</span>
|
||||
<span className="material-symbols-outlined audit-danger">security</span>
|
||||
</div>
|
||||
<div className="audit-kpi-metric">
|
||||
<strong>{alertsCount.toString().padStart(2, '0')}</strong>
|
||||
<span className="audit-kpi-trend is-danger">Critical</span>
|
||||
</div>
|
||||
<p>Failed login bursts and suspicious access activity are surfaced here.</p>
|
||||
</article>
|
||||
|
||||
<article className="audit-kpi-card">
|
||||
<div className="audit-kpi-head">
|
||||
<span>Most Active Admin</span>
|
||||
<span className="material-symbols-outlined audit-secondary">person</span>
|
||||
</div>
|
||||
<div className="audit-kpi-user">
|
||||
<div className="audit-avatar">{mostActiveAdmin.user.slice(0, 1)}</div>
|
||||
<div>
|
||||
<strong>{mostActiveAdmin.user}</strong>
|
||||
<span>{mostActiveAdmin.count} actions performed</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section className="audit-filter-bar">
|
||||
<div className="audit-filter-title">
|
||||
<span className="material-symbols-outlined">filter_list</span>
|
||||
<span>Filters</span>
|
||||
</div>
|
||||
|
||||
<label className="audit-filter-field">
|
||||
<span>Date Range</span>
|
||||
<select value={range} onChange={(event) => {
|
||||
setRange(event.target.value);
|
||||
setPage(1);
|
||||
}}>
|
||||
<option value="24h">Last 24 Hours</option>
|
||||
<option value="7d">Last 7 Days</option>
|
||||
<option value="30d">Last 30 Days</option>
|
||||
<option value="all">All Time</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="audit-filter-field">
|
||||
<span>Admin User</span>
|
||||
<select value={adminUser} onChange={(event) => {
|
||||
setAdminUser(event.target.value);
|
||||
setPage(1);
|
||||
}}>
|
||||
<option value="all">All Admins</option>
|
||||
{users.map((user) => (
|
||||
<option key={user} value={user}>
|
||||
{user}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="audit-filter-field">
|
||||
<span>Action Type</span>
|
||||
<select value={actionType} onChange={(event) => {
|
||||
setActionType(event.target.value);
|
||||
setPage(1);
|
||||
}}>
|
||||
<option value="all">All Actions</option>
|
||||
{actions.map((action) => (
|
||||
<option key={action} value={action}>
|
||||
{action}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="audit-filter-field">
|
||||
<span>Module</span>
|
||||
<select value={moduleName} onChange={(event) => {
|
||||
setModuleName(event.target.value);
|
||||
setPage(1);
|
||||
}}>
|
||||
<option value="all">All Modules</option>
|
||||
{modules.map((module) => (
|
||||
<option key={module} value={module}>
|
||||
{module}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="audit-filter-search">
|
||||
<span>Search</span>
|
||||
<input
|
||||
type="search"
|
||||
value={search}
|
||||
onChange={(event) => {
|
||||
setSearch(event.target.value);
|
||||
setPage(1);
|
||||
}}
|
||||
placeholder="Search logs, admin names..."
|
||||
/>
|
||||
</label>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="audit-reset-button"
|
||||
onClick={() => {
|
||||
setRange('7d');
|
||||
setAdminUser('all');
|
||||
setActionType('all');
|
||||
setModuleName('all');
|
||||
setSearch('');
|
||||
setPage(1);
|
||||
}}
|
||||
>
|
||||
Reset All
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<section className="audit-layout">
|
||||
<article className="audit-table-card">
|
||||
{isLoading ? <div className="audit-loading-bar" /> : null}
|
||||
<table className="audit-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Timestamp</th>
|
||||
<th>Admin User</th>
|
||||
<th>Action Type</th>
|
||||
<th>Module</th>
|
||||
<th>IP Address</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{entries.map((entry) => {
|
||||
const stamp = formatDate(entry.timestamp);
|
||||
const isSelected = entry.id === selectedEntry?.id;
|
||||
return (
|
||||
<tr
|
||||
key={entry.id}
|
||||
className={`${entry.severity === 'alert' ? 'is-alert' : ''} ${isSelected ? 'is-selected' : ''}`}
|
||||
>
|
||||
<td>
|
||||
<div className="audit-stamp">
|
||||
<strong>{stamp.day}</strong>
|
||||
<span>{stamp.time}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div className="audit-user-cell">
|
||||
<div className={`audit-avatar small ${entry.severity === 'alert' ? 'is-alert' : ''}`}>
|
||||
{entry.adminUser.slice(0, 1)}
|
||||
</div>
|
||||
<span>{entry.adminUser}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span className={`audit-action-pill tone-${entry.severity === 'alert' ? 'alert' : 'default'}`}>
|
||||
{entry.actionType}
|
||||
</span>
|
||||
</td>
|
||||
<td>{entry.module}</td>
|
||||
<td className="audit-mono">{entry.ipAddress}</td>
|
||||
<td className="audit-actions-cell">
|
||||
<button type="button" onClick={() => setSelectedEntryId(entry.id)}>
|
||||
View Details
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="audit-pagination">
|
||||
<div className="audit-pagination-meta">
|
||||
<span>
|
||||
Showing {pageStart} to {pageEnd} of {total} results
|
||||
</span>
|
||||
<label className="audit-page-size">
|
||||
<span>Show</span>
|
||||
<select
|
||||
value={pageSize}
|
||||
onChange={(event) => {
|
||||
setPageSize(Number(event.target.value));
|
||||
setPage(1);
|
||||
}}
|
||||
>
|
||||
{PAGE_SIZE_OPTIONS.map((option) => (
|
||||
<option key={option} value={option}>
|
||||
{option}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<span>rows</span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="audit-pagination-buttons">
|
||||
<button type="button" disabled={page <= 1} onClick={() => setPage((current) => Math.max(1, current - 1))}>
|
||||
<span className="material-symbols-outlined">chevron_left</span>
|
||||
</button>
|
||||
{visiblePages.map((pageNumber) => (
|
||||
<button
|
||||
key={pageNumber}
|
||||
type="button"
|
||||
className={pageNumber === page ? 'is-active' : ''}
|
||||
onClick={() => setPage(pageNumber)}
|
||||
>
|
||||
{pageNumber}
|
||||
</button>
|
||||
))}
|
||||
{visiblePages[visiblePages.length - 1] < totalPages ? <span>...</span> : null}
|
||||
{visiblePages[visiblePages.length - 1] < totalPages ? (
|
||||
<button type="button" onClick={() => setPage(totalPages)}>
|
||||
{totalPages}
|
||||
</button>
|
||||
) : null}
|
||||
<button type="button" disabled={page >= totalPages} onClick={() => setPage((current) => Math.min(totalPages, current + 1))}>
|
||||
<span className="material-symbols-outlined">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<aside className="audit-detail-card">
|
||||
{selectedEntry ? (
|
||||
<>
|
||||
<div className="card-head">
|
||||
<div>
|
||||
<p className="card-kicker">Selected Event</p>
|
||||
<h3>{selectedEntry.actionType}</h3>
|
||||
</div>
|
||||
<span className={`audit-action-pill tone-${selectedEntry.severity === 'alert' ? 'alert' : 'default'}`}>
|
||||
{selectedEntry.module}
|
||||
</span>
|
||||
</div>
|
||||
<div className="detail-stack">
|
||||
<div>
|
||||
<strong>{selectedEntry.adminUser}</strong>
|
||||
<span>Actor</span>
|
||||
</div>
|
||||
<div>
|
||||
<strong>{formatDate(selectedEntry.timestamp).day} {formatDate(selectedEntry.timestamp).time}</strong>
|
||||
<span>Timestamp</span>
|
||||
</div>
|
||||
<div>
|
||||
<strong>{selectedEntry.ipAddress}</strong>
|
||||
<span>IP Address</span>
|
||||
</div>
|
||||
<div>
|
||||
<strong>{selectedEntry.details}</strong>
|
||||
<span>Details</span>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<p>No audit entries found.</p>
|
||||
)}
|
||||
</aside>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user