@edvak99/voice-receptionist-widget 1.1.13 → 1.1.14

package/fesm2022/edvak99-voice-receptionist-widget-api-logs-table.component-Bl7gMi0P.mjs

@@ -0,0 +1,109 @@
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, input, output, signal, computed, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component } from '@angular/core';
+import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { DatePipe } from '@angular/common';
+import { RouterLink } from '@angular/router';
+import { switchMap, of, map, tap, catchError } from 'rxjs';
+import { A as AiReceptionistApiService, l as EdIconButtonComponent } from './edvak99-voice-receptionist-widget-edvak99-voice-receptionist-widget-D5VJ5SkB.mjs';
+import { p as providerLabel, a as providerChipClass, f as formatApiDuration, s as statusBadgeTone, b as statusLabel, c as prettyJson, d as formatPreview, t as truncatePreview } from './edvak99-voice-receptionist-widget-api-log.util-CBVDx4jk.mjs';
+
+class ApiLogDetailDrawerComponent {
+    constructor() {
+        this.api = inject(AiReceptionistApiService);
+        this.destroyRef = inject(DestroyRef);
+        this.open = input(false);
+        this.listItem = input(null);
+        /** When true, show list-item previews only (skip GET /api-logs/:id). */
+        this.listOnly = input(false);
+        this.closed = output();
+        this.detail = signal(null);
+        this.loading = signal(false);
+        this.error = signal(null);
+        this.providerLabel = providerLabel;
+        this.providerChipClass = providerChipClass;
+        this.formatDuration = formatApiDuration;
+        this.statusTone = statusBadgeTone;
+        this.statusLabel = statusLabel;
+        this.prettyJson = prettyJson;
+        this.formatPreview = formatPreview;
+        /** Fetch key changes when drawer opens with a new log (non-listOnly). */
+        this.fetchKey = computed(() => {
+            if (!this.open())
+                return null;
+            const item = this.listItem();
+            if (!item || this.listOnly())
+                return null;
+            return item.id;
+        });
+        toObservable(this.fetchKey)
+            .pipe(switchMap((logId) => {
+            if (!logId) {
+                this.detail.set(null);
+                this.error.set(null);
+                this.loading.set(false);
+                return of(null);
+            }
+            this.loading.set(true);
+            this.error.set(null);
+            return this.api.getApiLogDetail(logId).pipe(map(({ data }) => data), tap((data) => {
+                this.detail.set(data);
+                this.loading.set(false);
+                if (!data)
+                    this.error.set('Log entry not found.');
+            }), catchError(() => {
+                this.loading.set(false);
+                this.error.set('Failed to load log detail.');
+                return of(null);
+            }));
+        }), takeUntilDestroyed(this.destroyRef))
+            .subscribe();
+    }
+    close() {
+        this.closed.emit();
+    }
+    onBackdropClick(event) {
+        if (event.target === event.currentTarget) {
+            this.close();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ApiLogDetailDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ApiLogDetailDrawerComponent, isStandalone: true, selector: "eds-api-log-detail-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, listItem: { classPropertyName: "listItem", publicName: "listItem", isSignal: true, isRequired: false, transformFunction: null }, listOnly: { classPropertyName: "listOnly", publicName: "listOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "@if (open()) {\n  <div class=\"fixed inset-0 z-[1200] flex justify-end bg-black/45\" (click)=\"onBackdropClick($event)\" role=\"presentation\">\n    <ed-drawer\n      size=\"base\"\n      class=\"slide-in-rtl ed-main-sidepanel h-full border-l bg-white\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label=\"API log detail\"\n    >\n      <ed-drawer-header class=\"items-start gap-3 border-b px-5 pb-3 pt-5 shadow-none\">\n        <div>\n          @if (listItem(); as item) {\n            <span class=\"api-log-chip\" [class]=\"providerChipClass(item.provider)\">\n              {{ providerLabel(item.provider) }}\n            </span>\n            <h2 class=\"my-2 mb-1 text-lg font-semibold text-dark\">{{ item.operation }}</h2>\n            <p class=\"fs-sm text-light m-0\">\n              {{ item.method }} {{ item.urlPath }} \u00B7 {{ item.startedAt | date: 'medium' }}\n            </p>\n          }\n        </div>\n        <button type=\"button\" class=\"ed-drawer-close cursor-pointer border-none bg-transparent p-1\" aria-label=\"Close\" (click)=\"close()\">\n          <ed-icon name=\"close\" [size]=\"20\" />\n        </button>\n      </ed-drawer-header>\n\n      @if (listItem(); as item) {\n        @if (!listOnly() && loading()) {\n          <ed-drawer-body>\n            <p class=\"fs-sm text-light m-0\">Loading detail\u2026</p>\n          </ed-drawer-body>\n        } @else if (!listOnly() && error()) {\n          <ed-drawer-body>\n            <p class=\"fs-sm text-light m-0 text-[#b91c1c]\" role=\"alert\">{{ error() }}</p>\n          </ed-drawer-body>\n        } @else if (listOnly() || detail()) {\n          <ed-drawer-body class=\"flex flex-col gap-4\">\n            <div class=\"flex flex-wrap items-center gap-3\">\n              <ed-badge-2 [attr.variant]=\"statusTone(listOnly() ? item.success : detail()!.success)\">\n                {{ statusLabel(listOnly() ? item.success : detail()!.success, listOnly() ? item.statusCode : detail()!.statusCode) }}\n              </ed-badge-2>\n              <span class=\"font-['IBM_Plex_Mono'] fs-sm text-light\">{{ formatDuration(listOnly() ? item.durationMs : detail()!.durationMs) }}</span>\n              @if (!listOnly() && detail()!.traceId) {\n                <span class=\"font-['IBM_Plex_Mono'] fs-sm text-light\">trace: {{ detail()!.traceId }}</span>\n              }\n              @if (item.toolName) {\n                <span class=\"fs-sm text-light\">tool: {{ item.toolName }}</span>\n              }\n            </div>\n\n            @if ((listOnly() ? item.errorMessage : detail()!.errorMessage)) {\n              <section class=\"vr-api-log-error mb-4 rounded-lg p-3\">\n                <h3 class=\"fs-sm font-semibold text-light\">Error</h3>\n                <p>{{ listOnly() ? item.errorMessage : detail()!.errorMessage }}</p>\n              </section>\n            }\n\n            <section>\n              <h3 class=\"fs-sm font-semibold text-light\">Request</h3>\n              <pre class=\"vr-api-log-json mt-2 overflow-x-auto whitespace-pre-wrap break-words rounded-lg p-3 font-['IBM_Plex_Mono'] text-xs leading-normal\">{{\n                listOnly() ? formatPreview(item.requestPreview) : prettyJson(detail()!.requestBody)\n              }}</pre>\n            </section>\n\n            <section>\n              <h3 class=\"fs-sm font-semibold text-light\">Response</h3>\n              <pre class=\"vr-api-log-json mt-2 overflow-x-auto whitespace-pre-wrap break-words rounded-lg p-3 font-['IBM_Plex_Mono'] text-xs leading-normal\">{{\n                listOnly() ? formatPreview(item.responsePreview) : prettyJson(detail()!.responseBody)\n              }}</pre>\n            </section>\n\n            @if (!listOnly() && detail()!.metadata) {\n              <section>\n                <h3 class=\"fs-sm font-semibold text-light\">Metadata</h3>\n                <pre class=\"vr-api-log-json mt-2 overflow-x-auto whitespace-pre-wrap break-words rounded-lg p-3 font-['IBM_Plex_Mono'] text-xs leading-normal\">{{ prettyJson(detail()!.metadata) }}</pre>\n              </section>\n            }\n\n            @if (!listOnly() && detail()!.callId) {\n              <div>\n                <a class=\"btn is-secondary is-sm inline-flex items-center gap-2xs no-underline\" [routerLink]=\"['../history', detail()!.callId]\">\n                  View call\n                </a>\n              </div>\n            }\n          </ed-drawer-body>\n        }\n      }\n    </ed-drawer>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ApiLogDetailDrawerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eds-api-log-detail-drawer', imports: [DatePipe, RouterLink, EdIconButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "@if (open()) {\n  <div class=\"fixed inset-0 z-[1200] flex justify-end bg-black/45\" (click)=\"onBackdropClick($event)\" role=\"presentation\">\n    <ed-drawer\n      size=\"base\"\n      class=\"slide-in-rtl ed-main-sidepanel h-full border-l bg-white\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label=\"API log detail\"\n    >\n      <ed-drawer-header class=\"items-start gap-3 border-b px-5 pb-3 pt-5 shadow-none\">\n        <div>\n          @if (listItem(); as item) {\n            <span class=\"api-log-chip\" [class]=\"providerChipClass(item.provider)\">\n              {{ providerLabel(item.provider) }}\n            </span>\n            <h2 class=\"my-2 mb-1 text-lg font-semibold text-dark\">{{ item.operation }}</h2>\n            <p class=\"fs-sm text-light m-0\">\n              {{ item.method }} {{ item.urlPath }} \u00B7 {{ item.startedAt | date: 'medium' }}\n            </p>\n          }\n        </div>\n        <button type=\"button\" class=\"ed-drawer-close cursor-pointer border-none bg-transparent p-1\" aria-label=\"Close\" (click)=\"close()\">\n          <ed-icon name=\"close\" [size]=\"20\" />\n        </button>\n      </ed-drawer-header>\n\n      @if (listItem(); as item) {\n        @if (!listOnly() && loading()) {\n          <ed-drawer-body>\n            <p class=\"fs-sm text-light m-0\">Loading detail\u2026</p>\n          </ed-drawer-body>\n        } @else if (!listOnly() && error()) {\n          <ed-drawer-body>\n            <p class=\"fs-sm text-light m-0 text-[#b91c1c]\" role=\"alert\">{{ error() }}</p>\n          </ed-drawer-body>\n        } @else if (listOnly() || detail()) {\n          <ed-drawer-body class=\"flex flex-col gap-4\">\n            <div class=\"flex flex-wrap items-center gap-3\">\n              <ed-badge-2 [attr.variant]=\"statusTone(listOnly() ? item.success : detail()!.success)\">\n                {{ statusLabel(listOnly() ? item.success : detail()!.success, listOnly() ? item.statusCode : detail()!.statusCode) }}\n              </ed-badge-2>\n              <span class=\"font-['IBM_Plex_Mono'] fs-sm text-light\">{{ formatDuration(listOnly() ? item.durationMs : detail()!.durationMs) }}</span>\n              @if (!listOnly() && detail()!.traceId) {\n                <span class=\"font-['IBM_Plex_Mono'] fs-sm text-light\">trace: {{ detail()!.traceId }}</span>\n              }\n              @if (item.toolName) {\n                <span class=\"fs-sm text-light\">tool: {{ item.toolName }}</span>\n              }\n            </div>\n\n            @if ((listOnly() ? item.errorMessage : detail()!.errorMessage)) {\n              <section class=\"vr-api-log-error mb-4 rounded-lg p-3\">\n                <h3 class=\"fs-sm font-semibold text-light\">Error</h3>\n                <p>{{ listOnly() ? item.errorMessage : detail()!.errorMessage }}</p>\n              </section>\n            }\n\n            <section>\n              <h3 class=\"fs-sm font-semibold text-light\">Request</h3>\n              <pre class=\"vr-api-log-json mt-2 overflow-x-auto whitespace-pre-wrap break-words rounded-lg p-3 font-['IBM_Plex_Mono'] text-xs leading-normal\">{{\n                listOnly() ? formatPreview(item.requestPreview) : prettyJson(detail()!.requestBody)\n              }}</pre>\n            </section>\n\n            <section>\n              <h3 class=\"fs-sm font-semibold text-light\">Response</h3>\n              <pre class=\"vr-api-log-json mt-2 overflow-x-auto whitespace-pre-wrap break-words rounded-lg p-3 font-['IBM_Plex_Mono'] text-xs leading-normal\">{{\n                listOnly() ? formatPreview(item.responsePreview) : prettyJson(detail()!.responseBody)\n              }}</pre>\n            </section>\n\n            @if (!listOnly() && detail()!.metadata) {\n              <section>\n                <h3 class=\"fs-sm font-semibold text-light\">Metadata</h3>\n                <pre class=\"vr-api-log-json mt-2 overflow-x-auto whitespace-pre-wrap break-words rounded-lg p-3 font-['IBM_Plex_Mono'] text-xs leading-normal\">{{ prettyJson(detail()!.metadata) }}</pre>\n              </section>\n            }\n\n            @if (!listOnly() && detail()!.callId) {\n              <div>\n                <a class=\"btn is-secondary is-sm inline-flex items-center gap-2xs no-underline\" [routerLink]=\"['../history', detail()!.callId]\">\n                  View call\n                </a>\n              </div>\n            }\n          </ed-drawer-body>\n        }\n      }\n    </ed-drawer>\n  </div>\n}\n" }]
+        }], ctorParameters: () => [] });
+
+class ApiLogsTableComponent {
+    constructor() {
+        this.items = input.required();
+        this.showCallId = input(false);
+        this.showPracticeId = input(false);
+        this.callLinkBase = input(['../history']);
+        this.rowSelected = output();
+        this.providerLabel = providerLabel;
+        this.providerChipClass = providerChipClass;
+        this.formatDuration = formatApiDuration;
+        this.statusTone = statusBadgeTone;
+        this.statusLabel = statusLabel;
+        this.truncate = truncatePreview;
+    }
+    onRowClick(item) {
+        this.rowSelected.emit(item);
+    }
+    onCallClick(event) {
+        event.stopPropagation();
+    }
+    callLink(callId) {
+        return [...this.callLinkBase(), callId];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ApiLogsTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: ApiLogsTableComponent, isStandalone: true, selector: "eds-api-logs-table", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, showCallId: { classPropertyName: "showCallId", publicName: "showCallId", isSignal: true, isRequired: false, transformFunction: null }, showPracticeId: { classPropertyName: "showPracticeId", publicName: "showPracticeId", isSignal: true, isRequired: false, transformFunction: null }, callLinkBase: { classPropertyName: "callLinkBase", publicName: "callLinkBase", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowSelected: "rowSelected" }, ngImport: i0, template: "<div class=\"api-logs-table__wrap overflow-x-auto\">\n  <table class=\"table-default w-full api-logs-table\">\n    <thead>\n      <tr>\n        <th>Time</th>\n        <th>Provider</th>\n        <th>Operation</th>\n        <th>Method</th>\n        <th>Status</th>\n        <th>Duration</th>\n        <th>Success</th>\n        <th>Tool</th>\n        @if (showCallId()) {\n          <th>Call</th>\n        }\n        @if (showPracticeId()) {\n          <th>Practice</th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (row of items(); track row.id) {\n        <tr tabindex=\"0\" (click)=\"onRowClick(row)\" (keyup.enter)=\"onRowClick(row)\">\n          <td class=\"font-['IBM_Plex_Mono'] fs-sm text-light whitespace-nowrap\">{{ row.startedAt | date: 'MMM d, HH:mm:ss' }}</td>\n          <td>\n            <span class=\"api-log-chip\" [class]=\"providerChipClass(row.provider)\">\n              {{ providerLabel(row.provider) }}\n            </span>\n          </td>\n          <td>\n            <span class=\"fs-sm font-semibold text-dark block\">{{ row.operation }}</span>\n            <span class=\"api-logs-table__preview fs-sm text-light block mt-1\">{{ truncate(row.requestPreview) }}</span>\n          </td>\n          <td class=\"font-['IBM_Plex_Mono'] fs-sm text-light\">{{ row.method }}</td>\n          <td>\n            <ed-badge-2 [attr.variant]=\"statusTone(row.success)\">\n              {{ statusLabel(row.success, row.statusCode) }}\n            </ed-badge-2>\n          </td>\n          <td class=\"font-['IBM_Plex_Mono'] fs-sm text-light\">{{ formatDuration(row.durationMs) }}</td>\n          <td class=\"fs-sm text-light\">{{ row.success ? 'OK' : 'Fail' }}</td>\n          <td class=\"fs-sm text-light\">{{ row.toolName ?? '\u2014' }}</td>\n          @if (showCallId()) {\n            <td class=\"font-['IBM_Plex_Mono'] fs-sm text-light\" (click)=\"onCallClick($event)\">\n              @if (row.callId) {\n                <a\n                  [routerLink]=\"callLink(row.callId)\"\n                  class=\"font-medium text-blue-600 no-underline hover:underline\"\n                >{{ row.callId }}</a>\n              } @else {\n                \u2014\n              }\n            </td>\n          }\n          @if (showPracticeId()) {\n            <td class=\"font-['IBM_Plex_Mono'] fs-sm text-light\">{{ row.clientPracticeId || '\u2014' }}</td>\n          }\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n", styles: [""], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ApiLogsTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eds-api-logs-table', imports: [DatePipe, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<div class=\"api-logs-table__wrap overflow-x-auto\">\n  <table class=\"table-default w-full api-logs-table\">\n    <thead>\n      <tr>\n        <th>Time</th>\n        <th>Provider</th>\n        <th>Operation</th>\n        <th>Method</th>\n        <th>Status</th>\n        <th>Duration</th>\n        <th>Success</th>\n        <th>Tool</th>\n        @if (showCallId()) {\n          <th>Call</th>\n        }\n        @if (showPracticeId()) {\n          <th>Practice</th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (row of items(); track row.id) {\n        <tr tabindex=\"0\" (click)=\"onRowClick(row)\" (keyup.enter)=\"onRowClick(row)\">\n          <td class=\"font-['IBM_Plex_Mono'] fs-sm text-light whitespace-nowrap\">{{ row.startedAt | date: 'MMM d, HH:mm:ss' }}</td>\n          <td>\n            <span class=\"api-log-chip\" [class]=\"providerChipClass(row.provider)\">\n              {{ providerLabel(row.provider) }}\n            </span>\n          </td>\n          <td>\n            <span class=\"fs-sm font-semibold text-dark block\">{{ row.operation }}</span>\n            <span class=\"api-logs-table__preview fs-sm text-light block mt-1\">{{ truncate(row.requestPreview) }}</span>\n          </td>\n          <td class=\"font-['IBM_Plex_Mono'] fs-sm text-light\">{{ row.method }}</td>\n          <td>\n            <ed-badge-2 [attr.variant]=\"statusTone(row.success)\">\n              {{ statusLabel(row.success, row.statusCode) }}\n            </ed-badge-2>\n          </td>\n          <td class=\"font-['IBM_Plex_Mono'] fs-sm text-light\">{{ formatDuration(row.durationMs) }}</td>\n          <td class=\"fs-sm text-light\">{{ row.success ? 'OK' : 'Fail' }}</td>\n          <td class=\"fs-sm text-light\">{{ row.toolName ?? '\u2014' }}</td>\n          @if (showCallId()) {\n            <td class=\"font-['IBM_Plex_Mono'] fs-sm text-light\" (click)=\"onCallClick($event)\">\n              @if (row.callId) {\n                <a\n                  [routerLink]=\"callLink(row.callId)\"\n                  class=\"font-medium text-blue-600 no-underline hover:underline\"\n                >{{ row.callId }}</a>\n              } @else {\n                \u2014\n              }\n            </td>\n          }\n          @if (showPracticeId()) {\n            <td class=\"font-['IBM_Plex_Mono'] fs-sm text-light\">{{ row.clientPracticeId || '\u2014' }}</td>\n          }\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n" }]
+        }] });
+
+export { ApiLogsTableComponent as A, ApiLogDetailDrawerComponent as a };
+//# sourceMappingURL=edvak99-voice-receptionist-widget-api-logs-table.component-Bl7gMi0P.mjs.map

