@masterteam/audit-logs 0.0.2 → 0.0.4

package/fesm2022/masterteam-audit-logs.mjs

@@ -1,59 +1,87 @@
 import * as i0 from '@angular/core';
-import { inject, Component, Injectable, computed, viewChild, linkedSignal } from '@angular/core';
+import { inject, ChangeDetectionStrategy, Component, Injectable, computed, input, output, signal, effect, viewChild, linkedSignal } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { Router, RouterOutlet } from '@angular/router';
 import { TranslocoService, TranslocoDirective } from '@jsverse/transloco';
 import { Breadcrumb } from '@masterteam/components/breadcrumb';
 import { Page } from '@masterteam/components/page';
+import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import { Button } from '@masterteam/components/button';
+import { Chip } from '@masterteam/components/chip';
+import { StatisticCard } from '@masterteam/components/statistic-card';
 import { Table } from '@masterteam/components/table';
-import { SkeletonModule } from 'primeng/skeleton';
-import { Avatar } from '@masterteam/components/avatar';
-import { Action, Selector, State, Store, select } from '@ngxs/store';
 import { HttpClient, HttpContext } from '@angular/common/http';
-import { CrudStateBase, handleApiRequest, REQUEST_CONTEXT } from '@masterteam/components';
+import { CrudStateBase, REQUEST_CONTEXT, handleApiRequest } from '@masterteam/components';
+import { Action, Selector, State, Store, select } from '@ngxs/store';
+import { Card } from '@masterteam/components/card';
+import { Drawer } from '@masterteam/components/drawer';
+import { EntityStatus, EntityUser } from '@masterteam/components/entities';
+import { ModalService } from '@masterteam/components/modal';
+import * as i1 from 'primeng/skeleton';
+import { SkeletonModule } from 'primeng/skeleton';
 
 class AuditLogs {
     router = inject(Router);
     translocoService = inject(TranslocoService);
-    breadcrumbItems = [
-        {
-            label: '',
-            icon: 'general.home-line',
-            routerLink: '/control-panel/workspaces',
-        },
-        {
-            label: this.translocoService.translate('product-settings.product-settings'),
-            routerLink: '/control-panel/product-settings',
-        },
-        { label: this.translocoService.translate('audit-logs.audit-logs') },
-    ];
+    activeLang = toSignal(this.translocoService.langChanges$, {
+        initialValue: this.translocoService.getActiveLang(),
+    });
+    get breadcrumbItems() {
+        this.activeLang();
+        return [
+            {
+                label: '',
+                icon: 'general.home-line',
+                routerLink: '/control-panel/workspaces',
+            },
+            {
+                label: this.translocoService.translate('product-settings.product-settings'),
+                routerLink: '/control-panel/product-settings',
+            },
+            { label: this.translocoService.translate('audit-logs.audit-logs') },
+        ];
+    }
     goBack() {
         this.router.navigate(['control-panel/product-settings']);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AuditLogs, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: AuditLogs, isStandalone: true, selector: "mt-audit-logs", ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <mt-page\r\n    [title]=\"t('audit-logs.audit-logs')\"\r\n    [avatarIcon]=\"'time.clock-fast-forward'\"\r\n    [avatarStyle]=\"{\r\n      '--p-avatar-background': 'var(--p-lime-50)',\r\n      '--p-avatar-color': 'var(--p-lime-700)',\r\n    }\"\r\n    (backButtonClick)=\"goBack()\"\r\n    backButton\r\n  >\r\n    <h3 class=\"font-bold text-xl\">{{ t(\"audit-logs.audit-logs\") }}</h3>\r\n    <mt-breadcrumb\r\n      [items]=\"breadcrumbItems\"\r\n      [styleClass]=\"'flex justify-start mx-1 mb-4'\"\r\n    ></mt-breadcrumb>\r\n    <router-outlet />\r\n  </mt-page>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Breadcrumb, selector: "mt-breadcrumb", inputs: ["items", "styleClass"], outputs: ["onItemClick"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: AuditLogs, isStandalone: true, selector: "mt-audit-logs", ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <mt-page\n    [title]=\"t('audit-logs.audit-logs')\"\n    [contentClass]=\"'max-[1025px]:p-4 max-[640px]:p-3'\"\n    [avatarIcon]=\"'time.clock-fast-forward'\"\n    [avatarStyle]=\"{\n      '--p-avatar-background': 'var(--p-lime-50)',\n      '--p-avatar-color': 'var(--p-lime-700)',\n    }\"\n    (backButtonClick)=\"goBack()\"\n    backButton\n  >\n    <div class=\"flex min-h-0 flex-col gap-4\">\n      <mt-breadcrumb\n        [items]=\"breadcrumbItems\"\n        [styleClass]=\"'mx-1 flex justify-start'\"\n      />\n\n      <router-outlet />\n    </div>\n  </mt-page>\n</ng-container>\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Breadcrumb, selector: "mt-breadcrumb", inputs: ["items", "styleClass"], outputs: ["onItemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AuditLogs, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-audit-logs', imports: [Page, RouterOutlet, TranslocoDirective, Breadcrumb], template: "<ng-container *transloco=\"let t\">\r\n  <mt-page\r\n    [title]=\"t('audit-logs.audit-logs')\"\r\n    [avatarIcon]=\"'time.clock-fast-forward'\"\r\n    [avatarStyle]=\"{\r\n      '--p-avatar-background': 'var(--p-lime-50)',\r\n      '--p-avatar-color': 'var(--p-lime-700)',\r\n    }\"\r\n    (backButtonClick)=\"goBack()\"\r\n    backButton\r\n  >\r\n    <h3 class=\"font-bold text-xl\">{{ t(\"audit-logs.audit-logs\") }}</h3>\r\n    <mt-breadcrumb\r\n      [items]=\"breadcrumbItems\"\r\n      [styleClass]=\"'flex justify-start mx-1 mb-4'\"\r\n    ></mt-breadcrumb>\r\n    <router-outlet />\r\n  </mt-page>\r\n</ng-container>\r\n" }]
+            args: [{ selector: 'mt-audit-logs', imports: [Page, RouterOutlet, TranslocoDirective, Breadcrumb], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  <mt-page\n    [title]=\"t('audit-logs.audit-logs')\"\n    [contentClass]=\"'max-[1025px]:p-4 max-[640px]:p-3'\"\n    [avatarIcon]=\"'time.clock-fast-forward'\"\n    [avatarStyle]=\"{\n      '--p-avatar-background': 'var(--p-lime-50)',\n      '--p-avatar-color': 'var(--p-lime-700)',\n    }\"\n    (backButtonClick)=\"goBack()\"\n    backButton\n  >\n    <div class=\"flex min-h-0 flex-col gap-4\">\n      <mt-breadcrumb\n        [items]=\"breadcrumbItems\"\n        [styleClass]=\"'mx-1 flex justify-start'\"\n      />\n\n      <router-outlet />\n    </div>\n  </mt-page>\n</ng-container>\n", styles: [":host{display:block;height:100%}\n"] }]
         }] });
 
 var AuditLogsActionKey;
 (function (AuditLogsActionKey) {
     AuditLogsActionKey["GetAuditLogs"] = "getAuditLogs";
+    AuditLogsActionKey["GetAuditLogDetail"] = "getAuditLogDetail";
 })(AuditLogsActionKey || (AuditLogsActionKey = {}));
 
 class GetAuditLogs {
     page;
     pageSize;
     filters;
-    static type = '[AuditLogs] Get Audit Logs';
-    constructor(page, pageSize, filters) {
+    static type = '[AuditLogs] Get Audit Trail Search';
+    constructor(page = 1, pageSize = 20, filters = {}) {
         this.page = page;
         this.pageSize = pageSize;
         this.filters = filters;
     }
 }
+class GetAuditLogDetail {
+    eventId;
+    language;
+    static type = '[AuditLogs] Get Audit Trail Detail';
+    constructor(eventId, language) {
+        this.eventId = eventId;
+        this.language = language;
+    }
+}
+class ClearAuditLogDetail {
+    static type = '[AuditLogs] Clear Audit Trail Detail';
+}
 
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -61,67 +89,135 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+const DEFAULT_SEARCH_RESPONSE = {
+    totalCount: 0,
+    page: 1,
+    pageSize: 20,
+    items: [],
+};
 let AuditLogsState = class AuditLogsState extends CrudStateBase {
     http = inject(HttpClient);
-    // ============================================================================
-    // Selectors - Individual data selectors for fine-grained reactivity
-    // ============================================================================
+    context = new HttpContext().set(REQUEST_CONTEXT, {
+        useBaseUrl: false,
+    });
+    baseUrl = 'control-panel/audit-trail';
     static getAuditLogs(state) {
         return state.auditLogs;
     }
-    static getPage(state) {
-        return state.page;
+    static getFilters(state) {
+        return state.filters;
     }
-    static getPageSize(state) {
-        return state.pageSize;
+    static getSelectedEventId(state) {
+        return state.selectedEventId;
+    }
+    static getSelectedEventDetail(state) {
+        return state.selectedEventDetail;
     }
-    // ============================================================================
-    // Loading/Error Slice Selectors - REQUIRED for optimal performance
-    // ============================================================================
     static getLoadingActive(state) {
         return state.loadingActive;
     }
     static getErrors(state) {
         return state.errors;
     }
-    // ============================================================================
-    // Actions
-    // ============================================================================
     getAuditLogs(ctx, { page, pageSize, filters }) {
-        const params = {
-            page: page.toString(),
-            pageSize: pageSize.toString(),
+        const query = this.buildQueryParams({
             ...filters,
-        };
-        const req$ = this.http.get(`app/audittrail`, {
-            params: params,
+            page: String(page),
+            pageSize: String(pageSize),
         });
         return handleApiRequest({
             ctx,
             key: AuditLogsActionKey.GetAuditLogs,
-            request$: req$,
+            request$: this.http.get(`${this.baseUrl}/search`, {
+                params: query,
+                context: this.context,
+            }),
             onSuccess: (response) => ({
-                auditLogs: response.data ?? [],
-                page,
-                pageSize,
+                auditLogs: response.data
+                    ? {
+                        ...DEFAULT_SEARCH_RESPONSE,
+                        ...response.data,
+                        items: response.data.items ?? [],
+                    }
+                    : {
+                        ...DEFAULT_SEARCH_RESPONSE,
+                        page,
+                        pageSize,
+                    },
+                filters: this.sanitizeFilters(filters),
+            }),
+            onError: () => ({
+                filters: this.sanitizeFilters(filters),
             }),
         });
     }
+    getAuditLogDetail(ctx, { eventId, language }) {
+        ctx.patchState({
+            selectedEventId: eventId,
+            selectedEventDetail: null,
+        });
+        return handleApiRequest({
+            ctx,
+            key: AuditLogsActionKey.GetAuditLogDetail,
+            request$: this.http.get(`${this.baseUrl}/events/${encodeURIComponent(eventId)}`, {
+                params: this.buildQueryParams(language ? { language } : undefined),
+                context: this.context,
+            }),
+            onSuccess: (response, state) => state.selectedEventId === eventId
+                ? {
+                    selectedEventDetail: response.data ?? null,
+                }
+                : {},
+            onError: (_error, state) => state.selectedEventId === eventId
+                ? {
+                    selectedEventDetail: null,
+                }
+                : {},
+        });
+    }
+    clearAuditLogDetail(ctx) {
+        ctx.patchState({
+            selectedEventId: null,
+            selectedEventDetail: null,
+        });
+    }
+    buildQueryParams(query) {
+        return Object.entries(query ?? {}).reduce((params, [key, value]) => {
+            if (value === null || value === undefined || value.trim() === '') {
+                return params;
+            }
+            params[key] = value;
+            return params;
+        }, {});
+    }
+    sanitizeFilters(filters) {
+        const { language: _language, ...rest } = filters;
+        return rest;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AuditLogsState, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AuditLogsState });
 };
 __decorate([
     Action(GetAuditLogs)
 ], AuditLogsState.prototype, "getAuditLogs", null);
+__decorate([
+    Action(GetAuditLogDetail)
+], AuditLogsState.prototype, "getAuditLogDetail", null);
+__decorate([
+    Action(ClearAuditLogDetail)
+], AuditLogsState.prototype, "clearAuditLogDetail", null);
 __decorate([
     Selector()
 ], AuditLogsState, "getAuditLogs", null);
 __decorate([
     Selector()
-], AuditLogsState, "getPage", null);
+], AuditLogsState, "getFilters", null);
+__decorate([
+    Selector()
+], AuditLogsState, "getSelectedEventId", null);
 __decorate([
     Selector()
-], AuditLogsState, "getPageSize", null);
+], AuditLogsState, "getSelectedEventDetail", null);
 __decorate([
     Selector()
 ], AuditLogsState, "getLoadingActive", null);
