@edvak99/voice-receptionist-widget 1.1.13 → 1.1.15

package/fesm2022/edvak99-voice-receptionist-widget-call-recording-player.component-CyZiBucx.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"edvak99-voice-receptionist-widget-call-recording-player.component-CyZiBucx.mjs","sources":["../../../src/lib/components/call-recording-player/call-recording-player.component.ts","../../../src/lib/components/call-recording-player/call-recording-player.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  inject,\n  input,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';\nimport { catchError, distinctUntilChanged, EMPTY, map, switchMap, tap } from 'rxjs';\n\nimport { EdSkeletonComponent } from '../../ui/ed-skeleton.component';\n\nimport { CallRecordingStatus } from '../../models/ai-receptionist.types';\nimport { AiReceptionistApiService } from '../../services/ai-receptionist-api.service';\nimport { IconComponent } from '../../ui/ed-icon.component';\n\ntype PlayerPhase = 'loading' | CallRecordingStatus | 'error';\n\n@Component({\n    selector: 'eds-call-recording-player',\n    imports: [IconComponent, EdSkeletonComponent],\n    templateUrl: './call-recording-player.component.html',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CallRecordingPlayerComponent {\n  readonly callId = input.required<string>();\n  readonly currentTimeChange = output<number>();\n  readonly durationChange = output<number>();\n\n  private readonly audioRef = viewChild<ElementRef<HTMLAudioElement>>('audioEl');\n\n  private readonly api = inject(AiReceptionistApiService);\n  private readonly destroyRef = inject(DestroyRef);\n\n  protected readonly phase = signal<PlayerPhase>('loading');\n  protected readonly blobUrl = signal<string | null>(null);\n  protected readonly durationSeconds = signal<number | null>(null);\n  protected readonly message = signal<string | null>(null);\n\n  /** Tracked outside signals so cleanup never reads blobUrl (avoids effect/subscription loops). */\n  private objectUrl: string | null = null;\n\n  constructor() {\n    toObservable(this.callId)\n      .pipe(\n        distinctUntilChanged(),\n        tap(() => this.revokeObjectUrl()),\n        switchMap((id) => {\n          if (!id) {\n            this.resetUi();\n            return EMPTY;\n          }\n          this.phase.set('loading');\n          this.message.set(null);\n          return this.api.getCallRecording(id).pipe(\n            switchMap((meta) => {\n              if (meta.status !== 'ready' || !meta.url) {\n                this.phase.set(meta.status);\n                this.message.set(meta.message ?? null);\n                this.durationSeconds.set(meta.durationSeconds ?? null);\n                return EMPTY;\n              }\n              this.durationSeconds.set(meta.durationSeconds ?? null);\n              return this.api.getCallRecordingBlob(meta.url).pipe(\n                map((blob) => blob),\n                catchError(() => {\n                  this.phase.set('error');\n                  this.message.set('Could not load recording audio.');\n                  return EMPTY;\n                }),\n              );\n            }),\n            catchError(() => {\n              this.phase.set('unavailable');\n              this.message.set('Could not load recording metadata.');\n              return EMPTY;\n            }),\n          );\n        }),\n        takeUntilDestroyed(),\n      )\n      .subscribe((blob) => {\n        this.revokeObjectUrl();\n        this.objectUrl = URL.createObjectURL(blob);\n        this.blobUrl.set(this.objectUrl);\n        this.phase.set('ready');\n        this.message.set(null);\n        const dur = this.durationSeconds();\n        if (dur != null && dur > 0) {\n          this.durationChange.emit(dur);\n        }\n      });\n\n    this.destroyRef.onDestroy(() => this.revokeObjectUrl());\n  }\n\n  protected formatDuration(seconds: number): string {\n    const m = Math.floor(seconds / 60);\n    const s = seconds % 60;\n    return `${m}:${s.toString().padStart(2, '0')}`;\n  }\n\n  protected onAudioError(): void {\n    this.phase.set('error');\n    this.message.set('Playback error — try reloading the page.');\n  }\n\n  protected onTimeUpdate(event: Event): void {\n    const el = event.target as HTMLAudioElement;\n    this.currentTimeChange.emit(el.currentTime);\n  }\n\n  protected onLoadedMetadata(event: Event): void {\n    const el = event.target as HTMLAudioElement;\n    if (Number.isFinite(el.duration) && el.duration > 0) {\n      this.durationChange.emit(el.duration);\n    }\n  }\n\n  /** Seek playback — used by synced transcript lines. */\n  seekTo(seconds: number): void {\n    const el = this.audioRef()?.nativeElement;\n    if (!el) return;\n    el.currentTime = Math.max(0, seconds);\n    void el.play().catch(() => undefined);\n    this.currentTimeChange.emit(el.currentTime);\n  }\n\n  private revokeObjectUrl(): void {\n    if (this.objectUrl) {\n      URL.revokeObjectURL(this.objectUrl);\n      this.objectUrl = null;\n    }\n    this.blobUrl.set(null);\n  }\n\n  private resetUi(): void {\n    this.phase.set('loading');\n    this.durationSeconds.set(null);\n    this.message.set(null);\n  }\n}\n","<section class=\"flex flex-col gap-3 rounded-lg border border-base bg-lighter p-4\" aria-labelledby=\"call-recording-title\">\n  <header class=\"flex items-center gap-2\">\n    <ed-icon name=\"graph_new\" [size]=\"20\" />\n    <h4 id=\"call-recording-title\" class=\"m-0 flex-1\">Call recording</h4>\n    @if (durationSeconds(); as dur) {\n      <span class=\"font-['IBM_Plex_Mono'] fs-sm text-light\">{{ formatDuration(dur) }}</span>\n    }\n  </header>\n\n  @switch (phase()) {\n    @case ('loading') {\n      <div class=\"grid gap-2\" aria-busy=\"true\">\n        <ed-skeleton class=\"h-10 w-full !rounded-md\"></ed-skeleton>\n        <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\n      </div>\n    }\n    @case ('ready') {\n      @if (blobUrl(); as src) {\n        <audio\n          #audioEl\n          class=\"h-10 w-full\"\n          controls\n          [src]=\"src\"\n          (error)=\"onAudioError()\"\n          (timeupdate)=\"onTimeUpdate($event)\"\n          (loadedmetadata)=\"onLoadedMetadata($event)\"\n        >\n          Your browser does not support audio playback.\n        </audio>\n      }\n    }\n    @case ('pending') {\n      <p class=\"fs-sm text-light m-0\">\n        {{ message() ?? 'Recording is still processing…' }}\n      </p>\n    }\n    @case ('unavailable') {\n      <p class=\"fs-sm text-light m-0\">\n        {{ message() ?? 'No recording available for this call.' }}\n      </p>\n    }\n    @case ('failed') {\n      <p class=\"fs-sm text-red-600 m-0\">\n        {{ message() ?? 'Recording could not be retrieved.' }}\n      </p>\n    }\n    @case ('error') {\n      <p class=\"fs-sm text-red-600 m-0\">\n        {{ message() ?? 'Playback error.' }}\n      </p>\n    }\n  }\n</section>\n"],"names":[],"mappings":"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"}

package/fesm2022/{edvak99-voice-receptionist-widget-call-review.service-WG30w6Jl.mjs → edvak99-voice-receptionist-widget-call-review.service-bz7fCM9e.mjs}

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { inject, signal, Injectable } from '@angular/core';
 import { tap, map } from 'rxjs';
-import { A as AiReceptionistApiService } from './edvak99-voice-receptionist-widget-edvak99-voice-receptionist-widget-pS2jeB4x.mjs';
+import { A as AiReceptionistApiService } from './edvak99-voice-receptionist-widget-edvak99-voice-receptionist-widget-Dtc9wTzh.mjs';
 
 class CallReviewService {
     constructor() {
@@ -26,4 +26,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
         }] });
 
 export { CallReviewService as C };
-//# sourceMappingURL=edvak99-voice-receptionist-widget-call-review.service-WG30w6Jl.mjs.map
+//# sourceMappingURL=edvak99-voice-receptionist-widget-call-review.service-bz7fCM9e.mjs.map

package/fesm2022/{edvak99-voice-receptionist-widget-call-review.service-WG30w6Jl.mjs.map → edvak99-voice-receptionist-widget-call-review.service-bz7fCM9e.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"edvak99-voice-receptionist-widget-call-review.service-WG30w6Jl.mjs","sources":["../../../src/lib/services/call-review.service.ts"],"sourcesContent":["import { Injectable, inject, signal } from '@angular/core';\nimport { Observable, map, tap } from 'rxjs';\n\nimport { CallReviewStatus } from '../utils/call-review.util';\nimport { AiReceptionistApiService } from './ai-receptionist-api.service';\n\n@Injectable({ providedIn: 'root' })\nexport class CallReviewService {\n  private readonly api = inject(AiReceptionistApiService);\n\n  /** Cached from dashboard summary; decremented optimistically on review. */\n  readonly needsReviewCount = signal<number | null>(null);\n\n  setNeedsReviewCount(count: number): void {\n    this.needsReviewCount.set(count);\n  }\n\n  markReviewed(callId: string): Observable<CallReviewStatus> {\n    return this.api.postReview(callId).pipe(\n      tap(() => {\n        this.needsReviewCount.update((c) => (c != null && c > 0 ? c - 1 : c));\n      }),\n      map(() => 'reviewed'),\n    );\n  }\n}\n"],"names":[],"mappings":";;;;;MAOa,iBAAiB,CAAA;AAD9B,IAAA,WAAA,GAAA;AAEmB,QAAA,IAAA,CAAA,GAAG,GAAG,MAAM,CAAC,wBAAwB,CAAC;;AAG9C,QAAA,IAAA,CAAA,gBAAgB,GAAG,MAAM,CAAgB,IAAI,CAAC;AAcxD,IAAA;AAZC,IAAA,mBAAmB,CAAC,KAAa,EAAA;AAC/B,QAAA,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,KAAK,CAAC;IAClC;AAEA,IAAA,YAAY,CAAC,MAAc,EAAA;AACzB,QAAA,OAAO,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,IAAI,CACrC,GAAG,CAAC,MAAK;AACP,YAAA,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;QACvE,CAAC,CAAC,EACF,GAAG,CAAC,MAAM,UAAU,CAAC,CACtB;IACH;+GAjBW,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAAjB,IAAA,SAAA,IAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,iBAAiB,cADJ,MAAM,EAAA,CAAA,CAAA;;4FACnB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAD7B,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE;;;;;"}
+{"version":3,"file":"edvak99-voice-receptionist-widget-call-review.service-bz7fCM9e.mjs","sources":["../../../src/lib/services/call-review.service.ts"],"sourcesContent":["import { Injectable, inject, signal } from '@angular/core';\nimport { Observable, map, tap } from 'rxjs';\n\nimport { CallReviewStatus } from '../utils/call-review.util';\nimport { AiReceptionistApiService } from './ai-receptionist-api.service';\n\n@Injectable({ providedIn: 'root' })\nexport class CallReviewService {\n  private readonly api = inject(AiReceptionistApiService);\n\n  /** Cached from dashboard summary; decremented optimistically on review. */\n  readonly needsReviewCount = signal<number | null>(null);\n\n  setNeedsReviewCount(count: number): void {\n    this.needsReviewCount.set(count);\n  }\n\n  markReviewed(callId: string): Observable<CallReviewStatus> {\n    return this.api.postReview(callId).pipe(\n      tap(() => {\n        this.needsReviewCount.update((c) => (c != null && c > 0 ? c - 1 : c));\n      }),\n      map(() => 'reviewed'),\n    );\n  }\n}\n"],"names":[],"mappings":";;;;;MAOa,iBAAiB,CAAA;AAD9B,IAAA,WAAA,GAAA;AAEmB,QAAA,IAAA,CAAA,GAAG,GAAG,MAAM,CAAC,wBAAwB,CAAC;;AAG9C,QAAA,IAAA,CAAA,gBAAgB,GAAG,MAAM,CAAgB,IAAI,CAAC;AAcxD,IAAA;AAZC,IAAA,mBAAmB,CAAC,KAAa,EAAA;AAC/B,QAAA,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,KAAK,CAAC;IAClC;AAEA,IAAA,YAAY,CAAC,MAAc,EAAA;AACzB,QAAA,OAAO,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,IAAI,CACrC,GAAG,CAAC,MAAK;AACP,YAAA,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;QACvE,CAAC,CAAC,EACF,GAAG,CAAC,MAAM,UAAU,CAAC,CACtB;IACH;+GAjBW,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAAjB,IAAA,SAAA,IAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,iBAAiB,cADJ,MAAM,EAAA,CAAA,CAAA;;4FACnB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAD7B,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE;;;;;"}