package/fesm2022/edvak99-voice-receptionist-widget-api-logs-table.component-Bl7gMi0P.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"edvak99-voice-receptionist-widget-api-logs-table.component-Bl7gMi0P.mjs","sources":["../../../src/lib/components/api-log-detail-drawer/api-log-detail-drawer.component.ts","../../../src/lib/components/api-log-detail-drawer/api-log-detail-drawer.component.html","../../../src/lib/components/api-logs-table/api-logs-table.component.ts","../../../src/lib/components/api-logs-table/api-logs-table.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  CUSTOM_ELEMENTS_SCHEMA,\n  computed,\n  DestroyRef,\n  inject,\n  input,\n  output,\n  signal,\n} from '@angular/core';\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';\nimport { DatePipe } from '@angular/common';\nimport { RouterLink } from '@angular/router';\nimport { catchError, map, of, switchMap, tap } from 'rxjs';\n\nimport { ApiLogDetail, ApiLogListItem } from '../../models/api-log.types';\nimport { AiReceptionistApiService } from '../../services/ai-receptionist-api.service';\nimport {\n  formatApiDuration,\n  formatPreview,\n  prettyJson,\n  providerChipClass,\n  providerLabel,\n  statusBadgeTone,\n  statusLabel,\n} from '../../utils/api-log.util';\nimport { EdIconButtonComponent } from '../../ui/ed-icon-button.component';\n\n@Component({\n    selector: 'eds-api-log-detail-drawer',\n    imports: [DatePipe, RouterLink, EdIconButtonComponent],\n    templateUrl: './api-log-detail-drawer.component.html',\n    styleUrl: './api-log-detail-drawer.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class ApiLogDetailDrawerComponent {\n  private readonly api = inject(AiReceptionistApiService);\n  private readonly destroyRef = inject(DestroyRef);\n\n  readonly open = input(false);\n  readonly listItem = input<ApiLogListItem | null>(null);\n  /** When true, show list-item previews only (skip GET /api-logs/:id). */\n  readonly listOnly = input(false);\n  readonly closed = output<void>();\n\n  protected readonly detail = signal<ApiLogDetail | null>(null);\n  protected readonly loading = signal(false);\n  protected readonly error = signal<string | null>(null);\n\n  protected providerLabel = providerLabel;\n  protected providerChipClass = providerChipClass;\n  protected formatDuration = formatApiDuration;\n  protected statusTone = statusBadgeTone;\n  protected statusLabel = statusLabel;\n  protected prettyJson = prettyJson;\n  protected formatPreview = formatPreview;\n\n  /** Fetch key changes when drawer opens with a new log (non-listOnly). */\n  private readonly fetchKey = computed(() => {\n    if (!this.open()) return null;\n    const item = this.listItem();\n    if (!item || this.listOnly()) return null;\n    return item.id;\n  });\n\n  constructor() {\n    toObservable(this.fetchKey)\n      .pipe(\n        switchMap((logId) => {\n          if (!logId) {\n            this.detail.set(null);\n            this.error.set(null);\n            this.loading.set(false);\n            return of(null);\n          }\n          this.loading.set(true);\n          this.error.set(null);\n          return this.api.getApiLogDetail(logId).pipe(\n            map(({ data }) => data),\n            tap((data) => {\n              this.detail.set(data);\n              this.loading.set(false);\n              if (!data) this.error.set('Log entry not found.');\n            }),\n            catchError(() => {\n              this.loading.set(false);\n              this.error.set('Failed to load log detail.');\n              return of(null);\n            }),\n          );\n        }),\n        takeUntilDestroyed(this.destroyRef),\n      )\n      .subscribe();\n  }\n\n  protected close(): void {\n    this.closed.emit();\n  }\n\n  protected onBackdropClick(event: MouseEvent): void {\n    if (event.target === event.currentTarget) {\n      this.close();\n    }\n  }\n}\n","@if (open()) {\n  <div class=\"fixed inset-0 z-[1200] flex justify-end bg-black/45\" (click)=\"onBackdropClick($event)\" role=\"presentation\">\n    <ed-drawer\n      size=\"base\"\n      class=\"slide-in-rtl ed-main-sidepanel h-full border-l bg-white\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label=\"API log detail\"\n    >\n      <ed-drawer-header class=\"items-start gap-3 border-b px-5 pb-3 pt-5 shadow-none\">\n        <div>\n          @if (listItem(); as item) {\n            <span class=\"api-log-chip\" [class]=\"providerChipClass(item.provider)\">\n              {{ providerLabel(item.provider) }}\n            </span>\n            <h2 class=\"my-2 mb-1 text-lg font-semibold text-dark\">{{ item.operation }}</h2>\n            <p class=\"fs-sm text-light m-0\">\n              {{ item.method }} {{ item.urlPath }} · {{ item.startedAt | date: 'medium' }}\n            </p>\n          }\n        </div>\n        <button type=\"button\" class=\"ed-drawer-close cursor-pointer border-none bg-transparent p-1\" aria-label=\"Close\" (click)=\"close()\">\n          <ed-icon name=\"close\" [size]=\"20\" />\n        </button>\n      </ed-drawer-header>\n\n      @if (listItem(); as item) {\n        @if (!listOnly() && loading()) {\n          <ed-drawer-body>\n            <p class=\"fs-sm text-light m-0\">Loading detail…</p>\n          </ed-drawer-body>\n        } @else if (!listOnly() && error()) {\n          <ed-drawer-body>\n            <p class=\"fs-sm text-light m-0 text-[#b91c1c]\" role=\"alert\">{{ error() }}</p>\n          </ed-drawer-body>\n        } @else if (listOnly() || detail()) {\n          <ed-drawer-body class=\"flex flex-col gap-4\">\n            <div class=\"flex flex-wrap items-center gap-3\">\n              <ed-badge-2 [attr.variant]=\"statusTone(listOnly() ? item.success : detail()!.success)\">\n                {{ statusLabel(listOnly() ? item.success : detail()!.success, listOnly() ? item.statusCode : detail()!.statusCode) }}\n              </ed-badge-2>\n              <span class=\"font-['IBM_Plex_Mono'] fs-sm text-light\">{{ formatDuration(listOnly() ? item.durationMs : detail()!.durationMs) }}</span>\n              @if (!listOnly() && detail()!.traceId) {\n                <span class=\"font-['IBM_Plex_Mono'] fs-sm text-light\">trace: {{ detail()!.traceId }}</span>\n              }\n              @if (item.toolName) {\n                <span class=\"fs-sm text-light\">tool: {{ item.toolName }}</span>\n              }\n            </div>\n\n            @if ((listOnly() ? item.errorMessage : detail()!.errorMessage)) {\n              <section class=\"vr-api-log-error mb-4 rounded-lg p-3\">\n                <h3 class=\"fs-sm font-semibold text-light\">Error</h3>\n                <p>{{ listOnly() ? item.errorMessage : detail()!.errorMessage }}</p>\n              </section>\n            }\n\n            <section>\n              <h3 class=\"fs-sm font-semibold text-light\">Request</h3>\n              <pre class=\"vr-api-log-json mt-2 overflow-x-auto whitespace-pre-wrap break-words rounded-lg p-3 font-['IBM_Plex_Mono'] text-xs leading-normal\">{{\n                listOnly() ? formatPreview(item.requestPreview) : prettyJson(detail()!.requestBody)\n              }}</pre>\n            </section>\n\n            <section>\n              <h3 class=\"fs-sm font-semibold text-light\">Response</h3>\n              <pre class=\"vr-api-log-json mt-2 overflow-x-auto whitespace-pre-wrap break-words rounded-lg p-3 font-['IBM_Plex_Mono'] text-xs leading-normal\">{{\n                listOnly() ? formatPreview(item.responsePreview) : prettyJson(detail()!.responseBody)\n              }}</pre>\n            </section>\n\n            @if (!listOnly() && detail()!.metadata) {\n              <section>\n                <h3 class=\"fs-sm font-semibold text-light\">Metadata</h3>\n                <pre class=\"vr-api-log-json mt-2 overflow-x-auto whitespace-pre-wrap break-words rounded-lg p-3 font-['IBM_Plex_Mono'] text-xs leading-normal\">{{ prettyJson(detail()!.metadata) }}</pre>\n              </section>\n            }\n\n            @if (!listOnly() && detail()!.callId) {\n              <div>\n                <a class=\"btn is-secondary is-sm inline-flex items-center gap-2xs no-underline\" [routerLink]=\"['../history', detail()!.callId]\">\n                  View call\n                </a>\n              </div>\n            }\n          </ed-drawer-body>\n        }\n      }\n    </ed-drawer>\n  </div>\n}\n","import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, input, output } from '@angular/core';\nimport { DatePipe } from '@angular/common';\nimport { RouterLink } from '@angular/router';\n\nimport { ApiLogListItem } from '../../models/api-log.types';\nimport {\n  formatApiDuration,\n  providerChipClass,\n  providerLabel,\n  statusBadgeTone,\n  statusLabel,\n  truncatePreview,\n} from '../../utils/api-log.util';\n\n@Component({\n  selector: 'eds-api-logs-table',\n  imports: [DatePipe, RouterLink],\n  templateUrl: './api-logs-table.component.html',\n  styleUrl: './api-logs-table.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class ApiLogsTableComponent {\n  readonly items = input.required<ApiLogListItem[]>();\n  readonly showCallId = input(false);\n  readonly showPracticeId = input(false);\n  readonly callLinkBase = input<string[]>(['../history']);\n  readonly rowSelected = output<ApiLogListItem>();\n\n  protected providerLabel = providerLabel;\n  protected providerChipClass = providerChipClass;\n  protected formatDuration = formatApiDuration;\n  protected statusTone = statusBadgeTone;\n  protected statusLabel = statusLabel;\n  protected truncate = truncatePreview;\n\n  protected onRowClick(item: ApiLogListItem): void {\n    this.rowSelected.emit(item);\n  }\n\n  protected onCallClick(event: Event): void {\n    event.stopPropagation();\n  }\n\n  protected callLink(callId: string): string[] {\n    return [...this.callLinkBase(), callId];\n  }\n}\n","<div class=\"api-logs-table__wrap overflow-x-auto\">\n  <table class=\"table-default w-full api-logs-table\">\n    <thead>\n      <tr>\n        <th>Time</th>\n        <th>Provider</th>\n        <th>Operation</th>\n        <th>Method</th>\n        <th>Status</th>\n        <th>Duration</th>\n        <th>Success</th>\n        <th>Tool</th>\n        @if (showCallId()) {\n          <th>Call</th>\n        }\n        @if (showPracticeId()) {\n          <th>Practice</th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (row of items(); track row.id) {\n        <tr tabindex=\"0\" (click)=\"onRowClick(row)\" (keyup.enter)=\"onRowClick(row)\">\n          <td class=\"font-['IBM_Plex_Mono'] fs-sm text-light whitespace-nowrap\">{{ row.startedAt | date: 'MMM d, HH:mm:ss' }}</td>\n          <td>\n            <span class=\"api-log-chip\" [class]=\"providerChipClass(row.provider)\">\n              {{ providerLabel(row.provider) }}\n            </span>\n          </td>\n          <td>\n            <span class=\"fs-sm font-semibold text-dark block\">{{ row.operation }}</span>\n            <span class=\"api-logs-table__preview fs-sm text-light block mt-1\">{{ truncate(row.requestPreview) }}</span>\n          </td>\n          <td class=\"font-['IBM_Plex_Mono'] fs-sm text-light\">{{ row.method }}</td>\n          <td>\n            <ed-badge-2 [attr.variant]=\"statusTone(row.success)\">\n              {{ statusLabel(row.success, row.statusCode) }}\n            </ed-badge-2>\n          </td>\n          <td class=\"font-['IBM_Plex_Mono'] fs-sm text-light\">{{ formatDuration(row.durationMs) }}</td>\n          <td class=\"fs-sm text-light\">{{ row.success ? 'OK' : 'Fail' }}</td>\n          <td class=\"fs-sm text-light\">{{ row.toolName ?? '—' }}</td>\n          @if (showCallId()) {\n            <td class=\"font-['IBM_Plex_Mono'] fs-sm text-light\" (click)=\"onCallClick($event)\">\n              @if (row.callId) {\n                <a\n                  [routerLink]=\"callLink(row.callId)\"\n                  class=\"font-medium text-blue-600 no-underline hover:underline\"\n                >{{ row.callId }}</a>\n              } @else {\n                —\n              }\n            </td>\n          }\n          @if (showPracticeId()) {\n            <td class=\"font-['IBM_Plex_Mono'] fs-sm text-light\">{{ row.clientPracticeId || '—' }}</td>\n          }\n        </tr>\n      }\n    </tbody>\n  </table>\n</div>\n"],"names":[],"mappings":";;;;;;;;;MAqCa,2BAA2B,CAAA;AA8BtC,IAAA,WAAA,GAAA;AA7BiB,QAAA,IAAA,CAAA,GAAG,GAAG,MAAM,CAAC,wBAAwB,CAAC;AACtC,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;AAEvC,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC;AACnB,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAwB,IAAI,CAAC;;AAE7C,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC;QACvB,IAAA,CAAA,MAAM,GAAG,MAAM,EAAQ;AAEb,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,CAAsB,IAAI,CAAC;AAC1C,QAAA,IAAA,CAAA,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC;AACvB,QAAA,IAAA,CAAA,KAAK,GAAG,MAAM,CAAgB,IAAI,CAAC;QAE5C,IAAA,CAAA,aAAa,GAAG,aAAa;QAC7B,IAAA,CAAA,iBAAiB,GAAG,iBAAiB;QACrC,IAAA,CAAA,cAAc,GAAG,iBAAiB;QAClC,IAAA,CAAA,UAAU,GAAG,eAAe;QAC5B,IAAA,CAAA,WAAW,GAAG,WAAW;QACzB,IAAA,CAAA,UAAU,GAAG,UAAU;QACvB,IAAA,CAAA,aAAa,GAAG,aAAa;;AAGtB,QAAA,IAAA,CAAA,QAAQ,GAAG,QAAQ,CAAC,MAAK;AACxC,YAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;AAAE,gBAAA,OAAO,IAAI;AAC7B,YAAA,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE;AAC5B,YAAA,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE;AAAE,gBAAA,OAAO,IAAI;YACzC,OAAO,IAAI,CAAC,EAAE;AAChB,QAAA,CAAC,CAAC;AAGA,QAAA,YAAY,CAAC,IAAI,CAAC,QAAQ;AACvB,aAAA,IAAI,CACH,SAAS,CAAC,CAAC,KAAK,KAAI;YAClB,IAAI,CAAC,KAAK,EAAE;AACV,gBAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC;AACrB,gBAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC;AACpB,gBAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC;AACvB,gBAAA,OAAO,EAAE,CAAC,IAAI,CAAC;YACjB;AACA,YAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC;AACtB,YAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC;AACpB,YAAA,OAAO,IAAI,CAAC,GAAG,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,IAAI,CACzC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC,EACvB,GAAG,CAAC,CAAC,IAAI,KAAI;AACX,gBAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC;AACrB,gBAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC;AACvB,gBAAA,IAAI,CAAC,IAAI;AAAE,oBAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,sBAAsB,CAAC;AACnD,YAAA,CAAC,CAAC,EACF,UAAU,CAAC,MAAK;AACd,gBAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC;AACvB,gBAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,4BAA4B,CAAC;AAC5C,gBAAA,OAAO,EAAE,CAAC,IAAI,CAAC;YACjB,CAAC,CAAC,CACH;QACH,CAAC,CAAC,EACF,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC;AAEpC,aAAA,SAAS,EAAE;IAChB;IAEU,KAAK,GAAA;AACb,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;IACpB;AAEU,IAAA,eAAe,CAAC,KAAiB,EAAA;QACzC,IAAI,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,aAAa,EAAE;YACxC,IAAI,CAAC,KAAK,EAAE;QACd;IACF;+GArEW,2BAA2B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA3B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,2BAA2B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,2BAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECrCxC,i5IA2FA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,ED5Dc,QAAQ,6CAAE,UAAU,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,aAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,OAAA,EAAA,MAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAMrB,2BAA2B,EAAA,UAAA,EAAA,CAAA;kBARvC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,2BAA2B,EAAA,OAAA,EAC5B,CAAC,QAAQ,EAAE,UAAU,EAAE,qBAAqB,CAAC,EAAA,eAAA,EAGrC,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,sBAAsB,CAAC,EAAA,QAAA,EAAA,i5IAAA,EAAA;;;MEbxB,qBAAqB,CAAA;AARlC,IAAA,WAAA,GAAA;AASW,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,EAAoB;AAC1C,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC;AACzB,QAAA,IAAA,CAAA,cAAc,GAAG,KAAK,CAAC,KAAK,CAAC;AAC7B,QAAA,IAAA,CAAA,YAAY,GAAG,KAAK,CAAW,CAAC,YAAY,CAAC,CAAC;QAC9C,IAAA,CAAA,WAAW,GAAG,MAAM,EAAkB;QAErC,IAAA,CAAA,aAAa,GAAG,aAAa;QAC7B,IAAA,CAAA,iBAAiB,GAAG,iBAAiB;QACrC,IAAA,CAAA,cAAc,GAAG,iBAAiB;QAClC,IAAA,CAAA,UAAU,GAAG,eAAe;QAC5B,IAAA,CAAA,WAAW,GAAG,WAAW;QACzB,IAAA,CAAA,QAAQ,GAAG,eAAe;AAarC,IAAA;AAXW,IAAA,UAAU,CAAC,IAAoB,EAAA;AACvC,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;IAC7B;AAEU,IAAA,WAAW,CAAC,KAAY,EAAA;QAChC,KAAK,CAAC,eAAe,EAAE;IACzB;AAEU,IAAA,QAAQ,CAAC,MAAc,EAAA;QAC/B,OAAO,CAAC,GAAG,IAAI,CAAC,YAAY,EAAE,EAAE,MAAM,CAAC;IACzC;+GAxBW,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECtBlC,w5EA8DA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,ED9CY,QAAQ,6CAAE,UAAU,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,aAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,OAAA,EAAA,MAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,YAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAMnB,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBARjC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,oBAAoB,EAAA,OAAA,EACrB,CAAC,QAAQ,EAAE,UAAU,CAAC,EAAA,eAAA,EAGd,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,sBAAsB,CAAC,EAAA,QAAA,EAAA,w5EAAA,EAAA;;;;;"}

