Add audit logs.

2026-06-23 12:13:47 -07:00
parent 870eeec82a
commit 62592c29ae
106 changed files with 2522 additions and 311 deletions
@@ -0,0 +1,83 @@
+<div class="page">
+  <div class="flex flex-wrap gap-3 items-end mb-4">
+    <label class="flex flex-col gap-1">
+      Search / 搜尋
+      <kendo-textbox placeholder="Summary / entity / user" [(ngModel)]="search"
+        (keydown.enter)="applyFilter()"></kendo-textbox>
+    </label>
+    <label class="flex flex-col gap-1">
+      Category / 類別
+      <kendo-dropdownlist [data]="categories" textField="label" valueField="value" [valuePrimitive]="true"
+        [(ngModel)]="category" [defaultItem]="{ value: null, label: 'All Categories/全部類別' }">
+      </kendo-dropdownlist>
+    </label>
+    <label class="flex flex-col gap-1">
+      Action / 動作
+      <kendo-dropdownlist [data]="actions" textField="label" valueField="value" [valuePrimitive]="true"
+        [(ngModel)]="action" [defaultItem]="{ value: null, label: 'All Actions/全部動作' }">
+      </kendo-dropdownlist>
+    </label>
+    <label class="flex flex-col gap-1">
+      From / 起
+      <kendo-datepicker [(ngModel)]="from"></kendo-datepicker>
+    </label>
+    <label class="flex flex-col gap-1">
+      To / 迄
+      <kendo-datepicker [(ngModel)]="to"></kendo-datepicker>
+    </label>
+    <button kendoButton themeColor="primary" (click)="applyFilter()">Apply / 套用</button>
+  </div>
+
+  <kendo-grid [data]="{ data: rows, total: total }" [loading]="loading" [pageable]="true" [skip]="skip"
+    [pageSize]="pageSize" (pageChange)="onPageChange($event)">
+
+    <kendo-grid-column title="Time / 時間" [width]="170">
+      <ng-template kendoGridCellTemplate let-dataItem>{{ dataItem.timestamp | date:'short' }}</ng-template>
+    </kendo-grid-column>
+    <kendo-grid-column title="Level / 等級" [width]="100">
+      <ng-template kendoGridCellTemplate let-dataItem>
+        <span [class]="levelClass(dataItem.level)">{{ dataItem.level }}</span>
+      </ng-template>
+    </kendo-grid-column>
+    <kendo-grid-column field="category" title="Category / 類別" [width]="120"></kendo-grid-column>
+    <kendo-grid-column field="action" title="Action / 動作" [width]="140"></kendo-grid-column>
+    <kendo-grid-column title="Entity / 對象" [width]="160">
+      <ng-template kendoGridCellTemplate let-dataItem>
+        <span *ngIf="dataItem.entityName">{{ dataItem.entityName }}<span *ngIf="dataItem.entityId"> #{{ dataItem.entityId }}</span></span>
+      </ng-template>
+    </kendo-grid-column>
+    <kendo-grid-column field="summary" title="Summary / 摘要"></kendo-grid-column>
+    <kendo-grid-column title="User / 使用者" [width]="180">
+      <ng-template kendoGridCellTemplate let-dataItem>{{ dataItem.userEmail || dataItem.userId }}</ng-template>
+    </kendo-grid-column>
+    <kendo-grid-column title="" [width]="90">
+      <ng-template kendoGridCellTemplate let-dataItem>
+        <button kendoButton fillMode="flat" themeColor="primary" (click)="view(dataItem)">View</button>
+      </ng-template>
+    </kendo-grid-column>
+  </kendo-grid>
+
+  <!-- Detail dialog -->
+  <kendo-dialog *ngIf="detail" title="Audit Log #{{ detail.id }}" [width]="720" (close)="detail = null">
+    <div class="p-2 flex flex-col gap-2 text-sm">
+      <div class="grid grid-cols-2 gap-2">
+        <div><strong>Time:</strong> {{ detail.timestamp | date:'medium' }}</div>
+        <div><strong>Level:</strong> <span [class]="levelClass(detail.level)">{{ detail.level }}</span></div>
+        <div><strong>Category:</strong> {{ detail.category }}</div>
+        <div><strong>Action:</strong> {{ detail.action }}</div>
+        <div *ngIf="detail.entityName"><strong>Entity:</strong> {{ detail.entityName }} <span *ngIf="detail.entityId">#{{ detail.entityId }}</span></div>
+        <div *ngIf="detail.userEmail || detail.userId"><strong>User:</strong> {{ detail.userEmail || detail.userId }}</div>
+        <div *ngIf="detail.ipAddress"><strong>IP:</strong> {{ detail.ipAddress }}</div>
+        <div class="col-span-2" *ngIf="detail.summary"><strong>Summary:</strong> {{ detail.summary }}</div>
+        <div class="col-span-2" *ngIf="detail.correlationId"><strong>Correlation:</strong> {{ detail.correlationId }}</div>
+      </div>
+      <ng-container *ngIf="detailChanges">
+        <div><strong>Changes (before → after)</strong></div>
+        <pre class="detail-block">{{ detailChanges }}</pre>
+      </ng-container>
+    </div>
+    <kendo-dialog-actions>
+      <button kendoButton (click)="detail = null">Close / 關閉</button>
+    </kendo-dialog-actions>
+  </kendo-dialog>
+</div>