@@ -132,9 +228,10 @@ AuditLogsState = __decorate([
     State({
         name: 'auditLogs',
         defaults: {
-            auditLogs: { items: [] },
-            page: 1,
-            pageSize: 10,
+            auditLogs: DEFAULT_SEARCH_RESPONSE,
+            filters: {},
+            selectedEventId: null,
+            selectedEventDetail: null,
             loadingActive: [],
             errors: {},
         },
@@ -142,35 +239,30 @@ AuditLogsState = __decorate([
 ], AuditLogsState);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AuditLogsState, decorators: [{
             type: Injectable
-        }], propDecorators: { getAuditLogs: [] } });
+        }], propDecorators: { getAuditLogs: [], getAuditLogDetail: [], clearAuditLogDetail: [] } });
 
 class AuditLogsFacade {
     store = inject(Store);
-    // ============================================================================
-    // Data Selectors - Memoized by NGXS (fine-grained reactivity)
-    // ============================================================================
     auditLogs = select(AuditLogsState.getAuditLogs);
-    page = select(AuditLogsState.getPage);
-    pageSize = select(AuditLogsState.getPageSize);
-    // ============================================================================
-    // Loading/Error Slices - Memoized by NGXS
-    // ============================================================================
+    filters = select(AuditLogsState.getFilters);
+    selectedEventId = select(AuditLogsState.getSelectedEventId);
+    selectedEventDetail = select(AuditLogsState.getSelectedEventDetail);
     loadingActive = select(AuditLogsState.getLoadingActive);
     errors = select(AuditLogsState.getErrors);
-    // ============================================================================
-    // Loading Signals - Computed from slice (minimal reactivity)
-    // ============================================================================
     isLoadingAuditLogs = computed(() => this.loadingActive().includes(AuditLogsActionKey.GetAuditLogs), ...(ngDevMode ? [{ debugName: "isLoadingAuditLogs" }] : []));
-    // ============================================================================
-    // Error Signals - Computed from slice (minimal reactivity)
-    // ============================================================================
+    isLoadingAuditLogDetail = computed(() => this.loadingActive().includes(AuditLogsActionKey.GetAuditLogDetail), ...(ngDevMode ? [{ debugName: "isLoadingAuditLogDetail" }] : []));
     getAuditLogsError = computed(() => this.errors()[AuditLogsActionKey.GetAuditLogs] ?? null, ...(ngDevMode ? [{ debugName: "getAuditLogsError" }] : []));
-    // ============================================================================
-    // Action Dispatchers
-    // ============================================================================
-    getAuditLogs(page = 1, pageSize = 10, filters) {
+    getAuditLogDetailError = computed(() => this.errors()[AuditLogsActionKey.GetAuditLogDetail] ?? null, ...(ngDevMode ? [{ debugName: "getAuditLogDetailError" }] : []));
+    activeFilterCount = computed(() => Object.values(this.filters()).filter((value) => value !== null && value !== undefined && value !== '').length, ...(ngDevMode ? [{ debugName: "activeFilterCount" }] : []));
+    getAuditLogs(page = 1, pageSize = 20, filters = {}) {
         return this.store.dispatch(new GetAuditLogs(page, pageSize, filters));
     }
+    getAuditLogDetail(eventId, language) {
+        return this.store.dispatch(new GetAuditLogDetail(eventId, language));
+    }
+    clearAuditLogDetail() {
+        return this.store.dispatch(new ClearAuditLogDetail());
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AuditLogsFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AuditLogsFacade, providedIn: 'root' });
 }