package/fesm2022/edvak99-voice-receptionist-widget-audit-page.component-dBl3Kj6s.mjs

@@ -0,0 +1,67 @@
+import * as i0 from '@angular/core';
+import { inject, signal, ChangeDetectionStrategy, Component } from '@angular/core';
+import { DatePipe } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { A as AiReceptionistApiService, j as DEFAULT_PAGE_SIZE, k as totalPages, I as IconComponent } from './edvak99-voice-receptionist-widget-edvak99-voice-receptionist-widget-D5VJ5SkB.mjs';
+import { E as EdsSearchFieldComponent } from './edvak99-voice-receptionist-widget-eds-search-field.component-BDGCmkoP.mjs';
+
+class AuditPageComponent {
+    constructor() {
+        this.api = inject(AiReceptionistApiService);
+        this.pageSize = DEFAULT_PAGE_SIZE;
+        this.events = signal([]);
+        this.total = signal(0);
+        this.page = signal(1);
+        this.search = signal('');
+        this.actor = signal('');
+        this.loading = signal(true);
+    }
+    ngOnInit() {
+        this.load();
+    }
+    load() {
+        this.loading.set(true);
+        this.api
+            .getAudit(this.search() || undefined, {
+            page: this.page(),
+            limit: DEFAULT_PAGE_SIZE,
+        })
+            .subscribe({
+            next: ({ items, total, page }) => {
+                this.events.set(items);
+                this.total.set(total);
+                this.page.set(page);
+                this.loading.set(false);
+            },
+            error: () => this.loading.set(false),
+        });
+    }
+    searchSubmit() {
+        this.page.set(1);
+        this.load();
+    }
+    totalPages() {
+        return totalPages(this.total(), DEFAULT_PAGE_SIZE);
+    }
+    prevPage() {
+        if (this.page() <= 1)
+            return;
+        this.page.update((p) => p - 1);
+        this.load();
+    }
+    nextPage() {
+        if (this.page() >= this.totalPages())
+            return;
+        this.page.update((p) => p + 1);
+        this.load();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AuditPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: AuditPageComponent, isStandalone: true, selector: "eds-audit-page", ngImport: i0, template: "<div class=\"p-md bg-lighter min-h-full\">\n  <header class=\"mb-5\">\n    <div>\n      <h4>Audit log</h4>\n      <p class=\"fs-sm text-light\">Track configuration and agent activity</p>\n    </div>\n  </header>\n\n  <div class=\"mb-4 flex flex-wrap items-center gap-3 rounded-lg border border-base bg-white p-4 shadow-sm\">\n    <eds-search-field\n      inputClass=\"form-input min-w-[180px]\"\n      placeholder=\"Search action, target, detail\u2026\"\n      [value]=\"search()\"\n      (valueChange)=\"search.set($event)\"\n      (enter)=\"searchSubmit()\"\n    />\n    <eds-search-field\n      type=\"text\"\n      inputClass=\"form-input min-w-[180px]\"\n      placeholder=\"Filter by actor\"\n      [value]=\"actor()\"\n      (valueChange)=\"actor.set($event)\"\n      (enter)=\"searchSubmit()\"\n    />\n    <button type=\"button\" class=\"btn is-primary is-sm inline-flex items-center gap-2xs\" (click)=\"searchSubmit()\">\n      <ed-icon name=\"search\" [size]=\"18\" /> Search\n    </button>\n  </div>\n\n  @if (loading()) {\n    <p class=\"fs-sm text-light\">Loading audit events\u2026</p>\n  } @else {\n    <div class=\"overflow-x-auto rounded-lg border border-base bg-white p-0 shadow-sm\">\n      <table class=\"table-default w-full\">\n        <thead>\n          <tr>\n            <th>When</th>\n            <th>Actor</th>\n            <th>Action</th>\n            <th>Target</th>\n            <th>Detail</th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (event of events(); track event.id) {\n            <tr>\n              <td class=\"font-['IBM_Plex_Mono'] fs-sm text-light\">{{ event.at | date: 'medium' }}</td>\n              <td>{{ event.actor }}</td>\n              <td class=\"fs-sm font-semibold text-dark\">{{ event.action }}</td>\n              <td class=\"font-['IBM_Plex_Mono'] fs-sm text-light\">{{ event.target }}</td>\n              <td>{{ event.detail }}</td>\n            </tr>\n          } @empty {\n            <tr>\n              <td colspan=\"5\" class=\"p-8 text-center text-light\">No events match your filters.</td>\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n\n    <footer class=\"mt-4 flex items-center justify-between border-t border-zinc-200 pt-3\">\n      <span class=\"fs-sm text-light\">\n        Page {{ page() }} of {{ totalPages() }} \u00B7 {{ total() }} total\n      </span>\n      <div class=\"flex gap-2\">\n        <button type=\"button\" class=\"btn is-secondary is-sm inline-flex items-center gap-2xs\" [disabled]=\"page() <= 1\" (click)=\"prevPage()\">Previous</button>\n        <button type=\"button\" class=\"btn is-secondary is-sm inline-flex items-center gap-2xs\" [disabled]=\"page() >= totalPages()\" (click)=\"nextPage()\">Next</button>\n      </div>\n    </footer>\n  }\n</div>\n", dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: IconComponent, selector: "ed-icon", inputs: ["name", "size", "color", "cssClass", "decorative", "ariaHidden", "ariaLabel", "title", "desc", "focusable", "tabIndex"] }, { kind: "component", type: EdsSearchFieldComponent, selector: "eds-search-field", inputs: ["value", "inputId", "type", "placeholder", "ariaLabel", "inputClass"], outputs: ["valueChange", "enter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AuditPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eds-audit-page', imports: [DatePipe, FormsModule, IconComponent, EdsSearchFieldComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"p-md bg-lighter min-h-full\">\n  <header class=\"mb-5\">\n    <div>\n      <h4>Audit log</h4>\n      <p class=\"fs-sm text-light\">Track configuration and agent activity</p>\n    </div>\n  </header>\n\n  <div class=\"mb-4 flex flex-wrap items-center gap-3 rounded-lg border border-base bg-white p-4 shadow-sm\">\n    <eds-search-field\n      inputClass=\"form-input min-w-[180px]\"\n      placeholder=\"Search action, target, detail\u2026\"\n      [value]=\"search()\"\n      (valueChange)=\"search.set($event)\"\n      (enter)=\"searchSubmit()\"\n    />\n    <eds-search-field\n      type=\"text\"\n      inputClass=\"form-input min-w-[180px]\"\n      placeholder=\"Filter by actor\"\n      [value]=\"actor()\"\n      (valueChange)=\"actor.set($event)\"\n      (enter)=\"searchSubmit()\"\n    />\n    <button type=\"button\" class=\"btn is-primary is-sm inline-flex items-center gap-2xs\" (click)=\"searchSubmit()\">\n      <ed-icon name=\"search\" [size]=\"18\" /> Search\n    </button>\n  </div>\n\n  @if (loading()) {\n    <p class=\"fs-sm text-light\">Loading audit events\u2026</p>\n  } @else {\n    <div class=\"overflow-x-auto rounded-lg border border-base bg-white p-0 shadow-sm\">\n      <table class=\"table-default w-full\">\n        <thead>\n          <tr>\n            <th>When</th>\n            <th>Actor</th>\n            <th>Action</th>\n            <th>Target</th>\n            <th>Detail</th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (event of events(); track event.id) {\n            <tr>\n              <td class=\"font-['IBM_Plex_Mono'] fs-sm text-light\">{{ event.at | date: 'medium' }}</td>\n              <td>{{ event.actor }}</td>\n              <td class=\"fs-sm font-semibold text-dark\">{{ event.action }}</td>\n              <td class=\"font-['IBM_Plex_Mono'] fs-sm text-light\">{{ event.target }}</td>\n              <td>{{ event.detail }}</td>\n            </tr>\n          } @empty {\n            <tr>\n              <td colspan=\"5\" class=\"p-8 text-center text-light\">No events match your filters.</td>\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n\n    <footer class=\"mt-4 flex items-center justify-between border-t border-zinc-200 pt-3\">\n      <span class=\"fs-sm text-light\">\n        Page {{ page() }} of {{ totalPages() }} \u00B7 {{ total() }} total\n      </span>\n      <div class=\"flex gap-2\">\n        <button type=\"button\" class=\"btn is-secondary is-sm inline-flex items-center gap-2xs\" [disabled]=\"page() <= 1\" (click)=\"prevPage()\">Previous</button>\n        <button type=\"button\" class=\"btn is-secondary is-sm inline-flex items-center gap-2xs\" [disabled]=\"page() >= totalPages()\" (click)=\"nextPage()\">Next</button>\n      </div>\n    </footer>\n  }\n</div>\n" }]
+        }] });
+
+export { AuditPageComponent };
+//# sourceMappingURL=edvak99-voice-receptionist-widget-audit-page.component-dBl3Kj6s.mjs.map