package/fesm2022/{edvak99-voice-receptionist-widget-call-review.util-Deh3jPgo.mjs → edvak99-voice-receptionist-widget-call-review.util-rWIPxDtQ.mjs}

@@ -2,7 +2,7 @@ function reviewLabel(status) {
     return status === 'reviewed' ? 'Reviewed' : 'Pending review';
 }
 function reviewBadgeTone(status) {
-    return status === 'reviewed' ? 'pos' : 'notice';
+    return status === 'reviewed' ? 'success' : 'warning';
 }
 function isNeedsReview(status) {
     return status === 'needs';
@@ -18,4 +18,4 @@ function matchesReviewFilter(status, tab) {
 }
 
 export { isNeedsReview as i };
-//# sourceMappingURL=edvak99-voice-receptionist-widget-call-review.util-Deh3jPgo.mjs.map
+//# sourceMappingURL=edvak99-voice-receptionist-widget-call-review.util-rWIPxDtQ.mjs.map

package/fesm2022/edvak99-voice-receptionist-widget-call-review.util-rWIPxDtQ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"edvak99-voice-receptionist-widget-call-review.util-rWIPxDtQ.mjs","sources":["../../../src/lib/utils/call-review.util.ts"],"sourcesContent":["export type CallReviewStatus = 'needs' | 'reviewed';\n\nexport function reviewLabel(status: CallReviewStatus): string {\n  return status === 'reviewed' ? 'Reviewed' : 'Pending review';\n}\n\nimport { BadgeTone } from '../ui/eds-badge.component';\n\nexport function reviewBadgeTone(status: CallReviewStatus): BadgeTone {\n  return status === 'reviewed' ? 'success' : 'warning';\n}\n\nexport function isNeedsReview(status: CallReviewStatus): boolean {\n  return status === 'needs';\n}\n\n/** Normalize legacy or API values to CallReviewStatus. */\nexport function normalizeReviewStatus(value: string | undefined | null): CallReviewStatus {\n  return value === 'reviewed' ? 'reviewed' : 'needs';\n}\n\nexport type ReviewFilterTab = 'all' | 'needs' | 'reviewed';\n\nexport function matchesReviewFilter(\n  status: CallReviewStatus,\n  tab: ReviewFilterTab,\n): boolean {\n  if (tab === 'all') return true;\n  return status === tab;\n}\n"],"names":[],"mappings":"AAEM,SAAU,WAAW,CAAC,MAAwB,EAAA;IAClD,OAAO,MAAM,KAAK,UAAU,GAAG,UAAU,GAAG,gBAAgB;AAC9D;AAIM,SAAU,eAAe,CAAC,MAAwB,EAAA;IACtD,OAAO,MAAM,KAAK,UAAU,GAAG,SAAS,GAAG,SAAS;AACtD;AAEM,SAAU,aAAa,CAAC,MAAwB,EAAA;IACpD,OAAO,MAAM,KAAK,OAAO;AAC3B;AAEA;AACM,SAAU,qBAAqB,CAAC,KAAgC,EAAA;IACpE,OAAO,KAAK,KAAK,UAAU,GAAG,UAAU,GAAG,OAAO;AACpD;AAIM,SAAU,mBAAmB,CACjC,MAAwB,EACxB,GAAoB,EAAA;IAEpB,IAAI,GAAG,KAAK,KAAK;AAAE,QAAA,OAAO,IAAI;IAC9B,OAAO,MAAM,KAAK,GAAG;AACvB;;;;"}

package/fesm2022/edvak99-voice-receptionist-widget-dashboard-page.component-CF8VfDOy.mjs