@@ -179,6 +271,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
+const FALLBACK_STATUS_COLOR = '#475569';
+const STATUS_COLOR_MAPS = {
+    category: {
+        Runtime: '#047857',
+        ControlPanel: '#0369a1',
+        Discussion: '#7c3aed',
+        Process: '#0f766e',
+        Escalation: '#c2410c',
+        PhaseGate: '#0e7490',
+        Governance: '#b45309',
+        System: '#475569',
+    },
+    operation: {
+        Create: '#047857',
+        Update: '#0369a1',
+        Delete: '#be123c',
+        Close: '#475569',
+        Move: '#b45309',
+        Progress: '#0e7490',
+        Configure: '#4338ca',
+        Comment: '#7c3aed',
+        BulkUpdate: '#1d4ed8',
+        Change: '#0369a1',
+        Unknown: '#475569',
+    },
+    importance: {
+        Low: '#475569',
+        Medium: '#0369a1',
+        High: '#b45309',
+        Critical: '#be123c',
+    },
+    surface: {
+        Runtime: '#047857',
+        ControlPanel: '#4338ca',
+        Background: '#b45309',
+        System: '#475569',
+    },
+};
+const STATUS_LABELS = {
+    category: 'Category',
+    operation: 'Operation',
+    importance: 'Importance',
+    surface: 'Surface',
+};
+function getAuditStatusMap(kind) {
+    return Object.fromEntries(Object.entries(STATUS_COLOR_MAPS[kind]).map(([key, color]) => [
+        key,
+        { color },
+    ]));
+}
+function getAuditStatusColor(kind, code) {
+    if (!code) {
+        return FALLBACK_STATUS_COLOR;
+    }
+    return STATUS_COLOR_MAPS[kind][code] ?? FALLBACK_STATUS_COLOR;
+}
+function getAuditStatusEntity(kind, item) {
+    const display = item?.label || item?.code;
+    const code = item?.code || display;
+    if (!display || !code) {
+        return null;
+    }
+    return {
+        name: STATUS_LABELS[kind],
+        viewType: 'Status',
+        value: {
+            key: code,
+            display,
+            color: getAuditStatusColor(kind, code),
+        },
+        configuration: {
+            hideName: true,
+        },
+    };
+}
+
 /**
  * Recursively normalizes Date objects to YYYY-MM-DDTHH:mm:ss format.
  * Prevents UTC timezone leaks by converting dates to local datetime strings.
@@ -210,82 +378,422 @@ function normalizeDates(value) {
     return value;
 }
 
+class AuditLogDetailDrawer {
+    modal = inject(ModalService);
+    visible = input(false, ...(ngDevMode ? [{ debugName: "visible" }] : []));
+    detail = input(null, ...(ngDevMode ? [{ debugName: "detail" }] : []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    visibleChange = output();
+    expandedEvidence = signal({}, ...(ngDevMode ? [{ debugName: "expandedEvidence" }] : []));
+    drawerTitle = computed(() => this.detail()?.summary ?? '', ...(ngDevMode ? [{ debugName: "drawerTitle" }] : []));
+    constructor() {
+        effect(() => {
+            this.detail()?.eventId;
+            this.expandedEvidence.set({});
+        });
+    }
+    onDrawerVisibleChange(visible) {
+        this.visibleChange.emit(visible);
+    }
+    getStatusEntity(kind, item) {
+        return getAuditStatusEntity(kind, item);
+    }
+    isEmptyValue(value) {
+        return value === null || value === undefined || value === '';
+    }
+    formatValue(value, valueKind) {
+        if (this.isEmptyValue(value)) {
+            return '';
+        }
+        if (this.isJsonValue(valueKind, value)) {
+            return this.formatJson(value);
+        }
+        if (valueKind === 'Boolean') {
+            if (value === 'true') {
+                return 'True';
+            }
+            if (value === 'false') {
+                return 'False';
+            }
+        }
+        return value ?? '';
+    }
+    isJsonValue(valueKind, value) {
+        if (valueKind === 'Json') {
+            return true;
+        }
+        const trimmed = value?.trim();
+        return !!trimmed && (trimmed.startsWith('{') || trimmed.startsWith('['));
+    }
+    formatJson(value) {
+        if (!value) {
+            return '';
+        }
+        try {
+            return JSON.stringify(JSON.parse(value), null, 2);
+        }
+        catch {
+            return value;
+        }
+    }
+    getFieldLabel(change) {
+        return change.fieldLabel || this.humanizeKey(change.fieldKey);
+    }
+    getChangeSource(change) {
+        return change.changeSource ? this.humanizeKey(change.changeSource) : null;
+    }
+    getSubjectLabel(subject) {
+        return (subject.label ||
+            `${this.humanizeKey(subject.subjectType)} ${subject.subjectId}`.trim());
+    }
+    getActorUserEntity(value) {
+        if (!value) {
+            return null;
+        }
+        return {
+            viewType: 'User',
+            value,
+        };
+    }
+    isEvidenceExpanded(index) {
+        return !!this.expandedEvidence()[String(index)];
+    }
+    toggleEvidence(index) {
+        const key = String(index);
+        this.expandedEvidence.update((state) => ({
+            ...state,
+            [key]: !state[key],
+        }));
+    }
+    humanizeKey(value) {
+        if (!value) {
+            return '';
+        }
+        return value
+            .replace(/[_-]+/g, ' ')
+            .replace(/\s+/g, ' ')
+            .trim()
+            .replace(/\b\w/g, (char) => char.toUpperCase());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AuditLogDetailDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: AuditLogDetailDrawer, isStandalone: true, selector: "mt-audit-log-detail-drawer", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, detail: { classPropertyName: "detail", publicName: "detail", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange" }, host: { classAttribute: "block h-full" }, ngImport: i0, template: "<mt-drawer\n  [visible]=\"visible()\"\n  [title]=\"drawerTitle()\"\n  [loadingHeader]=\"loading()\"\n  styleClass=\"mt-audit-log-drawer !absolute !w-[90%] xl:!w-[68rem]\"\n  appendTo=\"page-content\"\n  position=\"right\"\n  (visibleChange)=\"onDrawerVisibleChange($event)\"\n  *transloco=\"let t; prefix: 'audit-logs'\"\n>\n  <ng-container content>\n    @if (loading()) {\n      <div [class]=\"modal.contentClass + ' h-full overflow-y-auto p-5'\">\n        <div class=\"flex flex-col gap-5\">\n          <div class=\"flex flex-wrap gap-3\">\n            @for (_ of [1, 2, 3, 4]; track $index) {\n              <p-skeleton width=\"7rem\" height=\"2rem\" borderRadius=\"0.5rem\" />\n            }\n          </div>\n\n          <div class=\"grid gap-5 xl:grid-cols-[minmax(0,1.35fr)_minmax(18rem,0.85fr)]\">\n            <div class=\"flex flex-col gap-5\">\n              <mt-card [title]=\"t('drawer.change-groups')\">\n                <div class=\"flex flex-col gap-4\">\n                  <p-skeleton height=\"12rem\" borderRadius=\"1rem\" />\n                  <p-skeleton height=\"14rem\" borderRadius=\"1rem\" />\n                </div>\n              </mt-card>\n\n              <mt-card [title]=\"t('drawer.evidence')\">\n                <div class=\"flex flex-col gap-4\">\n                  <p-skeleton height=\"9rem\" borderRadius=\"1rem\" />\n                </div>\n              </mt-card>\n            </div>\n\n            <div class=\"flex flex-col gap-5\">\n              <mt-card [title]=\"t('drawer.request-context')\">\n                <div class=\"flex flex-col gap-4\">\n                  <p-skeleton height=\"1rem\" borderRadius=\"0.5rem\" />\n                  <p-skeleton height=\"1rem\" borderRadius=\"0.5rem\" />\n                  <p-skeleton height=\"1rem\" borderRadius=\"0.5rem\" />\n                  <p-skeleton height=\"1rem\" borderRadius=\"0.5rem\" />\n                  <p-skeleton height=\"3rem\" borderRadius=\"0.75rem\" />\n                </div>\n              </mt-card>\n\n              <mt-card [title]=\"t('drawer.subjects')\">\n                <div class=\"flex flex-col gap-4\">\n                  <p-skeleton height=\"8rem\" borderRadius=\"1rem\" />\n                </div>\n              </mt-card>\n            </div>\n          </div>\n        </div>\n      </div>\n    } @else if (error(); as errorMessage) {\n      <div [class]=\"modal.contentClass + ' h-full overflow-y-auto p-5'\">\n        <mt-card class=\"min-h-[28rem]\">\n          <div\n            class=\"flex min-h-[28rem] items-center justify-center p-6 text-center\"\n          >\n            <p class=\"max-w-2xl text-sm font-medium text-rose-700\">\n              {{ errorMessage }}\n            </p>\n          </div>\n        </mt-card>\n      </div>\n    } @else if (detail(); as event) {\n      <div [class]=\"modal.contentClass + ' h-full overflow-y-auto p-5'\">\n        <div class=\"flex flex-col gap-5\">\n          <div\n            class=\"grid gap-5 xl:grid-cols-[minmax(0,1.35fr)_minmax(18rem,0.85fr)]\"\n          >\n            <div class=\"flex min-w-0 flex-col gap-5\">\n              <mt-card [title]=\"t('drawer.change-groups')\">\n                @if (event.changeGroups.length > 0) {\n                  @let hasMultipleChangeGroups = event.changeGroups.length > 1;\n                  <div class=\"flex flex-col gap-5\">\n                    @for (group of event.changeGroups; track group.key) {\n                      @if (hasMultipleChangeGroups) {\n                        <div\n                          class=\"overflow-hidden rounded-xl border border-surface-200\"\n                        >\n                          <div class=\"border-b border-surface-200 px-4 py-3\">\n                            <h5 class=\"font-semibold text-surface-900\">\n                              {{ group.label || humanizeKey(group.key) }}\n                            </h5>\n                          </div>\n\n                          <div class=\"divide-y divide-surface-100\">\n                            @for (\n                              change of group.changes;\n                              track change.fieldKey + \"-\" + $index\n                            ) {\n                              <div class=\"flex flex-col gap-3 px-4 py-4\">\n                                <div\n                                  class=\"flex flex-wrap items-start justify-between gap-2\"\n                                >\n                                  <div class=\"flex flex-col gap-1\">\n                                    <span class=\"font-medium text-surface-900\">\n                                      {{ getFieldLabel(change) }}\n                                    </span>\n\n                                    <div\n                                      class=\"flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-surface-500\"\n                                    >\n                                      @if (\n                                        getChangeSource(change);\n                                        as changeSource\n                                      ) {\n                                        <span>\n                                          {{ t(\"drawer.change-source\") }}:\n                                          {{ changeSource }}\n                                        </span>\n                                      }\n\n                                      <span>\n                                        {{ t(\"drawer.value-kind\") }}:\n                                        {{ change.valueKind }}\n                                      </span>\n                                    </div>\n                                  </div>\n                                </div>\n\n                                <div\n                                  class=\"grid gap-3 lg:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)]\"\n                                >\n                                  <div\n                                    class=\"rounded-xl border border-surface-200 bg-surface-50 p-4\"\n                                  >\n                                    <p\n                                      class=\"mb-2 text-xs font-semibold uppercase tracking-[0.18em] text-surface-500\"\n                                    >\n                                      {{ t(\"drawer.from\") }}\n                                    </p>\n\n                                    @if (isEmptyValue(change.oldValue)) {\n                                      <span class=\"text-sm text-surface-400\">\n                                        {{ t(\"drawer.empty-value\") }}\n                                      </span>\n                                    } @else if (\n                                      isJsonValue(\n                                        change.valueKind,\n                                        change.oldValue\n                                      )\n                                    ) {\n                                      <pre class=\"audit-json-value\">{{\n                                        formatValue(\n                                          change.oldValue,\n                                          change.valueKind\n                                        )\n                                      }}</pre>\n                                    } @else {\n                                      <span class=\"text-sm text-surface-700\">\n                                        {{\n                                          formatValue(\n                                            change.oldValue,\n                                            change.valueKind\n                                          )\n                                        }}\n                                      </span>\n                                    }\n                                  </div>\n\n                                  <div\n                                    class=\"flex items-center justify-center text-xl text-surface-300\"\n                                  >\n                                    -&gt;\n                                  </div>\n\n                                  <div\n                                    class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\"\n                                  >\n                                    <p\n                                      class=\"mb-2 text-xs font-semibold uppercase tracking-[0.18em] text-surface-500\"\n                                    >\n                                      {{ t(\"drawer.to\") }}\n                                    </p>\n\n                                    @if (isEmptyValue(change.newValue)) {\n                                      <span class=\"text-sm text-surface-500\">\n                                        {{ t(\"drawer.empty-value\") }}\n                                      </span>\n                                    } @else if (\n                                      isJsonValue(\n                                        change.valueKind,\n                                        change.newValue\n                                      )\n                                    ) {\n                                      <pre class=\"audit-json-value\">{{\n                                        formatValue(\n                                          change.newValue,\n                                          change.valueKind\n                                        )\n                                      }}</pre>\n                                    } @else {\n                                      <span class=\"text-sm text-surface-700\">\n                                        {{\n                                          formatValue(\n                                            change.newValue,\n                                            change.valueKind\n                                          )\n                                        }}\n                                      </span>\n                                    }\n                                  </div>\n                                </div>\n                              </div>\n                            }\n                          </div>\n                        </div>\n                      } @else {\n                        <div class=\"flex flex-col gap-4\">\n                          @if (group.label || group.key) {\n                            <h5 class=\"font-semibold text-surface-900\">\n                              {{ group.label || humanizeKey(group.key) }}\n                            </h5>\n                          }\n\n                          <div class=\"flex flex-col gap-5\">\n                            @for (\n                              change of group.changes;\n                              track change.fieldKey + \"-\" + $index\n                            ) {\n                              <div class=\"flex flex-col gap-3\">\n                                <div\n                                  class=\"flex flex-wrap items-start justify-between gap-2\"\n                                >\n                                  <div class=\"flex flex-col gap-1\">\n                                    <span class=\"font-medium text-surface-900\">\n                                      {{ getFieldLabel(change) }}\n                                    </span>\n\n                                    <div\n                                      class=\"flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-surface-500\"\n                                    >\n                                      @if (\n                                        getChangeSource(change);\n                                        as changeSource\n                                      ) {\n                                        <span>\n                                          {{ t(\"drawer.change-source\") }}:\n                                          {{ changeSource }}\n                                        </span>\n                                      }\n\n                                      <span>\n                                        {{ t(\"drawer.value-kind\") }}:\n                                        {{ change.valueKind }}\n                                      </span>\n                                    </div>\n                                  </div>\n                                </div>\n\n                                <div\n                                  class=\"grid gap-3 lg:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)]\"\n                                >\n                                  <div\n                                    class=\"rounded-xl border border-surface-200 bg-surface-50 p-4\"\n                                  >\n                                    <p\n                                      class=\"mb-2 text-xs font-semibold uppercase tracking-[0.18em] text-surface-500\"\n                                    >\n                                      {{ t(\"drawer.from\") }}\n                                    </p>\n\n                                    @if (isEmptyValue(change.oldValue)) {\n                                      <span class=\"text-sm text-surface-400\">\n                                        {{ t(\"drawer.empty-value\") }}\n                                      </span>\n                                    } @else if (\n                                      isJsonValue(\n                                        change.valueKind,\n                                        change.oldValue\n                                      )\n                                    ) {\n                                      <pre class=\"audit-json-value\">{{\n                                        formatValue(\n                                          change.oldValue,\n                                          change.valueKind\n                                        )\n                                      }}</pre>\n                                    } @else {\n                                      <span class=\"text-sm text-surface-700\">\n                                        {{\n                                          formatValue(\n                                            change.oldValue,\n                                            change.valueKind\n                                          )\n                                        }}\n                                      </span>\n                                    }\n                                  </div>\n\n                                  <div\n                                    class=\"flex items-center justify-center text-xl text-surface-300\"\n                                  >\n                                    -&gt;\n                                  </div>\n\n                                  <div\n                                    class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\"\n                                  >\n                                    <p\n                                      class=\"mb-2 text-xs font-semibold uppercase tracking-[0.18em] text-surface-500\"\n                                    >\n                                      {{ t(\"drawer.to\") }}\n                                    </p>\n\n                                    @if (isEmptyValue(change.newValue)) {\n                                      <span class=\"text-sm text-surface-500\">\n                                        {{ t(\"drawer.empty-value\") }}\n                                      </span>\n                                    } @else if (\n                                      isJsonValue(\n                                        change.valueKind,\n                                        change.newValue\n                                      )\n                                    ) {\n                                      <pre class=\"audit-json-value\">{{\n                                        formatValue(\n                                          change.newValue,\n                                          change.valueKind\n                                        )\n                                      }}</pre>\n                                    } @else {\n                                      <span class=\"text-sm text-surface-700\">\n                                        {{\n                                          formatValue(\n                                            change.newValue,\n                                            change.valueKind\n                                          )\n                                        }}\n                                      </span>\n                                    }\n                                  </div>\n                                </div>\n                              </div>\n                            }\n                          </div>\n                        </div>\n                      }\n                    }\n                  </div>\n                } @else {\n                  <div class=\"text-sm text-surface-500\">\n                    {{ t(\"drawer.no-changes\") }}\n                  </div>\n                }\n              </mt-card>\n            </div>\n\n            <div class=\"flex min-w-0 flex-col gap-5\">\n              <mt-card [title]=\"t('drawer.request-context')\">\n                <dl class=\"grid gap-4\">\n                  <div class=\"grid gap-1\">\n                    <dt class=\"text-xs font-semibold uppercase text-surface-500\">\n                      {{ t(\"drawer.actor\") }}\n                    </dt>\n                    <dd class=\"text-sm text-surface-800\">\n                      @if (\n                        getActorUserEntity(event.requestContext.actorUser);\n                        as actorUserEntity\n                      ) {\n                        <mt-entity-user [data]=\"actorUserEntity\" />\n                      } @else {\n                        <span class=\"break-all\">\n                          {{ event.requestContext.actorUserId || \"system\" }}\n                        </span>\n                      }\n                    </dd>\n                  </div>\n\n                  <div class=\"grid gap-1\">\n                    <dt class=\"text-xs font-semibold uppercase text-surface-500\">\n                      {{ t(\"drawer.occurred-at\") }}\n                    </dt>\n                    <dd class=\"text-sm text-surface-800\">\n                      {{ event.requestContext.occurredAtUtc | date: \"medium\" }}\n                    </dd>\n                  </div>\n\n                  <div class=\"grid gap-1\">\n                    <dt class=\"text-xs font-semibold uppercase text-surface-500\">\n                      {{ t(\"category\") }}\n                    </dt>\n                    <dd>\n                      @if (getStatusEntity('category', event.category); as status) {\n                        <mt-entity-status [data]=\"status\" />\n                      }\n                    </dd>\n                  </div>\n\n                  <div class=\"grid gap-1\">\n                    <dt class=\"text-xs font-semibold uppercase text-surface-500\">\n                      {{ t(\"operation\") }}\n                    </dt>\n                    <dd>\n                      @if (\n                        getStatusEntity('operation', event.operation);\n                        as status\n                      ) {\n                        <mt-entity-status [data]=\"status\" />\n                      }\n                    </dd>\n                  </div>\n\n                  <div class=\"grid gap-1\">\n                    <dt class=\"text-xs font-semibold uppercase text-surface-500\">\n                      {{ t(\"importance\") }}\n                    </dt>\n                    <dd>\n                      @if (\n                        getStatusEntity('importance', event.importance);\n                        as status\n                      ) {\n                        <mt-entity-status [data]=\"status\" />\n                      }\n                    </dd>\n                  </div>\n\n                  <div class=\"grid gap-1\">\n                    <dt class=\"text-xs font-semibold uppercase text-surface-500\">\n                      {{ t(\"surface\") }}\n                    </dt>\n                    <dd>\n                      @if (getStatusEntity('surface', event.surface); as status) {\n                        <mt-entity-status [data]=\"status\" />\n                      }\n                    </dd>\n                  </div>\n                </dl>\n              </mt-card>\n\n              <mt-card [title]=\"t('drawer.subjects')\">\n                @if (event.subjects.length > 0) {\n                  <div\n                    class=\"overflow-hidden rounded-xl border border-surface-200\"\n                  >\n                    <div class=\"divide-y divide-surface-100\">\n                      @for (\n                        subject of event.subjects;\n                        track subject.subjectType + \"-\" + subject.subjectId\n                      ) {\n                        <div class=\"flex flex-col gap-3 px-4 py-4\">\n                          <div\n                            class=\"flex flex-wrap items-start justify-between gap-3\"\n                          >\n                            <div class=\"flex flex-col gap-1\">\n                              <span class=\"font-medium text-surface-900\">\n                                {{ getSubjectLabel(subject) }}\n                              </span>\n                              <span class=\"text-xs text-surface-500\">\n                                {{ humanizeKey(subject.subjectType) }}\n                              </span>\n                            </div>\n\n                            <span\n                              class=\"rounded-full bg-surface-100 px-3 py-1 text-xs font-medium text-surface-700\"\n                            >\n                              {{ humanizeKey(subject.relation) }}\n                            </span>\n                          </div>\n\n                          <div\n                            class=\"flex flex-wrap gap-2 text-xs text-surface-500\"\n                          >\n                            <span class=\"rounded-full bg-surface-100 px-3 py-1\">\n                              {{ t(\"drawer.scope\") }}: {{ subject.subjectId }}\n                            </span>\n                            @if (\n                              subject.levelId !== null &&\n                              subject.levelId !== undefined\n                            ) {\n                              <span class=\"rounded-full bg-surface-100 px-3 py-1\">\n                                {{ t(\"drawer.level-id\") }}:\n                                {{ subject.levelId }}\n                              </span>\n                            }\n                            @if (\n                              subject.levelDataId !== null &&\n                              subject.levelDataId !== undefined\n                            ) {\n                              <span class=\"rounded-full bg-surface-100 px-3 py-1\">\n                                {{ t(\"drawer.level-data-id\") }}:\n                                {{ subject.levelDataId }}\n                              </span>\n                            }\n                            @if (\n                              subject.moduleDataId !== null &&\n                              subject.moduleDataId !== undefined\n                            ) {\n                              <span class=\"rounded-full bg-surface-100 px-3 py-1\">\n                                {{ t(\"drawer.module-data-id\") }}:\n                                {{ subject.moduleDataId }}\n                              </span>\n                            }\n                            @if (subject.moduleKey) {\n                              <span class=\"rounded-full bg-surface-100 px-3 py-1\">\n                                {{ t(\"drawer.module-key\") }}:\n                                {{ subject.moduleKey }}\n                              </span>\n                            }\n                          </div>\n                        </div>\n                      }\n                    </div>\n                  </div>\n                } @else {\n                  <div class=\"text-sm text-surface-500\">\n                    {{ t(\"drawer.no-subjects\") }}\n                  </div>\n                }\n              </mt-card>\n            </div>\n          </div>\n\n          <mt-card [title]=\"t('drawer.evidence')\">\n            <p class=\"mb-4 text-sm text-surface-500\">\n              {{ t(\"drawer.advanced-description\") }}\n            </p>\n\n            @if (event.evidence.length > 0) {\n              <div class=\"overflow-hidden rounded-xl border border-surface-200\">\n                <div class=\"divide-y divide-surface-100\">\n                  @for (\n                    evidence of event.evidence;\n                    track evidence.type + \"-\" + $index\n                  ) {\n                    <section>\n                      <div\n                        class=\"flex flex-wrap items-center justify-between gap-3 px-4 py-3\"\n                      >\n                        <span class=\"font-medium text-surface-900\">\n                          {{ evidence.type || t(\"drawer.technical-evidence\") }}\n                        </span>\n\n                        <mt-button\n                          [label]=\"t('drawer.view-json')\"\n                          severity=\"secondary\"\n                          variant=\"text\"\n                          size=\"small\"\n                          (onClick)=\"toggleEvidence($index)\"\n                        />\n                      </div>\n\n                      @if (isEvidenceExpanded($index)) {\n                        <pre class=\"audit-json-panel\">{{\n                          formatJson(evidence.contentJson)\n                        }}</pre>\n                      }\n                    </section>\n                  }\n                </div>\n              </div>\n            } @else {\n              <div class=\"text-sm text-surface-500\">\n                {{ t(\"drawer.no-evidence\") }}\n              </div>\n            }\n          </mt-card>\n        </div>\n      </div>\n    } @else {\n      <div [class]=\"modal.contentClass + ' h-full overflow-y-auto p-5'\">\n        <mt-card class=\"min-h-[28rem]\">\n          <div\n            class=\"flex min-h-[28rem] items-center justify-center p-6 text-center\"\n          >\n            <p class=\"max-w-2xl text-sm text-surface-500\">\n              {{ t(\"drawer.no-event-selected\") }}\n            </p>\n          </div>\n        </mt-card>\n      </div>\n    }\n  </ng-container>\n</mt-drawer>\n", styles: [":host{display:block}.audit-json-panel,.audit-json-value{margin:0;overflow-x:auto;white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.audit-json-panel{border-top:1px solid var(--p-surface-100);background:color-mix(in srgb,var(--p-surface-50) 80%,white);padding:1rem;font-size:.8rem;line-height:1.55}.audit-json-value{font-size:.78rem;line-height:1.55;color:var(--p-surface-700)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Drawer, selector: "mt-drawer", inputs: ["visible", "position", "fullScreen", "closeOnEscape", "blockScroll", "dismissible", "title", "subtitle", "loadingHeader", "styleClass", "transitionOptions", "appendTo", "modal"], outputs: ["visibleChange", "onShow", "onHide"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: EntityStatus, selector: "mt-entity-status", inputs: ["data", "name", "value"] }, { kind: "component", type: EntityUser, selector: "mt-entity-user", inputs: ["data"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AuditLogDetailDrawer, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-audit-log-detail-drawer', imports: [
+                        CommonModule,
+                        TranslocoDirective,
+                        Drawer,
+                        Button,
+                        Card,
+                        EntityStatus,
+                        EntityUser,
+                        SkeletonModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'block h-full',
+                    }, template: "<mt-drawer\n  [visible]=\"visible()\"\n  [title]=\"drawerTitle()\"\n  [loadingHeader]=\"loading()\"\n  styleClass=\"mt-audit-log-drawer !absolute !w-[90%] xl:!w-[68rem]\"\n  appendTo=\"page-content\"\n  position=\"right\"\n  (visibleChange)=\"onDrawerVisibleChange($event)\"\n  *transloco=\"let t; prefix: 'audit-logs'\"\n>\n  <ng-container content>\n    @if (loading()) {\n      <div [class]=\"modal.contentClass + ' h-full overflow-y-auto p-5'\">\n        <div class=\"flex flex-col gap-5\">\n          <div class=\"flex flex-wrap gap-3\">\n            @for (_ of [1, 2, 3, 4]; track $index) {\n              <p-skeleton width=\"7rem\" height=\"2rem\" borderRadius=\"0.5rem\" />\n            }\n          </div>\n\n          <div class=\"grid gap-5 xl:grid-cols-[minmax(0,1.35fr)_minmax(18rem,0.85fr)]\">\n            <div class=\"flex flex-col gap-5\">\n              <mt-card [title]=\"t('drawer.change-groups')\">\n                <div class=\"flex flex-col gap-4\">\n                  <p-skeleton height=\"12rem\" borderRadius=\"1rem\" />\n                  <p-skeleton height=\"14rem\" borderRadius=\"1rem\" />\n                </div>\n              </mt-card>\n\n              <mt-card [title]=\"t('drawer.evidence')\">\n                <div class=\"flex flex-col gap-4\">\n                  <p-skeleton height=\"9rem\" borderRadius=\"1rem\" />\n                </div>\n              </mt-card>\n            </div>\n\n            <div class=\"flex flex-col gap-5\">\n              <mt-card [title]=\"t('drawer.request-context')\">\n                <div class=\"flex flex-col gap-4\">\n                  <p-skeleton height=\"1rem\" borderRadius=\"0.5rem\" />\n                  <p-skeleton height=\"1rem\" borderRadius=\"0.5rem\" />\n                  <p-skeleton height=\"1rem\" borderRadius=\"0.5rem\" />\n                  <p-skeleton height=\"1rem\" borderRadius=\"0.5rem\" />\n                  <p-skeleton height=\"3rem\" borderRadius=\"0.75rem\" />\n                </div>\n              </mt-card>\n\n              <mt-card [title]=\"t('drawer.subjects')\">\n                <div class=\"flex flex-col gap-4\">\n                  <p-skeleton height=\"8rem\" borderRadius=\"1rem\" />\n                </div>\n              </mt-card>\n            </div>\n          </div>\n        </div>\n      </div>\n    } @else if (error(); as errorMessage) {\n      <div [class]=\"modal.contentClass + ' h-full overflow-y-auto p-5'\">\n        <mt-card class=\"min-h-[28rem]\">\n          <div\n            class=\"flex min-h-[28rem] items-center justify-center p-6 text-center\"\n          >\n            <p class=\"max-w-2xl text-sm font-medium text-rose-700\">\n              {{ errorMessage }}\n            </p>\n          </div>\n        </mt-card>\n      </div>\n    } @else if (detail(); as event) {\n      <div [class]=\"modal.contentClass + ' h-full overflow-y-auto p-5'\">\n        <div class=\"flex flex-col gap-5\">\n          <div\n            class=\"grid gap-5 xl:grid-cols-[minmax(0,1.35fr)_minmax(18rem,0.85fr)]\"\n          >\n            <div class=\"flex min-w-0 flex-col gap-5\">\n              <mt-card [title]=\"t('drawer.change-groups')\">\n                @if (event.changeGroups.length > 0) {\n                  @let hasMultipleChangeGroups = event.changeGroups.length > 1;\n                  <div class=\"flex flex-col gap-5\">\n                    @for (group of event.changeGroups; track group.key) {\n                      @if (hasMultipleChangeGroups) {\n                        <div\n                          class=\"overflow-hidden rounded-xl border border-surface-200\"\n                        >\n                          <div class=\"border-b border-surface-200 px-4 py-3\">\n                            <h5 class=\"font-semibold text-surface-900\">\n                              {{ group.label || humanizeKey(group.key) }}\n                            </h5>\n                          </div>\n\n                          <div class=\"divide-y divide-surface-100\">\n                            @for (\n                              change of group.changes;\n                              track change.fieldKey + \"-\" + $index\n                            ) {\n                              <div class=\"flex flex-col gap-3 px-4 py-4\">\n                                <div\n                                  class=\"flex flex-wrap items-start justify-between gap-2\"\n                                >\n                                  <div class=\"flex flex-col gap-1\">\n                                    <span class=\"font-medium text-surface-900\">\n                                      {{ getFieldLabel(change) }}\n                                    </span>\n\n                                    <div\n                                      class=\"flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-surface-500\"\n                                    >\n                                      @if (\n                                        getChangeSource(change);\n                                        as changeSource\n                                      ) {\n                                        <span>\n                                          {{ t(\"drawer.change-source\") }}:\n                                          {{ changeSource }}\n                                        </span>\n                                      }\n\n                                      <span>\n                                        {{ t(\"drawer.value-kind\") }}:\n                                        {{ change.valueKind }}\n                                      </span>\n                                    </div>\n                                  </div>\n                                </div>\n\n                                <div\n                                  class=\"grid gap-3 lg:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)]\"\n                                >\n                                  <div\n                                    class=\"rounded-xl border border-surface-200 bg-surface-50 p-4\"\n                                  >\n                                    <p\n                                      class=\"mb-2 text-xs font-semibold uppercase tracking-[0.18em] text-surface-500\"\n                                    >\n                                      {{ t(\"drawer.from\") }}\n                                    </p>\n\n                                    @if (isEmptyValue(change.oldValue)) {\n                                      <span class=\"text-sm text-surface-400\">\n                                        {{ t(\"drawer.empty-value\") }}\n                                      </span>\n                                    } @else if (\n                                      isJsonValue(\n                                        change.valueKind,\n                                        change.oldValue\n                                      )\n                                    ) {\n                                      <pre class=\"audit-json-value\">{{\n                                        formatValue(\n                                          change.oldValue,\n                                          change.valueKind\n                                        )\n                                      }}</pre>\n                                    } @else {\n                                      <span class=\"text-sm text-surface-700\">\n                                        {{\n                                          formatValue(\n                                            change.oldValue,\n                                            change.valueKind\n                                          )\n                                        }}\n                                      </span>\n                                    }\n                                  </div>\n\n                                  <div\n                                    class=\"flex items-center justify-center text-xl text-surface-300\"\n                                  >\n                                    -&gt;\n                                  </div>\n\n                                  <div\n                                    class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\"\n                                  >\n                                    <p\n                                      class=\"mb-2 text-xs font-semibold uppercase tracking-[0.18em] text-surface-500\"\n                                    >\n                                      {{ t(\"drawer.to\") }}\n                                    </p>\n\n                                    @if (isEmptyValue(change.newValue)) {\n                                      <span class=\"text-sm text-surface-500\">\n                                        {{ t(\"drawer.empty-value\") }}\n                                      </span>\n                                    } @else if (\n                                      isJsonValue(\n                                        change.valueKind,\n                                        change.newValue\n                                      )\n                                    ) {\n                                      <pre class=\"audit-json-value\">{{\n                                        formatValue(\n                                          change.newValue,\n                                          change.valueKind\n                                        )\n                                      }}</pre>\n                                    } @else {\n                                      <span class=\"text-sm text-surface-700\">\n                                        {{\n                                          formatValue(\n                                            change.newValue,\n                                            change.valueKind\n                                          )\n                                        }}\n                                      </span>\n                                    }\n                                  </div>\n                                </div>\n                              </div>\n                            }\n                          </div>\n                        </div>\n                      } @else {\n                        <div class=\"flex flex-col gap-4\">\n                          @if (group.label || group.key) {\n                            <h5 class=\"font-semibold text-surface-900\">\n                              {{ group.label || humanizeKey(group.key) }}\n                            </h5>\n                          }\n\n                          <div class=\"flex flex-col gap-5\">\n                            @for (\n                              change of group.changes;\n                              track change.fieldKey + \"-\" + $index\n                            ) {\n                              <div class=\"flex flex-col gap-3\">\n                                <div\n                                  class=\"flex flex-wrap items-start justify-between gap-2\"\n                                >\n                                  <div class=\"flex flex-col gap-1\">\n                                    <span class=\"font-medium text-surface-900\">\n                                      {{ getFieldLabel(change) }}\n                                    </span>\n\n                                    <div\n                                      class=\"flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-surface-500\"\n                                    >\n                                      @if (\n                                        getChangeSource(change);\n                                        as changeSource\n                                      ) {\n                                        <span>\n                                          {{ t(\"drawer.change-source\") }}:\n                                          {{ changeSource }}\n                                        </span>\n                                      }\n\n                                      <span>\n                                        {{ t(\"drawer.value-kind\") }}:\n                                        {{ change.valueKind }}\n                                      </span>\n                                    </div>\n                                  </div>\n                                </div>\n\n                                <div\n                                  class=\"grid gap-3 lg:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)]\"\n                                >\n                                  <div\n                                    class=\"rounded-xl border border-surface-200 bg-surface-50 p-4\"\n                                  >\n                                    <p\n                                      class=\"mb-2 text-xs font-semibold uppercase tracking-[0.18em] text-surface-500\"\n                                    >\n                                      {{ t(\"drawer.from\") }}\n                                    </p>\n\n                                    @if (isEmptyValue(change.oldValue)) {\n                                      <span class=\"text-sm text-surface-400\">\n                                        {{ t(\"drawer.empty-value\") }}\n                                      </span>\n                                    } @else if (\n                                      isJsonValue(\n                                        change.valueKind,\n                                        change.oldValue\n                                      )\n                                    ) {\n                                      <pre class=\"audit-json-value\">{{\n                                        formatValue(\n                                          change.oldValue,\n                                          change.valueKind\n                                        )\n                                      }}</pre>\n                                    } @else {\n                                      <span class=\"text-sm text-surface-700\">\n                                        {{\n                                          formatValue(\n                                            change.oldValue,\n                                            change.valueKind\n                                          )\n                                        }}\n                                      </span>\n                                    }\n                                  </div>\n\n                                  <div\n                                    class=\"flex items-center justify-center text-xl text-surface-300\"\n                                  >\n                                    -&gt;\n                                  </div>\n\n                                  <div\n                                    class=\"rounded-xl border border-surface-200 bg-surface-0 p-4\"\n                                  >\n                                    <p\n                                      class=\"mb-2 text-xs font-semibold uppercase tracking-[0.18em] text-surface-500\"\n                                    >\n                                      {{ t(\"drawer.to\") }}\n                                    </p>\n\n                                    @if (isEmptyValue(change.newValue)) {\n                                      <span class=\"text-sm text-surface-500\">\n                                        {{ t(\"drawer.empty-value\") }}\n                                      </span>\n                                    } @else if (\n                                      isJsonValue(\n                                        change.valueKind,\n                                        change.newValue\n                                      )\n                                    ) {\n                                      <pre class=\"audit-json-value\">{{\n                                        formatValue(\n                                          change.newValue,\n                                          change.valueKind\n                                        )\n                                      }}</pre>\n                                    } @else {\n                                      <span class=\"text-sm text-surface-700\">\n                                        {{\n                                          formatValue(\n                                            change.newValue,\n                                            change.valueKind\n                                          )\n                                        }}\n                                      </span>\n                                    }\n                                  </div>\n                                </div>\n                              </div>\n                            }\n                          </div>\n                        </div>\n                      }\n                    }\n                  </div>\n                } @else {\n                  <div class=\"text-sm text-surface-500\">\n                    {{ t(\"drawer.no-changes\") }}\n                  </div>\n                }\n              </mt-card>\n            </div>\n\n            <div class=\"flex min-w-0 flex-col gap-5\">\n              <mt-card [title]=\"t('drawer.request-context')\">\n                <dl class=\"grid gap-4\">\n                  <div class=\"grid gap-1\">\n                    <dt class=\"text-xs font-semibold uppercase text-surface-500\">\n                      {{ t(\"drawer.actor\") }}\n                    </dt>\n                    <dd class=\"text-sm text-surface-800\">\n                      @if (\n                        getActorUserEntity(event.requestContext.actorUser);\n                        as actorUserEntity\n                      ) {\n                        <mt-entity-user [data]=\"actorUserEntity\" />\n                      } @else {\n                        <span class=\"break-all\">\n                          {{ event.requestContext.actorUserId || \"system\" }}\n                        </span>\n                      }\n                    </dd>\n                  </div>\n\n                  <div class=\"grid gap-1\">\n                    <dt class=\"text-xs font-semibold uppercase text-surface-500\">\n                      {{ t(\"drawer.occurred-at\") }}\n                    </dt>\n                    <dd class=\"text-sm text-surface-800\">\n                      {{ event.requestContext.occurredAtUtc | date: \"medium\" }}\n                    </dd>\n                  </div>\n\n                  <div class=\"grid gap-1\">\n                    <dt class=\"text-xs font-semibold uppercase text-surface-500\">\n                      {{ t(\"category\") }}\n                    </dt>\n                    <dd>\n                      @if (getStatusEntity('category', event.category); as status) {\n                        <mt-entity-status [data]=\"status\" />\n                      }\n                    </dd>\n                  </div>\n\n                  <div class=\"grid gap-1\">\n                    <dt class=\"text-xs font-semibold uppercase text-surface-500\">\n                      {{ t(\"operation\") }}\n                    </dt>\n                    <dd>\n                      @if (\n                        getStatusEntity('operation', event.operation);\n                        as status\n                      ) {\n                        <mt-entity-status [data]=\"status\" />\n                      }\n                    </dd>\n                  </div>\n\n                  <div class=\"grid gap-1\">\n                    <dt class=\"text-xs font-semibold uppercase text-surface-500\">\n                      {{ t(\"importance\") }}\n                    </dt>\n                    <dd>\n                      @if (\n                        getStatusEntity('importance', event.importance);\n                        as status\n                      ) {\n                        <mt-entity-status [data]=\"status\" />\n                      }\n                    </dd>\n                  </div>\n\n                  <div class=\"grid gap-1\">\n                    <dt class=\"text-xs font-semibold uppercase text-surface-500\">\n                      {{ t(\"surface\") }}\n                    </dt>\n                    <dd>\n                      @if (getStatusEntity('surface', event.surface); as status) {\n                        <mt-entity-status [data]=\"status\" />\n                      }\n                    </dd>\n                  </div>\n                </dl>\n              </mt-card>\n\n              <mt-card [title]=\"t('drawer.subjects')\">\n                @if (event.subjects.length > 0) {\n                  <div\n                    class=\"overflow-hidden rounded-xl border border-surface-200\"\n                  >\n                    <div class=\"divide-y divide-surface-100\">\n                      @for (\n                        subject of event.subjects;\n                        track subject.subjectType + \"-\" + subject.subjectId\n                      ) {\n                        <div class=\"flex flex-col gap-3 px-4 py-4\">\n                          <div\n                            class=\"flex flex-wrap items-start justify-between gap-3\"\n                          >\n                            <div class=\"flex flex-col gap-1\">\n                              <span class=\"font-medium text-surface-900\">\n                                {{ getSubjectLabel(subject) }}\n                              </span>\n                              <span class=\"text-xs text-surface-500\">\n                                {{ humanizeKey(subject.subjectType) }}\n                              </span>\n                            </div>\n\n                            <span\n                              class=\"rounded-full bg-surface-100 px-3 py-1 text-xs font-medium text-surface-700\"\n                            >\n                              {{ humanizeKey(subject.relation) }}\n                            </span>\n                          </div>\n\n                          <div\n                            class=\"flex flex-wrap gap-2 text-xs text-surface-500\"\n                          >\n                            <span class=\"rounded-full bg-surface-100 px-3 py-1\">\n                              {{ t(\"drawer.scope\") }}: {{ subject.subjectId }}\n                            </span>\n                            @if (\n                              subject.levelId !== null &&\n                              subject.levelId !== undefined\n                            ) {\n                              <span class=\"rounded-full bg-surface-100 px-3 py-1\">\n                                {{ t(\"drawer.level-id\") }}:\n                                {{ subject.levelId }}\n                              </span>\n                            }\n                            @if (\n                              subject.levelDataId !== null &&\n                              subject.levelDataId !== undefined\n                            ) {\n                              <span class=\"rounded-full bg-surface-100 px-3 py-1\">\n                                {{ t(\"drawer.level-data-id\") }}:\n                                {{ subject.levelDataId }}\n                              </span>\n                            }\n                            @if (\n                              subject.moduleDataId !== null &&\n                              subject.moduleDataId !== undefined\n                            ) {\n                              <span class=\"rounded-full bg-surface-100 px-3 py-1\">\n                                {{ t(\"drawer.module-data-id\") }}:\n                                {{ subject.moduleDataId }}\n                              </span>\n                            }\n                            @if (subject.moduleKey) {\n                              <span class=\"rounded-full bg-surface-100 px-3 py-1\">\n                                {{ t(\"drawer.module-key\") }}:\n                                {{ subject.moduleKey }}\n                              </span>\n                            }\n                          </div>\n                        </div>\n                      }\n                    </div>\n                  </div>\n                } @else {\n                  <div class=\"text-sm text-surface-500\">\n                    {{ t(\"drawer.no-subjects\") }}\n                  </div>\n                }\n              </mt-card>\n            </div>\n          </div>\n\n          <mt-card [title]=\"t('drawer.evidence')\">\n            <p class=\"mb-4 text-sm text-surface-500\">\n              {{ t(\"drawer.advanced-description\") }}\n            </p>\n\n            @if (event.evidence.length > 0) {\n              <div class=\"overflow-hidden rounded-xl border border-surface-200\">\n                <div class=\"divide-y divide-surface-100\">\n                  @for (\n                    evidence of event.evidence;\n                    track evidence.type + \"-\" + $index\n                  ) {\n                    <section>\n                      <div\n                        class=\"flex flex-wrap items-center justify-between gap-3 px-4 py-3\"\n                      >\n                        <span class=\"font-medium text-surface-900\">\n                          {{ evidence.type || t(\"drawer.technical-evidence\") }}\n                        </span>\n\n                        <mt-button\n                          [label]=\"t('drawer.view-json')\"\n                          severity=\"secondary\"\n                          variant=\"text\"\n                          size=\"small\"\n                          (onClick)=\"toggleEvidence($index)\"\n                        />\n                      </div>\n\n                      @if (isEvidenceExpanded($index)) {\n                        <pre class=\"audit-json-panel\">{{\n                          formatJson(evidence.contentJson)\n                        }}</pre>\n                      }\n                    </section>\n                  }\n                </div>\n              </div>\n            } @else {\n              <div class=\"text-sm text-surface-500\">\n                {{ t(\"drawer.no-evidence\") }}\n              </div>\n            }\n          </mt-card>\n        </div>\n      </div>\n    } @else {\n      <div [class]=\"modal.contentClass + ' h-full overflow-y-auto p-5'\">\n        <mt-card class=\"min-h-[28rem]\">\n          <div\n            class=\"flex min-h-[28rem] items-center justify-center p-6 text-center\"\n          >\n            <p class=\"max-w-2xl text-sm text-surface-500\">\n              {{ t(\"drawer.no-event-selected\") }}\n            </p>\n          </div>\n        </mt-card>\n      </div>\n    }\n  </ng-container>\n</mt-drawer>\n", styles: [":host{display:block}.audit-json-panel,.audit-json-value{margin:0;overflow-x:auto;white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.audit-json-panel{border-top:1px solid var(--p-surface-100);background:color-mix(in srgb,var(--p-surface-50) 80%,white);padding:1rem;font-size:.8rem;line-height:1.55}.audit-json-value{font-size:.78rem;line-height:1.55;color:var(--p-surface-700)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], detail: [{ type: i0.Input, args: [{ isSignal: true, alias: "detail", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], visibleChange: [{ type: i0.Output, args: ["visibleChange"] }] } });
+
+const CATEGORY_OPTIONS = [
+    'Runtime',
+    'ControlPanel',
+    'Discussion',
+    'Process',
+    'Escalation',
+    'PhaseGate',
+    'Governance',
+    'System',
+].map((value) => ({
+    label: value,
+    value,
+}));
+const OPERATION_OPTIONS = [
+    'Create',
+    'Update',
+    'Delete',
+    'Close',
+    'Move',
+    'Progress',
+    'Configure',
+    'Comment',
+    'BulkUpdate',
+    'Change',
+    'Unknown',
+].map((value) => ({
+    label: value,
+    value,
+}));
+const IMPORTANCE_OPTIONS = [
+    'Low',
+    'Medium',
+    'High',
+    'Critical',
+].map((value) => ({
+    label: value,
+    value,
+}));
 class AuditLogsList {
-    userCol = viewChild.required('userCol');
+    summaryCol = viewChild.required('summaryCol');
+    actorCol = viewChild.required('actorCol');
     facade = inject(AuditLogsFacade);
     translocoService = inject(TranslocoService);
-    context = new HttpContext().set(REQUEST_CONTEXT, {
-        useBaseUrl: true,
+    activeLang = toSignal(this.translocoService.langChanges$, {
+        initialValue: this.translocoService.getActiveLang(),
     });
-    auditLogs = computed(() => this.facade.auditLogs()?.items, ...(ngDevMode ? [{ debugName: "auditLogs" }] : []));
-    fullDataAuditLogs = computed(() => this.facade.auditLogs(), ...(ngDevMode ? [{ debugName: "fullDataAuditLogs" }] : []));
-    tableColumns = linkedSignal(() => [
-        {
-            key: 'name',
-            label: this.translocoService.translate('audit-logs.title'),
-        },
-        {
-            key: 'module',
-            label: this.translocoService.translate('audit-logs.module'),
-        },
-        {
-            key: 'originalUserId.userName',
-            label: this.translocoService.translate('audit-logs.user'),
-            type: 'custom',
-            customCellTpl: this.userCol(),
-            filterConfig: {
+    auditLogs = this.facade.auditLogs;
+    appliedFilters = this.facade.filters;
+    loading = this.facade.isLoadingAuditLogs;
+    error = this.facade.getAuditLogsError;
+    detail = this.facade.selectedEventDetail;
+    detailError = this.facade.getAuditLogDetailError;
+    loadingDetail = this.facade.isLoadingAuditLogDetail;
+    drawerVisible = signal(false, ...(ngDevMode ? [{ debugName: "drawerVisible" }] : []));
+    tableFilters = signal({}, ...(ngDevMode ? [{ debugName: "tableFilters" }] : []));
+    summaryCards = computed(() => {
+        this.activeLang();
+        const response = this.auditLogs();
+        const items = response.items ?? [];
+        const elevatedCount = items.filter((item) => ['High', 'Critical'].includes(item.importance?.code ?? '')).length;
+        const uniqueActors = new Set(items
+            .map((item) => item.actorUserId?.trim())
+            .filter((value) => !!value)).size;
+        return [
+            {
+                title: String(response.totalCount ?? 0),
+                subTitle: this.translate('total-events'),
+                icon: 'file.file-05',
+                color: 'blue',
+            },
+            {
+                title: String(items.length),
+                subTitle: this.translate('visible-results'),
+                icon: 'general.building-02',
+                color: 'emerald',
+            },
+            {
+                title: String(elevatedCount),
+                subTitle: this.translate('high-impact'),
+                icon: 'alert.bell-02',
+                color: 'amber',
+            },
+            {
+                title: String(uniqueActors),
+                subTitle: this.translate('unique-actors'),
+                icon: 'custom.user-pp',
+                color: 'violet',
+            },
+        ];
+    }, ...(ngDevMode ? [{ debugName: "summaryCards" }] : []));
+    activeFilterBadges = computed(() => {
+        this.activeLang();
+        const filters = this.appliedFilters();
+        const badges = [];
+        this.pushFilterBadge(badges, this.translate('search'), filters.search);
+        this.pushFilterBadge(badges, this.translate('category'), filters.category);
+        this.pushFilterBadge(badges, this.translate('operation'), filters.operation);
+        this.pushFilterBadge(badges, this.translate('importance'), filters.importance);
+        this.pushFilterBadge(badges, this.translate('surface'), filters.surface);
+        this.pushFilterBadge(badges, this.translate('actor'), filters.actorUserId);
+        if (filters.fromUtc) {
+            badges.push(`${this.translate('from')}: ${this.formatFilterDate(filters.fromUtc)}`);
+        }
+        if (filters.toUtc) {
+            badges.push(`${this.translate('to')}: ${this.formatFilterDate(filters.toUtc)}`);
+        }
+        return badges;
+    }, ...(ngDevMode ? [{ debugName: "activeFilterBadges" }] : []));
+    tableColumns = linkedSignal(() => {
+        this.activeLang();
+        return [
+            {
+                key: 'summary',
+                label: this.translate('summary'),
+                type: 'custom',
+                customCellTpl: this.summaryCol(),
+                width: '27rem',
+            },
+            {
+                key: 'category.code',
+                label: this.translate('category'),
+                type: 'status',
+                statusMap: getAuditStatusMap('category'),
+                filterConfig: {
+                    type: 'select',
+                    label: this.translate('category'),
+                    options: CATEGORY_OPTIONS,
+                },
+                width: '10rem',
+            },
+            {
+                key: 'operation.code',
+                label: this.translate('operation'),
+                type: 'status',
+                statusMap: getAuditStatusMap('operation'),
+                filterConfig: {
+                    type: 'select',
+                    label: this.translate('operation'),
+                    options: OPERATION_OPTIONS,
+                },
+                width: '10rem',
+            },
+            {
+                key: 'importance.code',
+                label: this.translate('importance'),
+                type: 'status',
+                statusMap: getAuditStatusMap('importance'),
+                filterConfig: {
+                    type: 'select',
+                    label: this.translate('importance'),
+                    options: IMPORTANCE_OPTIONS,
+                },
+                width: '10rem',
+            },
+            {
+                key: 'actorUser',
+                label: this.translate('actor'),
                 type: 'user',
-                label: 'User',
-                context: this.context,
-                apiUrl: 'Identity/users',
+                filterConfig: {
+                    type: 'user',
+                    label: this.translate('actor'),
+                },
+                width: '14rem',
             },
-        },
-        {
-            key: 'description',
-            label: this.translocoService.translate('audit-logs.activity'),
-        },
-        {
-            key: 'userIpAddress',
-            label: this.translocoService.translate('audit-logs.ip-address'),
-        },
-        {
-            key: 'date.displayValue',
-            label: this.translocoService.translate('audit-logs.date'),
-            filterConfig: { type: 'date', label: 'Start Date' },
-        },
-    ], ...(ngDevMode ? [{ debugName: "tableColumns" }] : []));
-    loading = this.facade.isLoadingAuditLogs;
+            {
+                key: 'occurredAtUtc',
+                label: this.translate('occurred-at'),
+                type: 'date',
+                filterConfig: {
+                    type: 'date',
+                    label: this.translate('occurred-at'),
+                },
+                width: '12rem',
+            },
+        ];
+    }, ...(ngDevMode ? [{ debugName: "tableColumns" }] : []));
     onLazyLoad(event) {
-        // Transform filters to API format
-        const apiFilters = {};
-        if (event.filters) {
-            // Handle date filter transformation
-            if (event.filters['date.displayValue']) {
-                const dateFilter = event.filters['date.displayValue'];
-                if (dateFilter.from) {
-                    apiFilters['startDate'] = normalizeDates(dateFilter.from);
-                }
-                if (dateFilter.to) {
-                    apiFilters['endDate'] = normalizeDates(dateFilter.to);
-                }
-            }
-            if (event.filters['generalSearch']) {
-                apiFilters['searchTerm'] = event.filters['generalSearch'];
-            }
-            if (event.filters['originalUserId.userName']) {
-                const userFilter = event.filters['originalUserId.userName'];
-                apiFilters['userId'] = userFilter?.userId;
-            }
+        const filters = event.filters ?? {};
+        const apiFilters = {
+            language: this.currentLanguage(),
+        };
+        const generalSearch = this.readFilterValue(filters['generalSearch']);
+        if (generalSearch) {
+            apiFilters.search = generalSearch;
+        }
+        const category = this.readFilterValue(filters['category.code']);
+        if (category) {
+            apiFilters.category = category;
+        }
+        const operation = this.readFilterValue(filters['operation.code']);
+        if (operation) {
+            apiFilters.operation = operation;
+        }
+        const importance = this.readFilterValue(filters['importance.code']);
+        if (importance) {
+            apiFilters.importance = importance;
+        }
+        const surface = this.readFilterValue(filters['surface.code']);
+        if (surface) {
+            apiFilters.surface = surface;
+        }
+        const actorUserId = this.readFilterValue(filters['actorUserId']);
+        if (actorUserId) {
+            apiFilters.actorUserId = actorUserId;
+        }
+        const occurredAtRange = filters['occurredAtUtc'];
+        if (occurredAtRange?.from) {
+            apiFilters.fromUtc = this.normalizeDateBoundary(occurredAtRange.from, 'start');
+        }
+        if (occurredAtRange?.to) {
+            apiFilters.toUtc = this.normalizeDateBoundary(occurredAtRange.to, 'end');
+        }
+        this.facade.getAuditLogs(event.currentPage ?? 1, event.pageSize ?? this.auditLogs().pageSize ?? 20, apiFilters);
+    }
+    openEventDetail(row) {
+        this.drawerVisible.set(true);
+        this.facade.getAuditLogDetail(row.eventId, this.currentLanguage());
+    }
+    onDrawerVisibleChange(visible) {
+        this.drawerVisible.set(visible);
+        if (!visible) {
+            this.facade.clearAuditLogDetail();
+        }
+    }
+    retry() {
+        const response = this.auditLogs();
+        this.facade.getAuditLogs(response.page || 1, response.pageSize || 20, {
+            ...this.appliedFilters(),
+            language: this.currentLanguage(),
+        });
+    }
+    formatSubjectType(row) {
+        return row.primarySubjectType || this.translate('subject-type-unknown');
+    }
+    currentLanguage() {
+        return this.activeLang() === 'ar' ? 'ar' : 'en';
+    }
+    translate(key) {
+        this.activeLang();
+        return this.translocoService.translate(`audit-logs.${key}`);
+    }
+    pushFilterBadge(badges, label, value) {
+        if (!value) {
+            return;
+        }
+        badges.push(`${label}: ${value}`);
+    }
+    formatFilterDate(value) {
+        const date = new Date(value);
+        if (Number.isNaN(date.getTime())) {
+            return value;
+        }
+        return new Intl.DateTimeFormat(this.currentLanguage() === 'ar' ? 'ar' : undefined, {
+            dateStyle: 'medium',
+        }).format(date);
+    }
+    readFilterValue(value) {
+        if (typeof value === 'string' && value.trim().length > 0) {
+            return value.trim();
+        }
+        if (typeof value === 'number') {
+            return String(value);
+        }
+        if (value &&
+            typeof value === 'object' &&
+            'value' in value &&
+            typeof value.value === 'string' &&
+            value.value.trim().length > 0) {
+            return value.value.trim();
+        }
+        return undefined;
+    }
+    normalizeDateBoundary(value, boundary) {
+        const normalizedDate = new Date(value);
+        if (boundary === 'start') {
+            normalizedDate.setHours(0, 0, 0, 0);
+        }
+        else {
+            normalizedDate.setHours(23, 59, 59, 999);
         }
-        this.facade.getAuditLogs(event.currentPage, event.pageSize, apiFilters);
+        return normalizeDates(normalizedDate);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AuditLogsList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.3", type: AuditLogsList, isStandalone: true, selector: "mt-audit-logs-list", viewQueries: [{ propertyName: "userCol", first: true, predicate: ["userCol"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <mt-table\r\n    [data]=\"auditLogs()\"\r\n    [columns]=\"tableColumns()\"\r\n    [loading]=\"loading()\"\r\n    [lazy]=\"true\"\r\n    [showFilters]=\"true\"\r\n    [exportable]=\"true\"\r\n    [generalSearch]=\"true\"\r\n    [lazyTotalRecords]=\"fullDataAuditLogs().totalCount\"\r\n    (lazyLoad)=\"onLazyLoad($event)\"\r\n  >\r\n  </mt-table>\r\n\r\n  <ng-template #userCol let-row>\r\n    <div class=\"flex items-center gap-2\">\r\n      <mt-avatar [icon]=\"'custom.user-pp'\"> </mt-avatar>\r\n      {{ row.originalUserId?.displayName }}\r\n    </div>\r\n  </ng-template>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "showFilters", "loading", "updating", "lazy", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "exportable", "exportFilename", "actionShape", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: AuditLogsList, isStandalone: true, selector: "mt-audit-logs-list", host: { classAttribute: "block h-full" }, viewQueries: [{ propertyName: "summaryCol", first: true, predicate: ["summaryCol"], descendants: true, isSignal: true }, { propertyName: "actorCol", first: true, predicate: ["actorCol"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'audit-logs'\">\n  <div class=\"flex flex-col gap-4\">\n    @if (activeFilterBadges().length > 0) {\n      <div class=\"flex flex-wrap gap-2\">\n        @for (badge of activeFilterBadges(); track badge) {\n          <mt-chip\n            [label]=\"badge\"\n            styleClass=\"border border-surface-200 !bg-surface-0 !text-surface-700 text-xs\"\n          />\n        }\n      </div>\n    }\n\n    <div class=\"grid gap-3 md:grid-cols-2 xl:grid-cols-4\">\n      @for (card of summaryCards(); track card.subTitle) {\n        <mt-statistic-card [data]=\"card\" cardClass=\"shadow-sm\" />\n      }\n    </div>\n\n    @if (error(); as errorMessage) {\n      <section\n        class=\"flex flex-col gap-3 rounded-xl border border-rose-200 bg-rose-50 px-5 py-4 lg:flex-row lg:items-center lg:justify-between\"\n      >\n        <div class=\"space-y-1\">\n          <p class=\"text-sm font-semibold text-rose-700\">\n            {{ t(\"load-error-title\") }}\n          </p>\n          <p class=\"text-sm text-rose-600\">\n            {{ errorMessage }}\n          </p>\n        </div>\n\n        <mt-button\n          severity=\"danger\"\n          variant=\"outlined\"\n          icon=\"general.refresh-cw-05\"\n          [label]=\"t('retry')\"\n          (onClick)=\"retry()\"\n        />\n      </section>\n    }\n\n    <mt-table\n      [(filters)]=\"tableFilters\"\n      [data]=\"auditLogs().items\"\n      [columns]=\"tableColumns()\"\n      [loading]=\"loading()\"\n      [lazy]=\"true\"\n      [showFilters]=\"true\"\n      [generalSearch]=\"true\"\n      [clickableRows]=\"true\"\n      [lazyTotalRecords]=\"auditLogs().totalCount\"\n      dataKey=\"eventId\"\n      (lazyLoad)=\"onLazyLoad($event)\"\n      (rowClick)=\"openEventDetail($event)\"\n    />\n  </div>\n\n  <ng-template #summaryCol let-row>\n    <div class=\"flex flex-col gap-2 py-1\">\n      <p class=\"line-clamp-2 text-sm font-semibold text-surface-900\">\n        {{ row.summary }}\n      </p>\n      <div\n        class=\"flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-surface-500\"\n      >\n        <span>{{ t(\"event-id\") }}: {{ row.eventId }}</span>\n        @if (row.primarySubjectType) {\n          <span>{{ formatSubjectType(row) }}</span>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #actorCol let-row>\n    <div class=\"flex flex-col gap-1 py-1\">\n      <span class=\"break-all text-sm font-medium text-surface-800\">\n        {{ row.actorUserId || t(\"actor-unknown\") }}\n      </span>\n      <span class=\"text-xs text-surface-500\">\n        {{ row.moduleKey || row.levelDataId || row.moduleDataId || \"audit\" }}\n      </span>\n    </div>\n  </ng-template>\n\n  <mt-audit-log-detail-drawer\n    [visible]=\"drawerVisible()\"\n    [detail]=\"detail()\"\n    [loading]=\"loadingDetail()\"\n    [error]=\"detailError()\"\n    (visibleChange)=\"onDrawerVisibleChange($event)\"\n  />\n</ng-container>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "exportable", "exportFilename", "actionShape", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "pageSize", "currentPage", "first", "filterTerm"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange"] }, { kind: "component", type: Chip, selector: "mt-chip", inputs: ["label", "icon", "image", "removable", "removeIcon", "styleClass"], outputs: ["onRemove", "onImageError"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: StatisticCard, selector: "mt-statistic-card", inputs: ["data", "cardClass"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: AuditLogDetailDrawer, selector: "mt-audit-log-detail-drawer", inputs: ["visible", "detail", "loading", "error"], outputs: ["visibleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AuditLogsList, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-audit-logs-list', standalone: true, imports: [CommonModule, SkeletonModule, Table, Avatar, TranslocoDirective], template: "<ng-container *transloco=\"let t\">\r\n  <mt-table\r\n    [data]=\"auditLogs()\"\r\n    [columns]=\"tableColumns()\"\r\n    [loading]=\"loading()\"\r\n    [lazy]=\"true\"\r\n    [showFilters]=\"true\"\r\n    [exportable]=\"true\"\r\n    [generalSearch]=\"true\"\r\n    [lazyTotalRecords]=\"fullDataAuditLogs().totalCount\"\r\n    (lazyLoad)=\"onLazyLoad($event)\"\r\n  >\r\n  </mt-table>\r\n\r\n  <ng-template #userCol let-row>\r\n    <div class=\"flex items-center gap-2\">\r\n      <mt-avatar [icon]=\"'custom.user-pp'\"> </mt-avatar>\r\n      {{ row.originalUserId?.displayName }}\r\n    </div>\r\n  </ng-template>\r\n</ng-container>\r\n" }]
-        }], propDecorators: { userCol: [{ type: i0.ViewChild, args: ['userCol', { isSignal: true }] }] } });
+            args: [{ selector: 'mt-audit-logs-list', imports: [
+                        CommonModule,
+                        Table,
+                        Chip,
+                        Button,
+                        StatisticCard,
+                        TranslocoDirective,
+                        AuditLogDetailDrawer,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'block h-full',
+                    }, template: "<ng-container *transloco=\"let t; prefix: 'audit-logs'\">\n  <div class=\"flex flex-col gap-4\">\n    @if (activeFilterBadges().length > 0) {\n      <div class=\"flex flex-wrap gap-2\">\n        @for (badge of activeFilterBadges(); track badge) {\n          <mt-chip\n            [label]=\"badge\"\n            styleClass=\"border border-surface-200 !bg-surface-0 !text-surface-700 text-xs\"\n          />\n        }\n      </div>\n    }\n\n    <div class=\"grid gap-3 md:grid-cols-2 xl:grid-cols-4\">\n      @for (card of summaryCards(); track card.subTitle) {\n        <mt-statistic-card [data]=\"card\" cardClass=\"shadow-sm\" />\n      }\n    </div>\n\n    @if (error(); as errorMessage) {\n      <section\n        class=\"flex flex-col gap-3 rounded-xl border border-rose-200 bg-rose-50 px-5 py-4 lg:flex-row lg:items-center lg:justify-between\"\n      >\n        <div class=\"space-y-1\">\n          <p class=\"text-sm font-semibold text-rose-700\">\n            {{ t(\"load-error-title\") }}\n          </p>\n          <p class=\"text-sm text-rose-600\">\n            {{ errorMessage }}\n          </p>\n        </div>\n\n        <mt-button\n          severity=\"danger\"\n          variant=\"outlined\"\n          icon=\"general.refresh-cw-05\"\n          [label]=\"t('retry')\"\n          (onClick)=\"retry()\"\n        />\n      </section>\n    }\n\n    <mt-table\n      [(filters)]=\"tableFilters\"\n      [data]=\"auditLogs().items\"\n      [columns]=\"tableColumns()\"\n      [loading]=\"loading()\"\n      [lazy]=\"true\"\n      [showFilters]=\"true\"\n      [generalSearch]=\"true\"\n      [clickableRows]=\"true\"\n      [lazyTotalRecords]=\"auditLogs().totalCount\"\n      dataKey=\"eventId\"\n      (lazyLoad)=\"onLazyLoad($event)\"\n      (rowClick)=\"openEventDetail($event)\"\n    />\n  </div>\n\n  <ng-template #summaryCol let-row>\n    <div class=\"flex flex-col gap-2 py-1\">\n      <p class=\"line-clamp-2 text-sm font-semibold text-surface-900\">\n        {{ row.summary }}\n      </p>\n      <div\n        class=\"flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-surface-500\"\n      >\n        <span>{{ t(\"event-id\") }}: {{ row.eventId }}</span>\n        @if (row.primarySubjectType) {\n          <span>{{ formatSubjectType(row) }}</span>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <ng-template #actorCol let-row>\n    <div class=\"flex flex-col gap-1 py-1\">\n      <span class=\"break-all text-sm font-medium text-surface-800\">\n        {{ row.actorUserId || t(\"actor-unknown\") }}\n      </span>\n      <span class=\"text-xs text-surface-500\">\n        {{ row.moduleKey || row.levelDataId || row.moduleDataId || \"audit\" }}\n      </span>\n    </div>\n  </ng-template>\n\n  <mt-audit-log-detail-drawer\n    [visible]=\"drawerVisible()\"\n    [detail]=\"detail()\"\n    [loading]=\"loadingDetail()\"\n    [error]=\"detailError()\"\n    (visibleChange)=\"onDrawerVisibleChange($event)\"\n  />\n</ng-container>\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { summaryCol: [{ type: i0.ViewChild, args: ['summaryCol', { isSignal: true }] }], actorCol: [{ type: i0.ViewChild, args: ['actorCol', { isSignal: true }] }] } });
 
 // store/index.ts
 
@@ -293,5 +801,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AuditLogs, AuditLogsActionKey, AuditLogsFacade, AuditLogsList, AuditLogsState, GetAuditLogs };
+export { AuditLogs, AuditLogsActionKey, AuditLogsFacade, AuditLogsList, AuditLogsState, ClearAuditLogDetail, GetAuditLogDetail, GetAuditLogs };
 //# sourceMappingURL=masterteam-audit-logs.mjs.map