feat(ui): adapt admin management screens into responsive mobile cards and timeline feed
This commit is contained in:
parent
7ab1405459
commit
509e6019b0
@ -9,12 +9,21 @@ export const AdminUsersPage = ({
|
||||
<AdminLayout title="Manage Users" currentPath="/admin/users">
|
||||
<div
|
||||
id="status-banner"
|
||||
style="display: none; margin-bottom: 1rem; padding: 0.75rem 1rem; border-radius: 4px; font-size: 0.9rem;"
|
||||
style="display: none; margin-bottom: 1rem; padding: 0.75rem 1rem; border-radius: var(--radius-md); font-size: 0.9rem;"
|
||||
/>
|
||||
|
||||
<div class="card">
|
||||
<h2>User Management</h2>
|
||||
<p>Review and activate pending users.</p>
|
||||
<div style="margin-bottom: 1.5rem;">
|
||||
<h1 style="font-size: 1.75rem; font-weight: 700; margin: 0 0 0.5rem 0; color: var(--text-primary);">
|
||||
User Management
|
||||
</h1>
|
||||
<p style="color: var(--text-secondary); margin: 0; font-size: 0.95rem;">
|
||||
Manage identities, activate pending registrations, and inspect role
|
||||
grants.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Desktop Table View (≥ 768px) */}
|
||||
<div class="card desktop-only" style="display: none;">
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
@ -26,58 +35,168 @@ export const AdminUsersPage = ({
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{users.map((user) => (
|
||||
<tr key={user.id}>
|
||||
<td>{user.username}</td>
|
||||
<td>{user.display_name || "-"}</td>
|
||||
<td>
|
||||
<span class={`badge badge-${user.account_status}`}>
|
||||
{user.account_status}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<a
|
||||
href={`/admin/users/${user.id}`}
|
||||
class="btn-action"
|
||||
style="text-decoration: none;"
|
||||
>
|
||||
Manage
|
||||
</a>
|
||||
{user.account_status === "pending" && (
|
||||
<button
|
||||
type="button"
|
||||
class="btn-action btn-success"
|
||||
onclick={`updateStatus('${user.id}', 'active')`}
|
||||
>
|
||||
Activate
|
||||
</button>
|
||||
)}
|
||||
{user.account_status === "active" && (
|
||||
<button
|
||||
type="button"
|
||||
class="btn-action btn-warning"
|
||||
onclick={`updateStatus('${user.id}', 'suspended')`}
|
||||
>
|
||||
Suspend
|
||||
</button>
|
||||
)}
|
||||
{user.account_status === "suspended" && (
|
||||
<button
|
||||
type="button"
|
||||
class="btn-action btn-success"
|
||||
onclick={`updateStatus('${user.id}', 'active')`}
|
||||
>
|
||||
Re-Activate
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{users.map((user) => {
|
||||
const statusClass = user.account_status === "active"
|
||||
? "badge-success"
|
||||
: user.account_status === "suspended"
|
||||
? "badge-danger"
|
||||
: "badge-warning";
|
||||
|
||||
return (
|
||||
<tr key={user.id}>
|
||||
<td>
|
||||
<strong style="color: var(--text-primary);">
|
||||
{user.username}
|
||||
</strong>
|
||||
</td>
|
||||
<td style="color: var(--text-secondary);">
|
||||
{user.display_name || "-"}
|
||||
</td>
|
||||
<td>
|
||||
<span class={`badge ${statusClass}`}>
|
||||
{user.account_status}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div style="display: flex; gap: 0.35rem;">
|
||||
<a
|
||||
href={`/admin/users/${user.id}`}
|
||||
class="btn-outline"
|
||||
style="padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 32px; text-decoration: none;"
|
||||
>
|
||||
Manage
|
||||
</a>
|
||||
{user.account_status === "pending" && (
|
||||
<button
|
||||
type="button"
|
||||
class="btn-primary"
|
||||
style="background: var(--success); border-color: var(--success); padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 32px;"
|
||||
onclick={`updateStatus('${user.id}', 'active')`}
|
||||
>
|
||||
Activate
|
||||
</button>
|
||||
)}
|
||||
{user.account_status === "active" && (
|
||||
<button
|
||||
type="button"
|
||||
class="btn-danger"
|
||||
style="padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 32px;"
|
||||
onclick={`updateStatus('${user.id}', 'suspended')`}
|
||||
>
|
||||
Suspend
|
||||
</button>
|
||||
)}
|
||||
{user.account_status === "suspended" && (
|
||||
<button
|
||||
type="button"
|
||||
class="btn-primary"
|
||||
style="background: var(--success); border-color: var(--success); padding: 0.25rem 0.65rem; font-size: 0.8rem; min-height: 32px;"
|
||||
onclick={`updateStatus('${user.id}', 'active')`}
|
||||
>
|
||||
Re-Activate
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Card Deck (< 768px) */}
|
||||
<div
|
||||
class="mobile-only"
|
||||
style="display: flex; flex-direction: column; gap: 1rem;"
|
||||
>
|
||||
{users.map((user) => {
|
||||
const statusClass = user.account_status === "active"
|
||||
? "badge-success"
|
||||
: user.account_status === "suspended"
|
||||
? "badge-danger"
|
||||
: "badge-warning";
|
||||
|
||||
return (
|
||||
<div class="card" key={user.id} style="margin-bottom: 0;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem;">
|
||||
<div style="display: flex; align-items: center; gap: 0.65rem;">
|
||||
<div style="display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: var(--primary-light); color: var(--primary); border-radius: var(--radius-md); font-weight: 700; font-size: 1rem;">
|
||||
{user.username.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
<div>
|
||||
<h3 style="margin: 0; font-size: 1.05rem; color: var(--text-primary);">
|
||||
{user.username}
|
||||
</h3>
|
||||
<span style="font-size: 0.8rem; color: var(--text-muted);">
|
||||
{user.display_name || "No display name"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class={`badge ${statusClass}`}>
|
||||
{user.account_status}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; gap: 0.5rem; margin-top: 1rem;">
|
||||
<a
|
||||
href={`/admin/users/${user.id}`}
|
||||
class="btn-outline"
|
||||
style="flex: 1; text-decoration: none; justify-content: center; min-height: 40px; font-size: 0.85rem;"
|
||||
>
|
||||
Manage User
|
||||
</a>
|
||||
{user.account_status === "pending" && (
|
||||
<button
|
||||
type="button"
|
||||
class="btn-primary"
|
||||
style="flex: 1; background: var(--success); border-color: var(--success); justify-content: center; min-height: 40px; font-size: 0.85rem;"
|
||||
onclick={`updateStatus('${user.id}', 'active')`}
|
||||
>
|
||||
Activate
|
||||
</button>
|
||||
)}
|
||||
{user.account_status === "active" && (
|
||||
<button
|
||||
type="button"
|
||||
class="btn-danger"
|
||||
style="flex: 1; justify-content: center; min-height: 40px; font-size: 0.85rem;"
|
||||
onclick={`updateStatus('${user.id}', 'suspended')`}
|
||||
>
|
||||
Suspend
|
||||
</button>
|
||||
)}
|
||||
{user.account_status === "suspended" && (
|
||||
<button
|
||||
type="button"
|
||||
class="btn-primary"
|
||||
style="flex: 1; background: var(--success); border-color: var(--success); justify-content: center; min-height: 40px; font-size: 0.85rem;"
|
||||
onclick={`updateStatus('${user.id}', 'active')`}
|
||||
>
|
||||
Re-Activate
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
{`
|
||||
@media (min-width: 768px) {
|
||||
.desktop-only { display: block !important; }
|
||||
.mobile-only { display: none !important; }
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.desktop-only { display: none !important; }
|
||||
.mobile-only { display: flex !important; }
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
@ -85,9 +204,9 @@ export const AdminUsersPage = ({
|
||||
const banner = document.getElementById('status-banner');
|
||||
banner.textContent = msg;
|
||||
banner.style.display = 'block';
|
||||
banner.style.background = isError ? '#f8d7da' : '#d1e7dd';
|
||||
banner.style.color = isError ? '#842029' : '#0f5132';
|
||||
banner.style.border = isError ? '1px solid #f5c2c7' : '1px solid #badbcc';
|
||||
banner.style.background = isError ? 'var(--danger-bg)' : 'var(--success-bg)';
|
||||
banner.style.color = isError ? 'var(--danger-text)' : 'var(--success-text)';
|
||||
banner.style.border = isError ? '1px solid var(--danger-border)' : '1px solid var(--success-border)';
|
||||
setTimeout(() => { banner.style.display = 'none'; }, 6000);
|
||||
}
|
||||
|
||||
|
||||
@ -6,40 +6,80 @@ export const AuditLogPage = ({
|
||||
logs: any[];
|
||||
}) => {
|
||||
return (
|
||||
<AdminLayout title="System Audit Logs" currentPath="/admin/audit-logs">
|
||||
<div class="card">
|
||||
<h2>System Audit Logs</h2>
|
||||
<AdminLayout title="Audit Logs" currentPath="/admin/audit-logs">
|
||||
<div style="margin-bottom: 1.5rem;">
|
||||
<h1 style="font-size: 1.75rem; font-weight: 700; margin: 0 0 0.5rem 0; color: var(--text-primary);">
|
||||
Immutable Audit Ledger
|
||||
</h1>
|
||||
<p style="color: var(--text-secondary); margin: 0; font-size: 0.95rem;">
|
||||
Cryptographically chained Merkle audit trail for authentication,
|
||||
authorization, and administrative events.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Desktop Table (≥ 768px) */}
|
||||
<div class="card desktop-only" style="display: none;">
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Timestamp</th>
|
||||
<th>Action</th>
|
||||
<th>User</th>
|
||||
<th>Event Action</th>
|
||||
<th>User / Subject</th>
|
||||
<th>Resource</th>
|
||||
<th>IP Address</th>
|
||||
<th>Details</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{logs.map((log) => (
|
||||
<tr>
|
||||
<td>{new Date(log.created_at).toLocaleString()}</td>
|
||||
<td>
|
||||
<strong>{log.action}</strong>
|
||||
</td>
|
||||
<td>{log.user || "System"}</td>
|
||||
<td>{log.resource || "-"}</td>
|
||||
<td>{log.ip_address || "-"}</td>
|
||||
<td>
|
||||
<pre>{log.details ? JSON.stringify(log.details, null, 2) : "{}"}</pre>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{logs.map((log) => {
|
||||
const isFail = log.action.includes("fail") ||
|
||||
log.action.includes("denied");
|
||||
const isSuccess = log.action.includes("success") ||
|
||||
log.action.includes("create") ||
|
||||
log.action.includes("activate");
|
||||
const badgeClass = isFail
|
||||
? "badge-danger"
|
||||
: isSuccess
|
||||
? "badge-success"
|
||||
: "badge-info";
|
||||
|
||||
return (
|
||||
<tr key={log.id}>
|
||||
<td style="font-size: 0.8rem; color: var(--text-muted); white-space: nowrap;">
|
||||
{new Date(log.created_at).toLocaleString()}
|
||||
</td>
|
||||
<td>
|
||||
<span class={`badge ${badgeClass}`}>
|
||||
{log.action}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<strong style="color: var(--text-primary);">
|
||||
{log.user || "System"}
|
||||
</strong>
|
||||
</td>
|
||||
<td style="color: var(--text-secondary);">
|
||||
{log.resource || "-"}
|
||||
</td>
|
||||
<td style="font-family: monospace; font-size: 0.85rem;">
|
||||
{log.ip_address || "-"}
|
||||
</td>
|
||||
<td>
|
||||
<pre style="margin: 0; font-family: monospace; font-size: 0.75rem; background: var(--surface-muted); padding: 0.35rem 0.6rem; border-radius: var(--radius-sm); max-width: 300px; overflow-x: auto;">
|
||||
{log.details ? JSON.stringify(log.details) : "{}"}
|
||||
</pre>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
{logs.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={6} style={{ textAlign: "center" }}>
|
||||
No audit logs found.
|
||||
<td
|
||||
colSpan={6}
|
||||
style="text-align: center; color: var(--text-muted); padding: 2rem;"
|
||||
>
|
||||
No audit records recorded yet.
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
@ -47,6 +87,81 @@ export const AuditLogPage = ({
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Feed (< 768px) */}
|
||||
<div
|
||||
class="mobile-only"
|
||||
style="display: flex; flex-direction: column; gap: 0.75rem;"
|
||||
>
|
||||
{logs.map((log) => {
|
||||
const isFail = log.action.includes("fail") ||
|
||||
log.action.includes("denied");
|
||||
const isSuccess = log.action.includes("success") ||
|
||||
log.action.includes("create") || log.action.includes("activate");
|
||||
const badgeClass = isFail
|
||||
? "badge-danger"
|
||||
: isSuccess
|
||||
? "badge-success"
|
||||
: "badge-info";
|
||||
|
||||
return (
|
||||
<div
|
||||
class="card"
|
||||
key={log.id}
|
||||
style="margin-bottom: 0; padding: 1rem;"
|
||||
>
|
||||
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem;">
|
||||
<span class={`badge ${badgeClass}`}>
|
||||
{log.action}
|
||||
</span>
|
||||
<span style="font-size: 0.75rem; color: var(--text-muted);">
|
||||
{new Date(log.created_at).toLocaleTimeString([], {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
second: "2-digit",
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div style="font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.5rem;">
|
||||
<div>
|
||||
<strong>User:</strong> {log.user || "System"}
|
||||
</div>
|
||||
<div>
|
||||
<strong>IP:</strong>{" "}
|
||||
<span style="font-family: monospace;">
|
||||
{log.ip_address || "Internal"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{log.details && (
|
||||
<details style="font-size: 0.8rem; color: var(--text-muted);">
|
||||
<summary style="cursor: pointer; font-weight: 600;">
|
||||
View Event Payload
|
||||
</summary>
|
||||
<pre style="margin-top: 0.5rem; background: var(--surface-muted); padding: 0.5rem; border-radius: var(--radius-sm); font-family: monospace; font-size: 0.75rem; overflow-x: auto;">
|
||||
{JSON.stringify(log.details, null, 2)}
|
||||
</pre>
|
||||
</details>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
{`
|
||||
@media (min-width: 768px) {
|
||||
.desktop-only { display: block !important; }
|
||||
.mobile-only { display: none !important; }
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.desktop-only { display: none !important; }
|
||||
.mobile-only { display: flex !important; }
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
</AdminLayout>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user