feat: audit logs show user info

This commit is contained in:
2026-02-04 21:44:00 -08:00
parent 800b9f6c2d
commit 4327750d2a
4 changed files with 160 additions and 45 deletions
@@ -85,8 +85,10 @@ import type { AuditLog, AuditAction, AuditCategory } from '@library/shared-types
<thead>
<tr>
<th>Time</th>
<th>User</th>
<th>Category</th>
<th>Action</th>
<th>Target User</th>
<th>Details</th>
<th>Status</th>
</tr>
@@ -95,6 +97,23 @@ import type { AuditLog, AuditAction, AuditCategory } from '@library/shared-types
@for (log of logs(); track log.id) {
<tr [class.failed]="!log.success">
<td class="time">{{ formatDate(log.createdAt) }}</td>
<td class="user-cell">
@if (log.user) {
<div class="user-info">
@if (log.user.avatar) {
<img [src]="log.user.avatar" [alt]="log.user.username" class="user-avatar" />
}
<div class="user-details">
<span class="username">{{ log.user.username }}</span>
<span class="user-id">{{ log.userId }}</span>
</div>
</div>
} @else if (log.userId) {
<span class="user-id-only">{{ log.userId }}</span>
} @else {
<span class="no-user">-</span>
}
</td>
<td>
<span
class="category-badge"
@@ -104,6 +123,23 @@ import type { AuditLog, AuditAction, AuditCategory } from '@library/shared-types
</span>
</td>
<td>{{ auditService.getActionLabel(log.action) }}</td>
<td class="user-cell">
@if (log.targetUser) {
<div class="user-info">
@if (log.targetUser.avatar) {
<img [src]="log.targetUser.avatar" [alt]="log.targetUser.username" class="user-avatar" />
}
<div class="user-details">
<span class="username">{{ log.targetUser.username }}</span>
<span class="user-id">{{ log.targetUserId }}</span>
</div>
</div>
} @else if (log.targetUserId) {
<span class="user-id-only">{{ log.targetUserId }}</span>
} @else {
<span class="no-user">-</span>
}
</td>
<td class="details" [class.expanded]="expandedRows()[log.id]" (click)="toggleRowExpand(log.id)">
<span class="details-content">{{ log.details ?? '-' }}</span>
@if (log.details && log.details.length > 50) {
@@ -252,6 +288,50 @@ import type { AuditLog, AuditAction, AuditCategory } from '@library/shared-types
color: #6b7280;
}
.user-cell {
min-width: 150px;
}
.user-info {
display: flex;
align-items: center;
gap: 0.5rem;
}
.user-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
object-fit: cover;
}
.user-details {
display: flex;
flex-direction: column;
}
.username {
font-weight: 500;
font-size: 0.9rem;
color: #374151;
}
.user-id {
font-size: 0.7rem;
color: #9ca3af;
font-family: monospace;
}
.user-id-only {
font-size: 0.75rem;
color: #6b7280;
font-family: monospace;
}
.no-user {
color: #9ca3af;
}
.category-badge {
display: inline-block;
padding: 0.25rem 0.5rem;