@@ -0,0 +1,291 @@
+import * as i0 from '@angular/core';
+import { inject, signal, computed, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component } from '@angular/core';
+import { Router, ActivatedRoute, RouterLink } from '@angular/router';
+import { DatePipe } from '@angular/common';
+import { A as AiReceptionistApiService, L as LiveCallsListService, a as AgentOnlineService, h as historyResolution, i as isUnknownCaller, c as callerMetaLine, b as ageFromDob, d as historyResultChips, r as resultChipIcon, e as historyResolutionLabel, E as EdAvatarComponent, f as EdButtonComponent, I as IconComponent, g as EdSkeletonComponent } from './edvak99-voice-receptionist-widget-edvak99-voice-receptionist-widget-Dtc9wTzh.mjs';
+import { s as sentimentIconSrc, a as sentimentLabel, E as EdsElapsedPipe } from './edvak99-voice-receptionist-widget-eds-elapsed.pipe-Dra7e7xN.mjs';
+import { i as isNeedsReview } from './edvak99-voice-receptionist-widget-call-review.util-rWIPxDtQ.mjs';
+import { S as SmartTooltipDirective } from './edvak99-voice-receptionist-widget-smart-tooltip.directive-ChEdIem3.mjs';
+import { T as TABLE_SKELETON_ROWS } from './edvak99-voice-receptionist-widget-table-skeleton.constants-C1Dg9Z_2.mjs';
+import { E as EdsPulseDotComponent } from './edvak99-voice-receptionist-widget-eds-pulse-dot.component-B8yxY-7p.mjs';
+
+class DashboardPageComponent {
+    constructor() {
+        this.api = inject(AiReceptionistApiService);
+        this.liveCallsList = inject(LiveCallsListService);
+        this.agentOnline = inject(AgentOnlineService);
+        this.router = inject(Router);
+        this.route = inject(ActivatedRoute);
+        this.data = signal(null);
+        this.loading = signal(true);
+        this.kpiSkeletonRows = [0, 1, 2, 3];
+        this.listSkeletonRows = [0, 1, 2];
+        this.skeletonRows = TABLE_SKELETON_ROWS;
+        this.liveCalls = this.liveCallsList.calls;
+        this.liveCallsLoading = this.liveCallsList.loading;
+        this.liveCallsError = this.liveCallsList.error;
+        this.agentOffline = computed(() => this.agentOnline.online() === false);
+        this.kpiCards = computed(() => {
+            const stats = this.data()?.stats;
+            if (!stats)
+                return [];
+            const calls = stats.answeredToday;
+            const resolvedCount = Math.round((stats.completionRate / 100) * Math.max(calls, 1));
+            return [
+                {
+                    id: 'calls',
+                    label: 'Calls handled',
+                    value: String(calls),
+                    meta: 'Today',
+                    link: '../history',
+                },
+                {
+                    id: 'appointments',
+                    label: 'Appointments booked',
+                    value: String(stats.appointmentsBooked),
+                    meta: 'Created by AI',
+                    link: '../activities',
+                    queryParams: { tab: 'appointments' },
+                },
+                {
+                    id: 'tasks',
+                    label: 'Tasks created',
+                    value: String(stats.tasksCreated),
+                    meta: 'Created by AI',
+                    link: '../activities',
+                },
+                {
+                    id: 'resolved',
+                    label: 'Resolved without staff',
+                    value: `${stats.completionRate}%`,
+                    meta: calls > 0 ? `${resolvedCount} of ${calls} calls` : 'AI handled',
+                    link: '../activities',
+                },
+            ];
+        });
+        this.liveCallRows = computed(() => this.liveCalls().map((call) => this.toLiveCallRow(call)));
+        this.liveCallCount = computed(() => this.liveCallRows().length);
+        this.attentionRows = computed(() => {
+            const fromLive = this.liveCalls()
+                .filter((c) => this.isAssistanceStatus(c.status) || c.sentiment === 'frustrated' || c.sentiment === 'urgent')
+                .map((c) => this.toAttentionFromLive(c));
+            const fromHistory = (this.data()?.recentHistory ?? [])
+                .filter((row) => historyResolution({
+                outcome: row.outcome,
+                resolution: row.resolution,
+                risk: row.risk,
+            }) === 'needs_attention')
+                .map((row) => this.toAttentionFromHistory(row));
+            const seen = new Set();
+            const merged = [];
+            for (const item of [...fromLive, ...fromHistory]) {
+                if (seen.has(item.callId))
+                    continue;
+                seen.add(item.callId);
+                merged.push(item);
+                if (merged.length >= 6)
+                    break;
+            }
+            return merged;
+        });
+        this.attentionCount = computed(() => this.attentionRows().length);
+        this.recentHistoryRows = computed(() => (this.data()?.recentHistory ?? []).map((row) => this.toRecentHistoryRow(row)));
+        this.recentHistoryCount = computed(() => this.recentHistoryRows().length);
+    }
+    ngOnInit() {
+        this.liveCallsList.start();
+        this.api.getDashboard().subscribe(({ data }) => {
+            this.data.set(data);
+            this.loading.set(false);
+        });
+    }
+    ngOnDestroy() {
+        this.liveCallsList.stop();
+    }
+    exportCsv() {
+        // mock export
+    }
+    openHistoryDetail(id) {
+        void this.router.navigate(['../history', id], { relativeTo: this.route });
+    }
+    openLiveCall(id) {
+        void this.router.navigate(['../live', id], { relativeTo: this.route });
+    }
+    openAttention(item) {
+        const live = this.liveCalls().some((c) => c.id === item.callId);
+        void this.router.navigate(live ? ['../live', item.callId] : ['../history', item.callId], {
+            relativeTo: this.route,
+        });
+    }
+    toLiveCallRow(call) {
+        const unknown = isUnknownCaller(call.name, call.matched);
+        const needsAssistance = this.isAssistanceStatus(call.status);
+        const staffHandling = call.status === 'takeover' || call.controlMode === 'takeover';
+        const lastTool = call.tools[call.tools.length - 1];
+        return {
+            id: call.id,
+            name: unknown ? 'Unknown Caller' : call.name.trim() || 'Unknown Caller',
+            initials: unknown ? '?' : call.initials || '?',
+            avatarTone: unknown ? 'gray' : 'warm',
+            metaLine: callerMetaLine({
+                name: call.name,
+                matched: call.matched,
+                phone: call.phone,
+                dob: call.dob,
+                age: call.age ?? ageFromDob(call.dob),
+                gender: call.gender,
+            }),
+            sentiment: call.sentiment,
+            sentimentLabel: sentimentLabel(call.sentiment),
+            sentimentIconSrc: sentimentIconSrc(call.sentiment),
+            direction: call.direction,
+            directionIcon: call.direction === 'inbound' ? 'call_received' : 'call_made',
+            directionTitle: call.direction === 'inbound' ? 'Incoming call' : 'Outgoing call',
+            goal: call.reason || call.goal || '—',
+            statusSubtitle: lastTool?.result || call.goal || 'In progress…',
+            handlingLabel: needsAssistance
+                ? 'NEED ASSISTANCE'
+                : staffHandling
+                    ? 'STAFF HANDLING'
+                    : 'AI HANDLING',
+            handlingVariant: needsAssistance ? 'danger' : staffHandling ? 'success' : 'opened',
+            needsAssistance,
+            started: call.started,
+        };
+    }
+    toAttentionFromLive(call) {
+        const unknown = isUnknownCaller(call.name, call.matched);
+        return {
+            id: `live-${call.id}`,
+            callId: call.id,
+            name: unknown ? 'Unknown Caller' : call.name.trim() || 'Unknown Caller',
+            initials: unknown ? '?' : call.initials || '?',
+            avatarTone: unknown ? 'gray' : 'violet',
+            metaLine: callerMetaLine({
+                name: call.name,
+                matched: call.matched,
+                phone: call.phone,
+                dob: call.dob,
+                age: call.age ?? ageFromDob(call.dob),
+                gender: call.gender,
+            }),
+            badge: this.attentionBadgeFromLive(call),
+            detail: call.goal || call.reason || 'Needs staff follow-up.',
+            timeLabel: 'Just now',
+            direction: call.direction,
+            directionIcon: call.direction === 'inbound' ? 'call_received' : 'call_made',
+            directionTitle: call.direction === 'inbound' ? 'Incoming call' : 'Outgoing call',
+        };
+    }
+    toAttentionFromHistory(row) {
+        const unknown = isUnknownCaller(row.name);
+        const inbound = row.direction === 'inbound';
+        return {
+            id: `hist-${row.id}`,
+            callId: row.id,
+            name: unknown ? 'Unknown Caller' : row.name.trim() || 'Unknown Caller',
+            initials: unknown || !row.initials ? '?' : row.initials,
+            avatarTone: unknown || row.initials === '?' ? 'gray' : 'violet',
+            metaLine: callerMetaLine({
+                dob: row.dob,
+                age: row.age,
+                gender: row.gender,
+                phone: row.phone,
+                name: row.name,
+            }),
+            badge: this.attentionBadgeFromHistory(row),
+            detail: row.reason || row.outcome || 'Needs review.',
+            timeLabel: row.whenLabel || 'Recently',
+            direction: row.direction,
+            directionIcon: inbound ? 'call_received' : 'call_made',
+            directionTitle: inbound ? 'Incoming call' : 'Outgoing call',
+        };
+    }
+    toRecentHistoryRow(row) {
+        const unknown = isUnknownCaller(row.name);
+        const resolution = historyResolution({
+            outcome: row.outcome,
+            resolution: row.resolution,
+            risk: row.risk,
+        });
+        const handledByStaff = row.handledBy === 'staff';
+        const inbound = row.direction === 'inbound';
+        const chips = historyResultChips(row.results, row.outcome);
+        return {
+            id: row.id,
+            name: row.name || 'Unknown Caller',
+            initials: row.initials || '?',
+            avatarTone: unknown || row.initials === '?' ? 'gray' : 'brand',
+            metaLine: callerMetaLine({
+                dob: row.dob,
+                age: row.age,
+                gender: row.gender,
+                phone: row.phone,
+                name: row.name,
+            }),
+            direction: row.direction,
+            directionIcon: inbound ? 'call_received' : 'call_made',
+            directionTitle: inbound ? 'Incoming call' : 'Outgoing call',
+            reason: row.reason || '—',
+            handledByLabel: handledByStaff ? 'STAFF' : 'AI',
+            handledByVariant: handledByStaff ? 'primary' : 'opened',
+            resolution,
+            resolutionLabel: historyResolutionLabel(resolution),
+            resolutionVariant: resolution === 'resolved' ? 'success' : 'warning',
+            resultChips: chips.map((label) => ({ label, icon: resultChipIcon(label) })),
+            durationLabel: row.durationLabel ?? this.formatDuration(row.duration),
+            started: row.started || null,
+            whenLabel: row.whenLabel || '—',
+            needsReview: isNeedsReview(row.review),
+        };
+    }
+    isAssistanceStatus(status) {
+        return status === 'needs-help' || status === 'human-requested' || status === 'urgent';
+    }
+    attentionBadgeFromLive(call) {
+        if (call.status === 'urgent')
+            return 'SAFETY ESCALATION';
+        if (call.status === 'human-requested')
+            return 'HUMAN REQUESTED';
+        if (call.verification === 'failed' || call.verification === 'unknown')
+            return 'IDENTITY UNRESOLVED';
+        if (call.status === 'needs-help')
+            return 'NEED ASSISTANCE';
+        return 'NEEDS REVIEW';
+    }
+    attentionBadgeFromHistory(row) {
+        const o = (row.outcome || row.reason || '').toLowerCase();
+        if (o.includes('book') || o.includes('appoint'))
+            return 'BOOKING FAILURE';
+        if (o.includes('ident') || row.verification === 'failed' || row.verification === 'unknown') {
+            return 'IDENTITY UNRESOLVED';
+        }
+        if (row.risk === 'urgent')
+            return 'SAFETY ESCALATION';
+        return 'NEEDS REVIEW';
+    }
+    formatDuration(sec) {
+        const m = Math.floor(sec / 60);
+        const s = sec % 60;
+        return `${m}:${s.toString().padStart(2, '0')}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DashboardPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: DashboardPageComponent, isStandalone: true, selector: "eds-dashboard-page", host: { classAttribute: "block h-full min-h-0" }, ngImport: i0, template: "<div class=\"flex h-full  flex-col overflow-auto bg-lighter p-base dashboard-page\">\n  <header class=\"mb-base flex shrink-0 items-start justify-between gap-base\">\n    <div class=\"flex flex-col gap-2xs\">\n      <h3>Dashboard</h3>\n      <p class=\"fs-sm text-light\">Monitor AI receptionist activity and follow up where needed</p>\n    </div>\n    <ed-button\n      class=\"shrink-0\"\n      variant=\"default\"\n      size=\"sm\"\n      (click$)=\"exportCsv()\">\n      <ed-icon slot=\"prefix\" name=\"download\" [size]=\"16\" />\n      Export CSV\n    </ed-button>\n  </header>\n\n  <div class=\"flex  flex-1 flex-col gap-base  \">\n  @if (loading()) {\n    <section class=\"grid grid-cols-1 gap-base sm:grid-cols-2 xl:grid-cols-4\" aria-label=\"Overview KPIs\" aria-busy=\"true\">\n      @for (_ of kpiSkeletonRows; track _) {\n        <article class=\"flex flex-col gap-xs overflow-hidden rounded-md border border-light bg-white p-base\">\n          <ed-skeleton class=\"h-3 w-28\"></ed-skeleton>\n          <ed-skeleton class=\"h-6 w-14\"></ed-skeleton>\n          <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\n        </article>\n      }\n    </section>\n\n    <section\n      class=\"grid grid-cols-1 items-start gap-base xl:grid-cols-[minmax(0,785fr)_minmax(0,415fr)]\"\n      aria-label=\"Live calls and needs attention\"\n      aria-busy=\"true\"\n    >\n      <article class=\"flex flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base\">\n        <header class=\"flex shrink-0 items-center justify-between gap-sm\">\n          <div class=\"flex items-center gap-sm\">\n            <h4>Live Calls</h4>\n            <ed-skeleton class=\"h-5 w-16 !rounded-full\"></ed-skeleton>\n          </div>\n          <ed-skeleton class=\"h-3 w-16\"></ed-skeleton>\n        </header>\n        <ul class=\"m-0 grid max-h-64 list-none content-start gap-xs overflow-x-hidden overflow-y-auto p-0\">\n          @for (_ of listSkeletonRows; track _) {\n            <li>\n              <div class=\"flex w-full items-center gap-base rounded-md border border-light bg-white p-sm\">\n                <div class=\"flex min-w-0 flex-1 items-center gap-xs xl:max-w-xs\">\n                  <ed-skeleton class=\"h-9 w-9 shrink-0 !rounded-md\"></ed-skeleton>\n                  <div class=\"grid min-w-0 flex-1 gap-2xs\">\n                    <ed-skeleton class=\"h-3 w-32\"></ed-skeleton>\n                    <ed-skeleton class=\"h-3 w-40\"></ed-skeleton>\n                  </div>\n                </div>\n                <div class=\"hidden min-w-0 flex-1 items-center gap-xs xl:flex\">\n                  <ed-skeleton class=\"h-9 w-9 shrink-0 !rounded-md\"></ed-skeleton>\n                  <div class=\"grid min-w-0 gap-2xs\">\n                    <ed-skeleton class=\"h-3 w-28\"></ed-skeleton>\n                    <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\n                  </div>\n                </div>\n                <div class=\"grid shrink-0 justify-items-end gap-2xs self-stretch\">\n                  <ed-skeleton class=\"h-5 w-24 !rounded-full\"></ed-skeleton>\n                  <ed-skeleton class=\"h-3 w-12\"></ed-skeleton>\n                </div>\n              </div>\n            </li>\n          }\n        </ul>\n      </article>\n\n      <article class=\"flex flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base\">\n        <header class=\"flex shrink-0 items-center justify-between gap-sm\">\n          <div class=\"flex items-center gap-sm\">\n            <h4>Needs Attention</h4>\n            <ed-skeleton class=\"h-5 w-8 !rounded-full\"></ed-skeleton>\n          </div>\n          <ed-skeleton class=\"h-3 w-16\"></ed-skeleton>\n        </header>\n        <ul class=\"m-0 grid max-h-64 list-none content-start gap-xs overflow-x-hidden overflow-y-auto p-0\">\n          @for (_ of listSkeletonRows; track _) {\n            <li>\n              <div class=\"flex w-full flex-col gap-xs overflow-hidden rounded-md border border-light bg-white p-sm\">\n                <div class=\"flex w-full min-w-0 items-center gap-xs\">\n                  <div class=\"flex min-w-0 flex-1 items-center gap-xs\">\n                    <ed-skeleton class=\"h-9 w-9 shrink-0 !rounded-md\"></ed-skeleton>\n                    <div class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\n                      <ed-skeleton class=\"h-3 w-32\"></ed-skeleton>\n                      <ed-skeleton class=\"h-3 w-36\"></ed-skeleton>\n                    </div>\n                  </div>\n                  <ed-skeleton class=\"h-5 w-28 shrink-0 !rounded-full\"></ed-skeleton>\n                </div>\n                <div class=\"flex w-full min-w-0 items-center gap-sm\">\n                  <div class=\"flex min-w-0 flex-1 items-center gap-xs\">\n                    <ed-skeleton class=\"h-8 w-8 shrink-0 !rounded-md\"></ed-skeleton>\n                    <ed-skeleton class=\"h-3 w-full max-w-xs\"></ed-skeleton>\n                  </div>\n                  <ed-skeleton class=\"h-3 w-14 shrink-0\"></ed-skeleton>\n                </div>\n              </div>\n            </li>\n          }\n        </ul>\n      </article>\n    </section>\n\n    <article class=\"flex flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base\" aria-busy=\"true\">\n      <header class=\"flex items-center justify-between gap-xs\">\n        <div class=\"flex items-center gap-sm\">\n          <h4>Recent Calls</h4>\n          <ed-skeleton class=\"h-5 w-8 !rounded-full\"></ed-skeleton>\n        </div>\n        <ed-skeleton class=\"h-3 w-16\"></ed-skeleton>\n      </header>\n      <div class=\"overflow-x-auto bg-white rounded-md\">\n        <table class=\"table-default relative min-w-5xl w-full\" aria-label=\"Recent calls\">\n          <thead>\n            <tr>\n              <th>Time</th>\n              <th>Patient/Caller</th>\n              <th class=\"w-16 text-center\" aria-label=\"Direction\">\n                <span class=\"inline-flex items-center justify-center gap-2xs\">\n                  <ed-icon name=\"call_received\" [size]=\"12\" class=\"text-success\" color=\"currentColor\" />\n                  <span class=\"text-light\">/</span>\n                  <ed-icon name=\"call_made\" [size]=\"12\" class=\"text-primary\" color=\"currentColor\" />\n                </span>\n              </th>\n              <th>Goal</th>\n              <th>Handled By</th>\n              <th>Resolution</th>\n              <th>Result</th>\n              <th>Duration</th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (_ of skeletonRows; track _) {\n              <tr>\n                <td>\n                  <div class=\"grid gap-2xs py-2xs\">\n                    <ed-skeleton class=\"h-3 w-12\"></ed-skeleton>\n                    <ed-skeleton class=\"h-3 w-20\"></ed-skeleton>\n                  </div>\n                </td>\n                <td>\n                  <div class=\"flex items-center gap-xs py-2xs\">\n                    <ed-skeleton class=\"h-8 w-8 !rounded-md\"></ed-skeleton>\n                    <div class=\"grid gap-2xs\">\n                      <ed-skeleton class=\"h-3 w-28\"></ed-skeleton>\n                      <ed-skeleton class=\"h-3 w-36\"></ed-skeleton>\n                    </div>\n                  </div>\n                </td>\n                <td class=\"text-center\">\n                  <div class=\"flex justify-center py-2xs\">\n                    <ed-skeleton class=\"h-5 w-5 !rounded\"></ed-skeleton>\n                  </div>\n                </td>\n                <td><ed-skeleton class=\"h-3 w-32\"></ed-skeleton></td>\n                <td><ed-skeleton class=\"h-5 w-12 !rounded-full\"></ed-skeleton></td>\n                <td><ed-skeleton class=\"h-5 w-20 !rounded-full\"></ed-skeleton></td>\n                <td><ed-skeleton class=\"h-5 w-28 !rounded\"></ed-skeleton></td>\n                <td><ed-skeleton class=\"h-3 w-10\"></ed-skeleton></td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    </article>\n  } @else if (data()) {\n    <section class=\"grid grid-cols-1 gap-base sm:grid-cols-2 xl:grid-cols-4\" aria-label=\"Overview KPIs\">\n      @for (tile of kpiCards(); track tile.id) {\n        @if (tile.link) {\n          <a\n            [routerLink]=\"tile.link\"\n            [queryParams]=\"tile.queryParams ?? null\"\n            class=\"flex flex-col gap-xs overflow-hidden rounded-md border border-light bg-white p-base no-underline text-inherit transition-colors hover:bg-primary-100 hover:shadow-sm\">\n            <span class=\"fs-xs font-semibold uppercase tracking-wide text-light\">{{ tile.label }}</span>\n            <h3>{{ tile.value }}</h3>\n            <span class=\"fs-xs text-light\">{{ tile.meta }}</span>\n          </a>\n        } @else {\n          <article class=\"flex flex-col gap-xs overflow-hidden rounded-md border border-light bg-white p-base\">\n            <span class=\"fs-xs font-semibold uppercase tracking-wide text-light\">{{ tile.label }}</span>\n            <h3>{{ tile.value }}</h3>\n            <span class=\"fs-sm text-light\">{{ tile.meta }}</span>\n          </article>\n        }\n      }\n    </section>\n\n    <section\n      class=\"grid grid-cols-1 items-start gap-base xl:grid-cols-[minmax(0,785fr)_minmax(0,415fr)]\"\n      aria-label=\"Live calls and needs attention\">\n      <article class=\"flex flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base\">\n        <header class=\"flex shrink-0 items-center justify-between gap-sm\">\n          <div class=\"flex items-center gap-sm\">\n            <h4>Live Calls</h4>\n            @if (agentOffline()) {\n              <span class=\"inline-flex items-center gap-2xs fs-sm font-semibold text-danger\">\n                <ed-icon name=\"phone_disabled\" [size]=\"18\" />\n                Offline\n              </span>\n            } @else {\n              <ed-badge-2 variant=\"success\" pill uppercase>\n                {{ liveCallCount() }} LIVE\n              </ed-badge-2>\n            }\n          </div>\n          <a routerLink=\"../live\"\n            class=\"inline-flex items-center gap-2xs fs-sm font-medium text-primary no-underline\">\n            View All\n            <ed-icon name=\"chevron_right\" [size]=\"16\" color=\"currentColor\" />\n          </a>\n        </header>\n\n        <ul class=\"m-0 grid max-h-64 list-none content-start gap-xs overflow-x-hidden overflow-y-auto p-0\">\n          @if (liveCallsError()) {\n            <li class=\"fs-sm text-light\" role=\"alert\">{{ liveCallsError() }}</li>\n          }\n          @if (liveCallsLoading() && liveCallRows().length === 0) {\n            @for (_ of listSkeletonRows; track _) {\n              <li>\n                <div class=\"flex w-full items-center gap-base rounded-md border border-light bg-white p-sm\">\n                  <div class=\"flex min-w-0 flex-1 items-center gap-xs xl:max-w-xs\">\n                    <ed-skeleton class=\"h-9 w-9 shrink-0 !rounded-md\"></ed-skeleton>\n                    <div class=\"grid min-w-0 flex-1 gap-2xs\">\n                      <ed-skeleton class=\"h-3 w-32\"></ed-skeleton>\n                      <ed-skeleton class=\"h-3 w-40\"></ed-skeleton>\n                    </div>\n                  </div>\n                  <div class=\"hidden min-w-0 flex-1 items-center gap-xs xl:flex\">\n                    <ed-skeleton class=\"h-9 w-9 shrink-0 !rounded-md\"></ed-skeleton>\n                    <div class=\"grid min-w-0 gap-2xs\">\n                      <ed-skeleton class=\"h-3 w-28\"></ed-skeleton>\n                      <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\n                    </div>\n                  </div>\n                  <div class=\"grid shrink-0 justify-items-end gap-2xs self-stretch\">\n                    <ed-skeleton class=\"h-5 w-24 !rounded-full\"></ed-skeleton>\n                    <ed-skeleton class=\"h-3 w-12\"></ed-skeleton>\n                  </div>\n                </div>\n              </li>\n            }\n          }\n          @for (call of liveCallRows(); track call.id) {\n            <li>\n              <button\n                type=\"button\"\n                class=\"flex w-full cursor-pointer items-center gap-base rounded-md border border-light bg-white p-sm text-left transition-colors hover:bg-lighter hover:shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary\"\n                [class.border-danger]=\"call.needsAssistance\"\n                [class.bg-danger-50]=\"call.needsAssistance\"\n                (click)=\"openLiveCall(call.id)\"\n              >\n                <div class=\"flex min-w-0 flex-1 items-center gap-xs xl:max-w-xs\">\n                  <ed-avatar\n                    shape=\"box\"\n                    size=\"base\"\n                    [initials]=\"call.initials\"\n                    [tone]=\"call.avatarTone\"\n                  />\n                  <div class=\"grid min-w-0 flex-1 gap-2xs\">\n                    <div class=\"flex min-w-0 flex-wrap items-center gap-sm\">\n                      <span class=\"fs-sm font-semibold text-dark\">{{ call.name }}</span>\n                      <span class=\"vr-sentiment\" [attr.data-sentiment]=\"call.sentiment\">\n                        <span class=\"vr-sentiment__icon\" aria-hidden=\"true\">\n                          <img [src]=\"call.sentimentIconSrc\" alt=\"\" width=\"16\" height=\"16\" />\n                        </span>\n                        <span>{{ call.sentimentLabel }}</span>\n                      </span>\n                    </div>\n                    <span class=\"fs-sm whitespace-nowrap text-light\">{{ call.metaLine }}</span>\n                  </div>\n                </div>\n\n                <div class=\"hidden min-w-0 flex-1 items-center gap-xs xl:flex\">\n                  <span\n                    class=\"inline-flex size-9 shrink-0 items-center justify-center rounded-md\"\n                    [class.bg-success-50]=\"call.direction === 'inbound'\"\n                    [class.text-success]=\"call.direction === 'inbound'\"\n                    [class.bg-primary-50]=\"call.direction === 'outbound'\"\n                    [class.text-primary]=\"call.direction === 'outbound'\"\n                    [smartTooltip]=\"call.directionTitle\"\n                  >\n                    <ed-icon [name]=\"call.directionIcon\" [size]=\"18\" color=\"currentColor\" />\n                  </span>\n                  <div class=\"grid min-w-0 gap-2xs whitespace-nowrap\">\n                    <span class=\"fs-sm font-medium text-dark\">{{ call.goal }}</span>\n                    <span class=\"fs-xs text-light\">{{ call.statusSubtitle }}</span>\n                  </div>\n                </div>\n\n                <div class=\"grid shrink-0 justify-items-end gap-2xs self-stretch\">\n                  <ed-badge-2 [attr.variant]=\"call.handlingVariant\" pill uppercase>\n                    {{ call.handlingLabel }}\n                  </ed-badge-2>\n                  <strong\n                    class=\"inline-flex items-center gap-2xs fs-2xs text-primary\"\n                    [class.text-danger]=\"call.needsAssistance\"\n                    [class.text-light]=\"!call.needsAssistance\"\n                  >\n                    @if (!call.needsAssistance) {\n                      <eds-pulse-dot />\n                    }\n                    {{ call.started | edsElapsed }}\n                  </strong>\n                </div>\n              </button>\n            </li>\n          } @empty {\n            @if (!liveCallsLoading()) {\n              <li class=\"fs-sm text-light\">No active calls right now.</li>\n            }\n          }\n        </ul>\n      </article>\n\n      <article class=\"flex flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base\">\n        <header class=\"flex shrink-0 items-center justify-between gap-sm\">\n          <div class=\"flex items-center gap-sm\">\n            <h4>Needs Attention</h4>\n            <ed-badge-2 variant=\"warning\" pill>\n              {{ attentionCount() }}\n            </ed-badge-2>\n          </div>\n          <a\n            routerLink=\"../history\"\n            class=\"inline-flex items-center gap-2xs fs-sm font-medium text-primary no-underline\"\n          >\n            View All\n            <ed-icon name=\"chevron_right\" [size]=\"16\" color=\"currentColor\" />\n          </a>\n        </header>\n\n        <ul class=\"m-0 grid max-h-64 list-none content-start gap-xs overflow-x-hidden overflow-y-auto p-0\">\n          @for (item of attentionRows(); track item.id) {\n            <li>\n              <div\n                role=\"button\"\n                tabindex=\"0\"\n                class=\"flex w-full cursor-pointer flex-col gap-xs overflow-hidden rounded-md border border-light bg-white p-sm text-left transition-colors hover:bg-lighter hover:shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary\"\n                [attr.aria-label]=\"'Open attention item for ' + item.name\"\n                (click)=\"openAttention(item)\"\n                (keyup.enter)=\"openAttention(item)\"\n              >\n                <div class=\"flex w-full min-w-0 items-center gap-xs\">\n                  <div class=\"flex min-w-0 flex-1 items-center gap-xs\">\n                    <ed-avatar\n                      shape=\"box\"\n                      size=\"base\"\n                      [initials]=\"item.initials\"\n                      [tone]=\"item.avatarTone\"\n                    />\n                    <div class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\n                      <div class=\"flex min-w-0 items-center gap-2xs\">\n                        <span class=\"truncate fs-sm font-semibold text-dark\">{{ item.name }}</span>\n                        <!-- <span class=\"inline-flex shrink-0 text-light\">\n                          <ed-icon name=\"TagSimple\" [size]=\"14\" color=\"currentColor\" />\n                        </span> -->\n                      </div>\n                      <span class=\"truncate fs-sm text-light\">{{ item.metaLine }}</span>\n                    </div>\n                  </div>\n                  <ed-badge-2 class=\"shrink-0\" variant=\"light\" pill uppercase>\n                    {{ item.badge }}\n                  </ed-badge-2>\n                </div>\n                <div class=\"flex w-full min-w-0 items-center gap-sm\">\n                  <div class=\"flex min-w-0 flex-1 items-center gap-xs\">\n                    <span\n                      class=\"inline-flex size-8 shrink-0 items-center justify-center rounded-md\"\n                      [class.bg-success-50]=\"item.direction === 'inbound'\"\n                      [class.text-success]=\"item.direction === 'inbound'\"\n                      [class.bg-primary-50]=\"item.direction === 'outbound'\"\n                      [class.text-primary]=\"item.direction === 'outbound'\"\n                      [smartTooltip]=\"item.directionTitle\"\n                    >\n                      <ed-icon [name]=\"item.directionIcon\" [size]=\"16\" color=\"currentColor\" />\n                    </span>\n                    <span class=\"min-w-0 flex-1 truncate fs-sm text-light\">{{ item.detail }}</span>\n                  </div>\n                  <span class=\"shrink-0 whitespace-nowrap fs-xs text-light\">{{ item.timeLabel }}</span>\n                </div>\n              </div>\n            </li>\n          } @empty {\n            <li class=\"fs-sm text-light\">Nothing needs attention right now.</li>\n          }\n        </ul>\n      </article>\n    </section>\n\n    <article class=\"flex flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base\">\n      <header class=\"flex items-center justify-between gap-xs\">\n        <div class=\"flex items-center gap-sm\">\n          <h4>Recent Calls</h4>\n          <ed-badge-2\n            variant=\"light\"\n            pill\n            [attr.aria-label]=\"'Recent calls count ' + recentHistoryCount()\"\n          >\n            {{ recentHistoryCount() }}\n          </ed-badge-2>\n        </div>\n        <a\n          routerLink=\"../history\"\n          class=\"inline-flex items-center gap-2xs fs-sm font-medium text-primary no-underline\"\n        >\n          View All\n          <ed-icon name=\"chevron_right\" [size]=\"16\" color=\"currentColor\" />\n        </a>\n      </header>\n\n      <div class=\"overflow-x-auto bg-white rounded-md\">\n        <table class=\"table-default relative min-w-5xl w-full\" aria-label=\"Recent calls\">\n          <thead>\n            <tr>\n              <th>Time</th>\n              <th>Patient/Caller</th>\n              <th class=\"w-16 text-center\" aria-label=\"Direction\">\n                <span class=\"inline-flex items-center justify-center gap-2xs\">\n                  <ed-icon name=\"call_received\" [size]=\"12\" class=\"text-success\" color=\"currentColor\" />\n                  <span class=\"text-light\">/</span>\n                  <ed-icon name=\"call_made\" [size]=\"12\" class=\"text-primary\" color=\"currentColor\" />\n                </span>\n              </th>\n              <th>Goal</th>\n              <th>Handled By</th>\n              <th>Resolution</th>\n              <th>Result</th>\n              <th>Duration</th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (row of recentHistoryRows(); track row.id) {\n              <tr\n                class=\"focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary\"\n                tabindex=\"0\"\n                role=\"link\"\n                [attr.aria-label]=\"'View call details for ' + row.name\"\n                (click)=\"openHistoryDetail(row.id)\"\n                (keyup.enter)=\"openHistoryDetail(row.id)\"\n              >\n                <td>\n                  <div class=\"flex flex-col gap-2xs whitespace-nowrap\">\n                    @if (row.started) {\n                      <span class=\"fs-xs font-medium text-light\">{{ row.started | date: 'shortTime' }}</span>\n                      <span class=\"fs-xs text-light\">{{ row.started | date: 'MMM d, y' }}</span>\n                    } @else {\n                      <span class=\"fs-xs font-medium text-light\">{{ row.whenLabel }}</span>\n                    }\n                  </div>\n                </td>\n\n                <td>\n                  <div class=\"flex min-w-52 items-center gap-xs\">\n                    <ed-avatar\n                      shape=\"box\"\n                      size=\"base\"\n                      [initials]=\"row.initials\"\n                      [tone]=\"row.avatarTone\"\n                    />\n                    <div class=\"flex min-w-0 flex-col gap-2xs\">\n                      <div class=\"flex min-w-0 items-center gap-2xs text-dark\">\n                        <span\n                          class=\"inline-block min-w-0 max-w-56 truncate fs-sm font-semibold\"\n                          [smartTooltip]=\"row.name\"\n                          [tooltipOnlyWhenTruncated]=\"true\"\n                        >{{ row.name }}</span>\n                        <!-- <span class=\"inline-flex shrink-0 text-light\">\n                          <ed-icon name=\"TagSimple\" [size]=\"14\" color=\"currentColor\" />\n                        </span> -->\n                      </div>\n                      <span\n                        class=\"inline-block min-w-0 max-w-64 truncate fs-xs text-light\"\n                        [smartTooltip]=\"row.metaLine\"\n                        [tooltipOnlyWhenTruncated]=\"true\"\n                      >{{ row.metaLine }}</span>\n                    </div>\n                  </div>\n                </td>\n\n                <td class=\"text-center\">\n                  <span\n                    class=\"inline-flex size-5 items-center justify-center rounded\"\n                    [class.bg-success-50]=\"row.direction === 'inbound'\"\n                    [class.text-success]=\"row.direction === 'inbound'\"\n                    [class.bg-primary-50]=\"row.direction === 'outbound'\"\n                    [class.text-primary]=\"row.direction === 'outbound'\"\n                    [smartTooltip]=\"row.directionTitle\"\n                  >\n                    <ed-icon [name]=\"row.directionIcon\" [size]=\"12\" color=\"currentColor\" />\n                  </span>\n                </td>\n\n                <td>\n                  <span\n                    class=\"inline-block min-w-0 max-w-56 truncate fs-sm font-medium text-light\"\n                    [smartTooltip]=\"row.reason\"\n                    [tooltipOnlyWhenTruncated]=\"true\"\n                  >{{ row.reason }}</span>\n                </td>\n\n                <td>\n                  <ed-badge-2 [attr.variant]=\"row.handledByVariant\" pill uppercase>\n                    {{ row.handledByLabel }}\n                  </ed-badge-2>\n                </td>\n\n                <td>\n                  @if (row.resolution) {\n                    <ed-badge-2 [attr.variant]=\"row.resolutionVariant\" pill uppercase>\n                      {{ row.resolutionLabel }}\n                    </ed-badge-2>\n                  }\n                </td>\n\n                <td>\n                  <div class=\"flex min-w-0 max-w-80 flex-wrap gap-2xs\">\n                    @for (chip of row.resultChips; track chip.label) {\n                      <span\n                        class=\"inline-flex h-5 max-w-48 min-w-0 items-center gap-2xs rounded bg-light px-2xs fs-xs font-medium text-dark\"\n                      >\n                        <ed-icon [name]=\"chip.icon\" [size]=\"12\" color=\"currentColor\" />\n                        <span\n                          class=\"min-w-0 truncate\"\n                          [smartTooltip]=\"chip.label\"\n                          [tooltipOnlyWhenTruncated]=\"true\"\n                        >{{ chip.label }}</span>\n                      </span>\n                    } @empty {\n                      <span class=\"fs-sm text-light\">\u2014</span>\n                    }\n                  </div>\n                </td>\n\n                <td class=\"whitespace-nowrap tabular-nums fs-xs font-medium text-light\">\n                  {{ row.durationLabel }}\n                </td>\n              </tr>\n            } @empty {\n              <tr class=\"table-no-data\">\n                <td colspan=\"8\" class=\"py-base text-center fs-sm text-light\">No recent calls.</td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    </article>\n  }\n  </div>\n</div>\n", styles: [".vr-sentiment{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:20px;padding:2px 4px;border-radius:6px;font-size:11px;font-weight:500;line-height:16px;white-space:nowrap}.vr-sentiment__icon{display:block;width:16px;height:16px;flex-shrink:0;overflow:hidden}.vr-sentiment__icon img{display:block;width:100%;height:100%;max-width:none}.vr-sentiment[data-sentiment=calm]{background:#3681f41a;color:#2162f0}.vr-sentiment[data-sentiment=neutral]{background:#f0f2f5;color:#41464c}.vr-sentiment[data-sentiment=urgent]{background:#f26b0d1a;color:#e94e0c}.vr-sentiment[data-sentiment=frustrated]{background:#f037401a;color:#db0c15}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: EdAvatarComponent, selector: "ed-avatar", inputs: ["initials", "tone", "shape", "size", "gradient"] }, { kind: "component", type: EdButtonComponent, selector: "ed-button", inputs: ["variant", "size", "disabled", "ghost", "outline", "subtle", "fill", "loading", "block", "elevated", "shape", "type", "href", "routerLink", "rel", "target", "download", "ariaLabel"], outputs: ["click$"] }, { kind: "component", type: IconComponent, selector: "ed-icon", inputs: ["name", "size", "color", "cssClass", "decorative", "ariaHidden", "ariaLabel", "title", "desc", "focusable", "tabIndex"] }, { kind: "component", type: EdsPulseDotComponent, selector: "eds-pulse-dot" }, { kind: "pipe", type: EdsElapsedPipe, name: "edsElapsed" }, { kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip", "tooltipAllowHtml", "tooltipTemplate", "tooltipTemplateContext", "tooltipPlacement", "tooltipTrigger", "tooltipDelayShow", "tooltipDelayHide", "tooltipOffset", "tooltipMaxWidth", "tooltipZIndex", "tooltipClass", "tooltipDisabled", "tooltipArrow", "tooltipHoverIntentMs", "tooltipHoverIntentRadius", "tooltipId", "tooltipRole", "tooltipAnimEnterMs", "tooltipAnimExitMs", "tooltipAnimEasing", "tooltipHoverable", "tooltipHandoffMs", "tooltipOpen", "tooltipOnlyWhenTruncated"] }, { kind: "component", type: EdSkeletonComponent, selector: "ed-skeleton", inputs: ["class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DashboardPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'eds-dashboard-page', imports: [
+                        RouterLink,
+                        DatePipe,
+                        EdAvatarComponent,
+                        EdButtonComponent,
+                        IconComponent,
+                        EdsPulseDotComponent,
+                        EdsElapsedPipe,
+                        SmartTooltipDirective,
+                        EdSkeletonComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, schemas: [CUSTOM_ELEMENTS_SCHEMA], host: { class: 'block h-full min-h-0' }, template: "<div class=\"flex h-full  flex-col overflow-auto bg-lighter p-base dashboard-page\">\n  <header class=\"mb-base flex shrink-0 items-start justify-between gap-base\">\n    <div class=\"flex flex-col gap-2xs\">\n      <h3>Dashboard</h3>\n      <p class=\"fs-sm text-light\">Monitor AI receptionist activity and follow up where needed</p>\n    </div>\n    <ed-button\n      class=\"shrink-0\"\n      variant=\"default\"\n      size=\"sm\"\n      (click$)=\"exportCsv()\">\n      <ed-icon slot=\"prefix\" name=\"download\" [size]=\"16\" />\n      Export CSV\n    </ed-button>\n  </header>\n\n  <div class=\"flex  flex-1 flex-col gap-base  \">\n  @if (loading()) {\n    <section class=\"grid grid-cols-1 gap-base sm:grid-cols-2 xl:grid-cols-4\" aria-label=\"Overview KPIs\" aria-busy=\"true\">\n      @for (_ of kpiSkeletonRows; track _) {\n        <article class=\"flex flex-col gap-xs overflow-hidden rounded-md border border-light bg-white p-base\">\n          <ed-skeleton class=\"h-3 w-28\"></ed-skeleton>\n          <ed-skeleton class=\"h-6 w-14\"></ed-skeleton>\n          <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\n        </article>\n      }\n    </section>\n\n    <section\n      class=\"grid grid-cols-1 items-start gap-base xl:grid-cols-[minmax(0,785fr)_minmax(0,415fr)]\"\n      aria-label=\"Live calls and needs attention\"\n      aria-busy=\"true\"\n    >\n      <article class=\"flex flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base\">\n        <header class=\"flex shrink-0 items-center justify-between gap-sm\">\n          <div class=\"flex items-center gap-sm\">\n            <h4>Live Calls</h4>\n            <ed-skeleton class=\"h-5 w-16 !rounded-full\"></ed-skeleton>\n          </div>\n          <ed-skeleton class=\"h-3 w-16\"></ed-skeleton>\n        </header>\n        <ul class=\"m-0 grid max-h-64 list-none content-start gap-xs overflow-x-hidden overflow-y-auto p-0\">\n          @for (_ of listSkeletonRows; track _) {\n            <li>\n              <div class=\"flex w-full items-center gap-base rounded-md border border-light bg-white p-sm\">\n                <div class=\"flex min-w-0 flex-1 items-center gap-xs xl:max-w-xs\">\n                  <ed-skeleton class=\"h-9 w-9 shrink-0 !rounded-md\"></ed-skeleton>\n                  <div class=\"grid min-w-0 flex-1 gap-2xs\">\n                    <ed-skeleton class=\"h-3 w-32\"></ed-skeleton>\n                    <ed-skeleton class=\"h-3 w-40\"></ed-skeleton>\n                  </div>\n                </div>\n                <div class=\"hidden min-w-0 flex-1 items-center gap-xs xl:flex\">\n                  <ed-skeleton class=\"h-9 w-9 shrink-0 !rounded-md\"></ed-skeleton>\n                  <div class=\"grid min-w-0 gap-2xs\">\n                    <ed-skeleton class=\"h-3 w-28\"></ed-skeleton>\n                    <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\n                  </div>\n                </div>\n                <div class=\"grid shrink-0 justify-items-end gap-2xs self-stretch\">\n                  <ed-skeleton class=\"h-5 w-24 !rounded-full\"></ed-skeleton>\n                  <ed-skeleton class=\"h-3 w-12\"></ed-skeleton>\n                </div>\n              </div>\n            </li>\n          }\n        </ul>\n      </article>\n\n      <article class=\"flex flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base\">\n        <header class=\"flex shrink-0 items-center justify-between gap-sm\">\n          <div class=\"flex items-center gap-sm\">\n            <h4>Needs Attention</h4>\n            <ed-skeleton class=\"h-5 w-8 !rounded-full\"></ed-skeleton>\n          </div>\n          <ed-skeleton class=\"h-3 w-16\"></ed-skeleton>\n        </header>\n        <ul class=\"m-0 grid max-h-64 list-none content-start gap-xs overflow-x-hidden overflow-y-auto p-0\">\n          @for (_ of listSkeletonRows; track _) {\n            <li>\n              <div class=\"flex w-full flex-col gap-xs overflow-hidden rounded-md border border-light bg-white p-sm\">\n                <div class=\"flex w-full min-w-0 items-center gap-xs\">\n                  <div class=\"flex min-w-0 flex-1 items-center gap-xs\">\n                    <ed-skeleton class=\"h-9 w-9 shrink-0 !rounded-md\"></ed-skeleton>\n                    <div class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\n                      <ed-skeleton class=\"h-3 w-32\"></ed-skeleton>\n                      <ed-skeleton class=\"h-3 w-36\"></ed-skeleton>\n                    </div>\n                  </div>\n                  <ed-skeleton class=\"h-5 w-28 shrink-0 !rounded-full\"></ed-skeleton>\n                </div>\n                <div class=\"flex w-full min-w-0 items-center gap-sm\">\n                  <div class=\"flex min-w-0 flex-1 items-center gap-xs\">\n                    <ed-skeleton class=\"h-8 w-8 shrink-0 !rounded-md\"></ed-skeleton>\n                    <ed-skeleton class=\"h-3 w-full max-w-xs\"></ed-skeleton>\n                  </div>\n                  <ed-skeleton class=\"h-3 w-14 shrink-0\"></ed-skeleton>\n                </div>\n              </div>\n            </li>\n          }\n        </ul>\n      </article>\n    </section>\n\n    <article class=\"flex flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base\" aria-busy=\"true\">\n      <header class=\"flex items-center justify-between gap-xs\">\n        <div class=\"flex items-center gap-sm\">\n          <h4>Recent Calls</h4>\n          <ed-skeleton class=\"h-5 w-8 !rounded-full\"></ed-skeleton>\n        </div>\n        <ed-skeleton class=\"h-3 w-16\"></ed-skeleton>\n      </header>\n      <div class=\"overflow-x-auto bg-white rounded-md\">\n        <table class=\"table-default relative min-w-5xl w-full\" aria-label=\"Recent calls\">\n          <thead>\n            <tr>\n              <th>Time</th>\n              <th>Patient/Caller</th>\n              <th class=\"w-16 text-center\" aria-label=\"Direction\">\n                <span class=\"inline-flex items-center justify-center gap-2xs\">\n                  <ed-icon name=\"call_received\" [size]=\"12\" class=\"text-success\" color=\"currentColor\" />\n                  <span class=\"text-light\">/</span>\n                  <ed-icon name=\"call_made\" [size]=\"12\" class=\"text-primary\" color=\"currentColor\" />\n                </span>\n              </th>\n              <th>Goal</th>\n              <th>Handled By</th>\n              <th>Resolution</th>\n              <th>Result</th>\n              <th>Duration</th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (_ of skeletonRows; track _) {\n              <tr>\n                <td>\n                  <div class=\"grid gap-2xs py-2xs\">\n                    <ed-skeleton class=\"h-3 w-12\"></ed-skeleton>\n                    <ed-skeleton class=\"h-3 w-20\"></ed-skeleton>\n                  </div>\n                </td>\n                <td>\n                  <div class=\"flex items-center gap-xs py-2xs\">\n                    <ed-skeleton class=\"h-8 w-8 !rounded-md\"></ed-skeleton>\n                    <div class=\"grid gap-2xs\">\n                      <ed-skeleton class=\"h-3 w-28\"></ed-skeleton>\n                      <ed-skeleton class=\"h-3 w-36\"></ed-skeleton>\n                    </div>\n                  </div>\n                </td>\n                <td class=\"text-center\">\n                  <div class=\"flex justify-center py-2xs\">\n                    <ed-skeleton class=\"h-5 w-5 !rounded\"></ed-skeleton>\n                  </div>\n                </td>\n                <td><ed-skeleton class=\"h-3 w-32\"></ed-skeleton></td>\n                <td><ed-skeleton class=\"h-5 w-12 !rounded-full\"></ed-skeleton></td>\n                <td><ed-skeleton class=\"h-5 w-20 !rounded-full\"></ed-skeleton></td>\n                <td><ed-skeleton class=\"h-5 w-28 !rounded\"></ed-skeleton></td>\n                <td><ed-skeleton class=\"h-3 w-10\"></ed-skeleton></td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    </article>\n  } @else if (data()) {\n    <section class=\"grid grid-cols-1 gap-base sm:grid-cols-2 xl:grid-cols-4\" aria-label=\"Overview KPIs\">\n      @for (tile of kpiCards(); track tile.id) {\n        @if (tile.link) {\n          <a\n            [routerLink]=\"tile.link\"\n            [queryParams]=\"tile.queryParams ?? null\"\n            class=\"flex flex-col gap-xs overflow-hidden rounded-md border border-light bg-white p-base no-underline text-inherit transition-colors hover:bg-primary-100 hover:shadow-sm\">\n            <span class=\"fs-xs font-semibold uppercase tracking-wide text-light\">{{ tile.label }}</span>\n            <h3>{{ tile.value }}</h3>\n            <span class=\"fs-xs text-light\">{{ tile.meta }}</span>\n          </a>\n        } @else {\n          <article class=\"flex flex-col gap-xs overflow-hidden rounded-md border border-light bg-white p-base\">\n            <span class=\"fs-xs font-semibold uppercase tracking-wide text-light\">{{ tile.label }}</span>\n            <h3>{{ tile.value }}</h3>\n            <span class=\"fs-sm text-light\">{{ tile.meta }}</span>\n          </article>\n        }\n      }\n    </section>\n\n    <section\n      class=\"grid grid-cols-1 items-start gap-base xl:grid-cols-[minmax(0,785fr)_minmax(0,415fr)]\"\n      aria-label=\"Live calls and needs attention\">\n      <article class=\"flex flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base\">\n        <header class=\"flex shrink-0 items-center justify-between gap-sm\">\n          <div class=\"flex items-center gap-sm\">\n            <h4>Live Calls</h4>\n            @if (agentOffline()) {\n              <span class=\"inline-flex items-center gap-2xs fs-sm font-semibold text-danger\">\n                <ed-icon name=\"phone_disabled\" [size]=\"18\" />\n                Offline\n              </span>\n            } @else {\n              <ed-badge-2 variant=\"success\" pill uppercase>\n                {{ liveCallCount() }} LIVE\n              </ed-badge-2>\n            }\n          </div>\n          <a routerLink=\"../live\"\n            class=\"inline-flex items-center gap-2xs fs-sm font-medium text-primary no-underline\">\n            View All\n            <ed-icon name=\"chevron_right\" [size]=\"16\" color=\"currentColor\" />\n          </a>\n        </header>\n\n        <ul class=\"m-0 grid max-h-64 list-none content-start gap-xs overflow-x-hidden overflow-y-auto p-0\">\n          @if (liveCallsError()) {\n            <li class=\"fs-sm text-light\" role=\"alert\">{{ liveCallsError() }}</li>\n          }\n          @if (liveCallsLoading() && liveCallRows().length === 0) {\n            @for (_ of listSkeletonRows; track _) {\n              <li>\n                <div class=\"flex w-full items-center gap-base rounded-md border border-light bg-white p-sm\">\n                  <div class=\"flex min-w-0 flex-1 items-center gap-xs xl:max-w-xs\">\n                    <ed-skeleton class=\"h-9 w-9 shrink-0 !rounded-md\"></ed-skeleton>\n                    <div class=\"grid min-w-0 flex-1 gap-2xs\">\n                      <ed-skeleton class=\"h-3 w-32\"></ed-skeleton>\n                      <ed-skeleton class=\"h-3 w-40\"></ed-skeleton>\n                    </div>\n                  </div>\n                  <div class=\"hidden min-w-0 flex-1 items-center gap-xs xl:flex\">\n                    <ed-skeleton class=\"h-9 w-9 shrink-0 !rounded-md\"></ed-skeleton>\n                    <div class=\"grid min-w-0 gap-2xs\">\n                      <ed-skeleton class=\"h-3 w-28\"></ed-skeleton>\n                      <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\n                    </div>\n                  </div>\n                  <div class=\"grid shrink-0 justify-items-end gap-2xs self-stretch\">\n                    <ed-skeleton class=\"h-5 w-24 !rounded-full\"></ed-skeleton>\n                    <ed-skeleton class=\"h-3 w-12\"></ed-skeleton>\n                  </div>\n                </div>\n              </li>\n            }\n          }\n          @for (call of liveCallRows(); track call.id) {\n            <li>\n              <button\n                type=\"button\"\n                class=\"flex w-full cursor-pointer items-center gap-base rounded-md border border-light bg-white p-sm text-left transition-colors hover:bg-lighter hover:shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary\"\n                [class.border-danger]=\"call.needsAssistance\"\n                [class.bg-danger-50]=\"call.needsAssistance\"\n                (click)=\"openLiveCall(call.id)\"\n              >\n                <div class=\"flex min-w-0 flex-1 items-center gap-xs xl:max-w-xs\">\n                  <ed-avatar\n                    shape=\"box\"\n                    size=\"base\"\n                    [initials]=\"call.initials\"\n                    [tone]=\"call.avatarTone\"\n                  />\n                  <div class=\"grid min-w-0 flex-1 gap-2xs\">\n                    <div class=\"flex min-w-0 flex-wrap items-center gap-sm\">\n                      <span class=\"fs-sm font-semibold text-dark\">{{ call.name }}</span>\n                      <span class=\"vr-sentiment\" [attr.data-sentiment]=\"call.sentiment\">\n                        <span class=\"vr-sentiment__icon\" aria-hidden=\"true\">\n                          <img [src]=\"call.sentimentIconSrc\" alt=\"\" width=\"16\" height=\"16\" />\n                        </span>\n                        <span>{{ call.sentimentLabel }}</span>\n                      </span>\n                    </div>\n                    <span class=\"fs-sm whitespace-nowrap text-light\">{{ call.metaLine }}</span>\n                  </div>\n                </div>\n\n                <div class=\"hidden min-w-0 flex-1 items-center gap-xs xl:flex\">\n                  <span\n                    class=\"inline-flex size-9 shrink-0 items-center justify-center rounded-md\"\n                    [class.bg-success-50]=\"call.direction === 'inbound'\"\n                    [class.text-success]=\"call.direction === 'inbound'\"\n                    [class.bg-primary-50]=\"call.direction === 'outbound'\"\n                    [class.text-primary]=\"call.direction === 'outbound'\"\n                    [smartTooltip]=\"call.directionTitle\"\n                  >\n                    <ed-icon [name]=\"call.directionIcon\" [size]=\"18\" color=\"currentColor\" />\n                  </span>\n                  <div class=\"grid min-w-0 gap-2xs whitespace-nowrap\">\n                    <span class=\"fs-sm font-medium text-dark\">{{ call.goal }}</span>\n                    <span class=\"fs-xs text-light\">{{ call.statusSubtitle }}</span>\n                  </div>\n                </div>\n\n                <div class=\"grid shrink-0 justify-items-end gap-2xs self-stretch\">\n                  <ed-badge-2 [attr.variant]=\"call.handlingVariant\" pill uppercase>\n                    {{ call.handlingLabel }}\n                  </ed-badge-2>\n                  <strong\n                    class=\"inline-flex items-center gap-2xs fs-2xs text-primary\"\n                    [class.text-danger]=\"call.needsAssistance\"\n                    [class.text-light]=\"!call.needsAssistance\"\n                  >\n                    @if (!call.needsAssistance) {\n                      <eds-pulse-dot />\n                    }\n                    {{ call.started | edsElapsed }}\n                  </strong>\n                </div>\n              </button>\n            </li>\n          } @empty {\n            @if (!liveCallsLoading()) {\n              <li class=\"fs-sm text-light\">No active calls right now.</li>\n            }\n          }\n        </ul>\n      </article>\n\n      <article class=\"flex flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base\">\n        <header class=\"flex shrink-0 items-center justify-between gap-sm\">\n          <div class=\"flex items-center gap-sm\">\n            <h4>Needs Attention</h4>\n            <ed-badge-2 variant=\"warning\" pill>\n              {{ attentionCount() }}\n            </ed-badge-2>\n          </div>\n          <a\n            routerLink=\"../history\"\n            class=\"inline-flex items-center gap-2xs fs-sm font-medium text-primary no-underline\"\n          >\n            View All\n            <ed-icon name=\"chevron_right\" [size]=\"16\" color=\"currentColor\" />\n          </a>\n        </header>\n\n        <ul class=\"m-0 grid max-h-64 list-none content-start gap-xs overflow-x-hidden overflow-y-auto p-0\">\n          @for (item of attentionRows(); track item.id) {\n            <li>\n              <div\n                role=\"button\"\n                tabindex=\"0\"\n                class=\"flex w-full cursor-pointer flex-col gap-xs overflow-hidden rounded-md border border-light bg-white p-sm text-left transition-colors hover:bg-lighter hover:shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary\"\n                [attr.aria-label]=\"'Open attention item for ' + item.name\"\n                (click)=\"openAttention(item)\"\n                (keyup.enter)=\"openAttention(item)\"\n              >\n                <div class=\"flex w-full min-w-0 items-center gap-xs\">\n                  <div class=\"flex min-w-0 flex-1 items-center gap-xs\">\n                    <ed-avatar\n                      shape=\"box\"\n                      size=\"base\"\n                      [initials]=\"item.initials\"\n                      [tone]=\"item.avatarTone\"\n                    />\n                    <div class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\n                      <div class=\"flex min-w-0 items-center gap-2xs\">\n                        <span class=\"truncate fs-sm font-semibold text-dark\">{{ item.name }}</span>\n                        <!-- <span class=\"inline-flex shrink-0 text-light\">\n                          <ed-icon name=\"TagSimple\" [size]=\"14\" color=\"currentColor\" />\n                        </span> -->\n                      </div>\n                      <span class=\"truncate fs-sm text-light\">{{ item.metaLine }}</span>\n                    </div>\n                  </div>\n                  <ed-badge-2 class=\"shrink-0\" variant=\"light\" pill uppercase>\n                    {{ item.badge }}\n                  </ed-badge-2>\n                </div>\n                <div class=\"flex w-full min-w-0 items-center gap-sm\">\n                  <div class=\"flex min-w-0 flex-1 items-center gap-xs\">\n                    <span\n                      class=\"inline-flex size-8 shrink-0 items-center justify-center rounded-md\"\n                      [class.bg-success-50]=\"item.direction === 'inbound'\"\n                      [class.text-success]=\"item.direction === 'inbound'\"\n                      [class.bg-primary-50]=\"item.direction === 'outbound'\"\n                      [class.text-primary]=\"item.direction === 'outbound'\"\n                      [smartTooltip]=\"item.directionTitle\"\n                    >\n                      <ed-icon [name]=\"item.directionIcon\" [size]=\"16\" color=\"currentColor\" />\n                    </span>\n                    <span class=\"min-w-0 flex-1 truncate fs-sm text-light\">{{ item.detail }}</span>\n                  </div>\n                  <span class=\"shrink-0 whitespace-nowrap fs-xs text-light\">{{ item.timeLabel }}</span>\n                </div>\n              </div>\n            </li>\n          } @empty {\n            <li class=\"fs-sm text-light\">Nothing needs attention right now.</li>\n          }\n        </ul>\n      </article>\n    </section>\n\n    <article class=\"flex flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base\">\n      <header class=\"flex items-center justify-between gap-xs\">\n        <div class=\"flex items-center gap-sm\">\n          <h4>Recent Calls</h4>\n          <ed-badge-2\n            variant=\"light\"\n            pill\n            [attr.aria-label]=\"'Recent calls count ' + recentHistoryCount()\"\n          >\n            {{ recentHistoryCount() }}\n          </ed-badge-2>\n        </div>\n        <a\n          routerLink=\"../history\"\n          class=\"inline-flex items-center gap-2xs fs-sm font-medium text-primary no-underline\"\n        >\n          View All\n          <ed-icon name=\"chevron_right\" [size]=\"16\" color=\"currentColor\" />\n        </a>\n      </header>\n\n      <div class=\"overflow-x-auto bg-white rounded-md\">\n        <table class=\"table-default relative min-w-5xl w-full\" aria-label=\"Recent calls\">\n          <thead>\n            <tr>\n              <th>Time</th>\n              <th>Patient/Caller</th>\n              <th class=\"w-16 text-center\" aria-label=\"Direction\">\n                <span class=\"inline-flex items-center justify-center gap-2xs\">\n                  <ed-icon name=\"call_received\" [size]=\"12\" class=\"text-success\" color=\"currentColor\" />\n                  <span class=\"text-light\">/</span>\n                  <ed-icon name=\"call_made\" [size]=\"12\" class=\"text-primary\" color=\"currentColor\" />\n                </span>\n              </th>\n              <th>Goal</th>\n              <th>Handled By</th>\n              <th>Resolution</th>\n              <th>Result</th>\n              <th>Duration</th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (row of recentHistoryRows(); track row.id) {\n              <tr\n                class=\"focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary\"\n                tabindex=\"0\"\n                role=\"link\"\n                [attr.aria-label]=\"'View call details for ' + row.name\"\n                (click)=\"openHistoryDetail(row.id)\"\n                (keyup.enter)=\"openHistoryDetail(row.id)\"\n              >\n                <td>\n                  <div class=\"flex flex-col gap-2xs whitespace-nowrap\">\n                    @if (row.started) {\n                      <span class=\"fs-xs font-medium text-light\">{{ row.started | date: 'shortTime' }}</span>\n                      <span class=\"fs-xs text-light\">{{ row.started | date: 'MMM d, y' }}</span>\n                    } @else {\n                      <span class=\"fs-xs font-medium text-light\">{{ row.whenLabel }}</span>\n                    }\n                  </div>\n                </td>\n\n                <td>\n                  <div class=\"flex min-w-52 items-center gap-xs\">\n                    <ed-avatar\n                      shape=\"box\"\n                      size=\"base\"\n                      [initials]=\"row.initials\"\n                      [tone]=\"row.avatarTone\"\n                    />\n                    <div class=\"flex min-w-0 flex-col gap-2xs\">\n                      <div class=\"flex min-w-0 items-center gap-2xs text-dark\">\n                        <span\n                          class=\"inline-block min-w-0 max-w-56 truncate fs-sm font-semibold\"\n                          [smartTooltip]=\"row.name\"\n                          [tooltipOnlyWhenTruncated]=\"true\"\n                        >{{ row.name }}</span>\n                        <!-- <span class=\"inline-flex shrink-0 text-light\">\n                          <ed-icon name=\"TagSimple\" [size]=\"14\" color=\"currentColor\" />\n                        </span> -->\n                      </div>\n                      <span\n                        class=\"inline-block min-w-0 max-w-64 truncate fs-xs text-light\"\n                        [smartTooltip]=\"row.metaLine\"\n                        [tooltipOnlyWhenTruncated]=\"true\"\n                      >{{ row.metaLine }}</span>\n                    </div>\n                  </div>\n                </td>\n\n                <td class=\"text-center\">\n                  <span\n                    class=\"inline-flex size-5 items-center justify-center rounded\"\n                    [class.bg-success-50]=\"row.direction === 'inbound'\"\n                    [class.text-success]=\"row.direction === 'inbound'\"\n                    [class.bg-primary-50]=\"row.direction === 'outbound'\"\n                    [class.text-primary]=\"row.direction === 'outbound'\"\n                    [smartTooltip]=\"row.directionTitle\"\n                  >\n                    <ed-icon [name]=\"row.directionIcon\" [size]=\"12\" color=\"currentColor\" />\n                  </span>\n                </td>\n\n                <td>\n                  <span\n                    class=\"inline-block min-w-0 max-w-56 truncate fs-sm font-medium text-light\"\n                    [smartTooltip]=\"row.reason\"\n                    [tooltipOnlyWhenTruncated]=\"true\"\n                  >{{ row.reason }}</span>\n                </td>\n\n                <td>\n                  <ed-badge-2 [attr.variant]=\"row.handledByVariant\" pill uppercase>\n                    {{ row.handledByLabel }}\n                  </ed-badge-2>\n                </td>\n\n                <td>\n                  @if (row.resolution) {\n                    <ed-badge-2 [attr.variant]=\"row.resolutionVariant\" pill uppercase>\n                      {{ row.resolutionLabel }}\n                    </ed-badge-2>\n                  }\n                </td>\n\n                <td>\n                  <div class=\"flex min-w-0 max-w-80 flex-wrap gap-2xs\">\n                    @for (chip of row.resultChips; track chip.label) {\n                      <span\n                        class=\"inline-flex h-5 max-w-48 min-w-0 items-center gap-2xs rounded bg-light px-2xs fs-xs font-medium text-dark\"\n                      >\n                        <ed-icon [name]=\"chip.icon\" [size]=\"12\" color=\"currentColor\" />\n                        <span\n                          class=\"min-w-0 truncate\"\n                          [smartTooltip]=\"chip.label\"\n                          [tooltipOnlyWhenTruncated]=\"true\"\n                        >{{ chip.label }}</span>\n                      </span>\n                    } @empty {\n                      <span class=\"fs-sm text-light\">\u2014</span>\n                    }\n                  </div>\n                </td>\n\n                <td class=\"whitespace-nowrap tabular-nums fs-xs font-medium text-light\">\n                  {{ row.durationLabel }}\n                </td>\n              </tr>\n            } @empty {\n              <tr class=\"table-no-data\">\n                <td colspan=\"8\" class=\"py-base text-center fs-sm text-light\">No recent calls.</td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    </article>\n  }\n  </div>\n</div>\n", styles: [".vr-sentiment{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:20px;padding:2px 4px;border-radius:6px;font-size:11px;font-weight:500;line-height:16px;white-space:nowrap}.vr-sentiment__icon{display:block;width:16px;height:16px;flex-shrink:0;overflow:hidden}.vr-sentiment__icon img{display:block;width:100%;height:100%;max-width:none}.vr-sentiment[data-sentiment=calm]{background:#3681f41a;color:#2162f0}.vr-sentiment[data-sentiment=neutral]{background:#f0f2f5;color:#41464c}.vr-sentiment[data-sentiment=urgent]{background:#f26b0d1a;color:#e94e0c}.vr-sentiment[data-sentiment=frustrated]{background:#f037401a;color:#db0c15}\n"] }]
+        }] });
+
+export { DashboardPageComponent };
+//# sourceMappingURL=edvak99-voice-receptionist-widget-dashboard-page.component-CF8VfDOy.mjs.map