package/fesm2022/edvak99-voice-receptionist-widget-audit-page.component-dBl3Kj6s.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"edvak99-voice-receptionist-widget-audit-page.component-dBl3Kj6s.mjs","sources":["../../../src/lib/pages/audit-page/audit-page.component.ts","../../../src/lib/pages/audit-page/audit-page.component.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, inject, OnInit, signal } from '@angular/core';\nimport { DatePipe } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\n\nimport { AuditEvent } from '../../models/ai-receptionist.types';\nimport { DEFAULT_PAGE_SIZE, totalPages as calcTotalPages } from '../../models/pagination';\nimport { AiReceptionistApiService } from '../../services/ai-receptionist-api.service';\nimport { IconComponent } from '../../ui/ed-icon.component';\nimport { EdsSearchFieldComponent } from '../../ui/eds-search-field.component';\n\n@Component({\n  selector: 'eds-audit-page',\n  imports: [DatePipe, FormsModule, IconComponent, EdsSearchFieldComponent],\n  templateUrl: './audit-page.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AuditPageComponent implements OnInit {\n  private readonly api = inject(AiReceptionistApiService);\n\n  protected readonly pageSize = DEFAULT_PAGE_SIZE;\n  protected readonly events = signal<AuditEvent[]>([]);\n  protected readonly total = signal(0);\n  protected readonly page = signal(1);\n  protected readonly search = signal('');\n  protected readonly actor = signal('');\n  protected readonly loading = signal(true);\n\n  ngOnInit(): void {\n    this.load();\n  }\n\n  protected load(): void {\n    this.loading.set(true);\n    this.api\n      .getAudit(this.search() || undefined, {\n        page: this.page(),\n        limit: DEFAULT_PAGE_SIZE,\n      })\n      .subscribe({\n        next: ({ items, total, page }) => {\n          this.events.set(items);\n          this.total.set(total);\n          this.page.set(page);\n          this.loading.set(false);\n        },\n        error: () => this.loading.set(false),\n      });\n  }\n\n  protected searchSubmit(): void {\n    this.page.set(1);\n    this.load();\n  }\n\n  protected totalPages(): number {\n    return calcTotalPages(this.total(), DEFAULT_PAGE_SIZE);\n  }\n\n  protected prevPage(): void {\n    if (this.page() <= 1) return;\n    this.page.update((p) => p - 1);\n    this.load();\n  }\n\n  protected nextPage(): void {\n    if (this.page() >= this.totalPages()) return;\n    this.page.update((p) => p + 1);\n    this.load();\n  }\n}\n","<div class=\"p-md bg-lighter min-h-full\">\n  <header class=\"mb-5\">\n    <div>\n      <h4>Audit log</h4>\n      <p class=\"fs-sm text-light\">Track configuration and agent activity</p>\n    </div>\n  </header>\n\n  <div class=\"mb-4 flex flex-wrap items-center gap-3 rounded-lg border border-base bg-white p-4 shadow-sm\">\n    <eds-search-field\n      inputClass=\"form-input min-w-[180px]\"\n      placeholder=\"Search action, target, detail…\"\n      [value]=\"search()\"\n      (valueChange)=\"search.set($event)\"\n      (enter)=\"searchSubmit()\"\n    />\n    <eds-search-field\n      type=\"text\"\n      inputClass=\"form-input min-w-[180px]\"\n      placeholder=\"Filter by actor\"\n      [value]=\"actor()\"\n      (valueChange)=\"actor.set($event)\"\n      (enter)=\"searchSubmit()\"\n    />\n    <button type=\"button\" class=\"btn is-primary is-sm inline-flex items-center gap-2xs\" (click)=\"searchSubmit()\">\n      <ed-icon name=\"search\" [size]=\"18\" /> Search\n    </button>\n  </div>\n\n  @if (loading()) {\n    <p class=\"fs-sm text-light\">Loading audit events…</p>\n  } @else {\n    <div class=\"overflow-x-auto rounded-lg border border-base bg-white p-0 shadow-sm\">\n      <table class=\"table-default w-full\">\n        <thead>\n          <tr>\n            <th>When</th>\n            <th>Actor</th>\n            <th>Action</th>\n            <th>Target</th>\n            <th>Detail</th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (event of events(); track event.id) {\n            <tr>\n              <td class=\"font-['IBM_Plex_Mono'] fs-sm text-light\">{{ event.at | date: 'medium' }}</td>\n              <td>{{ event.actor }}</td>\n              <td class=\"fs-sm font-semibold text-dark\">{{ event.action }}</td>\n              <td class=\"font-['IBM_Plex_Mono'] fs-sm text-light\">{{ event.target }}</td>\n              <td>{{ event.detail }}</td>\n            </tr>\n          } @empty {\n            <tr>\n              <td colspan=\"5\" class=\"p-8 text-center text-light\">No events match your filters.</td>\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n\n    <footer class=\"mt-4 flex items-center justify-between border-t border-zinc-200 pt-3\">\n      <span class=\"fs-sm text-light\">\n        Page {{ page() }} of {{ totalPages() }} · {{ total() }} total\n      </span>\n      <div class=\"flex gap-2\">\n        <button type=\"button\" class=\"btn is-secondary is-sm inline-flex items-center gap-2xs\" [disabled]=\"page() <= 1\" (click)=\"prevPage()\">Previous</button>\n        <button type=\"button\" class=\"btn is-secondary is-sm inline-flex items-center gap-2xs\" [disabled]=\"page() >= totalPages()\" (click)=\"nextPage()\">Next</button>\n      </div>\n    </footer>\n  }\n</div>\n"],"names":["calcTotalPages"],"mappings":"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"}