@edvak99/voice-receptionist-widget 1.1.27 → 1.1.29

package/fesm2022/{edvak99-voice-receptionist-widget-call-review.service-CB5SQ3Md.mjs → edvak99-voice-receptionist-widget-call-review.service-D2-DDL-t.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-BxX138_W.mjs';
+import { A as AiReceptionistApiService } from './edvak99-voice-receptionist-widget-edvak99-voice-receptionist-widget-DOYlRven.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-CB5SQ3Md.mjs.map
+//# sourceMappingURL=edvak99-voice-receptionist-widget-call-review.service-D2-DDL-t.mjs.map

package/fesm2022/edvak99-voice-receptionist-widget-call-review.service-D2-DDL-t.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"edvak99-voice-receptionist-widget-call-review.service-D2-DDL-t.mjs","sources":["../../../src/lib/services/call-review.service.ts"],"sourcesContent":["import { Injectable, inject, signal } from '@angular/core';\r\nimport { Observable, map, tap } from 'rxjs';\r\n\r\nimport { CallReviewStatus } from '../utils/call-review.util';\r\nimport { AiReceptionistApiService } from './ai-receptionist-api.service';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class CallReviewService {\r\n  private readonly api = inject(AiReceptionistApiService);\r\n\r\n  /** Cached from dashboard summary; decremented optimistically on review. */\r\n  readonly needsReviewCount = signal<number | null>(null);\r\n\r\n  setNeedsReviewCount(count: number): void {\r\n    this.needsReviewCount.set(count);\r\n  }\r\n\r\n  markReviewed(callId: string): Observable<CallReviewStatus> {\r\n    return this.api.postReview(callId).pipe(\r\n      tap(() => {\r\n        this.needsReviewCount.update((c) => (c != null && c > 0 ? c - 1 : c));\r\n      }),\r\n      map(() => 'reviewed'),\r\n    );\r\n  }\r\n}\r\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-rWIPxDtQ.mjs.map

@@ -1 +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;;;;"}
+{"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';\r\n\r\nexport function reviewLabel(status: CallReviewStatus): string {\r\n  return status === 'reviewed' ? 'Reviewed' : 'Pending review';\r\n}\r\n\r\nimport { BadgeTone } from '../ui/eds-badge.component';\r\n\r\nexport function reviewBadgeTone(status: CallReviewStatus): BadgeTone {\r\n  return status === 'reviewed' ? 'success' : 'warning';\r\n}\r\n\r\nexport function isNeedsReview(status: CallReviewStatus): boolean {\r\n  return status === 'needs';\r\n}\r\n\r\n/** Normalize legacy or API values to CallReviewStatus. */\r\nexport function normalizeReviewStatus(value: string | undefined | null): CallReviewStatus {\r\n  return value === 'reviewed' ? 'reviewed' : 'needs';\r\n}\r\n\r\nexport type ReviewFilterTab = 'all' | 'needs' | 'reviewed';\r\n\r\nexport function matchesReviewFilter(\r\n  status: CallReviewStatus,\r\n  tab: ReviewFilterTab,\r\n): boolean {\r\n  if (tab === 'all') return true;\r\n  return status === tab;\r\n}\r\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-Cwunrodb.mjs

@@ -0,0 +1,310 @@
+import * as i0 from '@angular/core';
+import { inject, signal, computed, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { DatePipe } from '@angular/common';
+import { A as AiReceptionistApiService, L as LiveCallsListService, a as AgentOnlineService, T as ToastService, h as historyResolution, t as triggerBlobDownload, 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-DOYlRven.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-BSyOMZd4.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';
+import { f as formatPlaybackTime } from './edvak99-voice-receptionist-widget-transcript-timing.util-Bbt6JFKa.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.toast = inject(ToastService);
+        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: '../history',
+                },
+            ];
+        });
+        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() {
+        this.api.exportHistoryCsv().subscribe({
+            next: ({ blob, filename }) => {
+                triggerBlobDownload(blob, filename);
+                this.toast.show('Export downloaded', 'success');
+            },
+            error: (err) => {
+                this.toast.show(err.message ?? 'Failed to export CSV', 'error');
+            },
+        });
+    }
+    openKpi(tile) {
+        if (!tile.link)
+            return;
+        void this.router.navigate([tile.link], {
+            relativeTo: this.route,
+            queryParams: tile.queryParams ?? undefined,
+        });
+    }
+    goTo(path) {
+        void this.router.navigate([path], { relativeTo: this.route });
+    }
+    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),
+            reviewed: row.review === 'reviewed',
+        };
+    }
+    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) {
+        return formatPlaybackTime(sec);
+    }
+    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\">\r\n  <header class=\"mb-base flex shrink-0 items-start justify-between gap-base\">\r\n    <div class=\"flex flex-col gap-2xs\">\r\n      <h3>Dashboard</h3>\r\n      <p class=\"fs-sm text-light\">Monitor AI receptionist activity and follow up where needed</p>\r\n    </div>\r\n    <ed-button\r\n      class=\"shrink-0\"\r\n      variant=\"default\"\r\n      size=\"sm\"\r\n      (click$)=\"exportCsv()\">\r\n      <ed-icon slot=\"prefix\" name=\"download\" [size]=\"16\" />\r\n      Export CSV\r\n    </ed-button>\r\n  </header>\r\n\r\n  <div class=\"flex  flex-1 flex-col gap-base  \">\r\n  @if (loading()) {\r\n    <section class=\"grid grid-cols-1 gap-base sm:grid-cols-2 xl:grid-cols-4\" aria-label=\"Overview KPIs\" aria-busy=\"true\">\r\n      @for (_ of kpiSkeletonRows; track _) {\r\n        <article class=\"flex flex-col gap-xs overflow-hidden rounded-md border border-light bg-white p-base\">\r\n          <ed-skeleton class=\"h-3 w-28\"></ed-skeleton>\r\n          <ed-skeleton class=\"h-6 w-14\"></ed-skeleton>\r\n          <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\r\n        </article>\r\n      }\r\n    </section>\r\n\r\n    <section\r\n      class=\"grid grid-cols-1 items-stretch gap-base xl:grid-cols-[minmax(0,785fr)_minmax(0,415fr)]\"\r\n      aria-label=\"Live calls and needs attention\"\r\n      aria-busy=\"true\"\r\n    >\r\n      <article class=\"flex h-full min-h-0 flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base\">\r\n        <header class=\"flex shrink-0 items-center justify-between gap-sm\">\r\n          <div class=\"flex items-center gap-sm\">\r\n            <h4>Live Calls</h4>\r\n            <ed-skeleton class=\"h-5 w-16 !rounded-full\"></ed-skeleton>\r\n          </div>\r\n          <ed-skeleton class=\"h-3 w-16\"></ed-skeleton>\r\n        </header>\r\n        <ul class=\"m-0 grid max-h-64 min-h-0 flex-1 list-none content-start gap-xs overflow-x-hidden overflow-y-auto p-0\">\r\n          @for (_ of listSkeletonRows; track _) {\r\n            <li>\r\n              <div class=\"flex w-full items-center gap-base rounded-md border border-light bg-white p-sm\">\r\n                <div class=\"flex min-w-0 flex-1 items-center gap-xs xl:max-w-xs\">\r\n                  <ed-skeleton class=\"h-9 w-9 shrink-0 !rounded-md\"></ed-skeleton>\r\n                  <div class=\"grid min-w-0 flex-1 gap-2xs\">\r\n                    <ed-skeleton class=\"h-3 w-32\"></ed-skeleton>\r\n                    <ed-skeleton class=\"h-3 w-40\"></ed-skeleton>\r\n                  </div>\r\n                </div>\r\n                <div class=\"hidden min-w-0 flex-1 items-center gap-xs xl:flex\">\r\n                  <ed-skeleton class=\"h-9 w-9 shrink-0 !rounded-md\"></ed-skeleton>\r\n                  <div class=\"grid min-w-0 gap-2xs\">\r\n                    <ed-skeleton class=\"h-3 w-28\"></ed-skeleton>\r\n                    <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\r\n                  </div>\r\n                </div>\r\n                <div class=\"grid shrink-0 justify-items-end gap-2xs self-stretch\">\r\n                  <ed-skeleton class=\"h-5 w-24 !rounded-full\"></ed-skeleton>\r\n                  <ed-skeleton class=\"h-3 w-12\"></ed-skeleton>\r\n                </div>\r\n              </div>\r\n            </li>\r\n          }\r\n        </ul>\r\n      </article>\r\n\r\n      <article class=\"flex h-full min-h-0 flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base\">\r\n        <header class=\"flex shrink-0 items-center justify-between gap-sm\">\r\n          <div class=\"flex items-center gap-sm\">\r\n            <h4>Needs Attention</h4>\r\n            <ed-skeleton class=\"h-5 w-8 !rounded-full\"></ed-skeleton>\r\n          </div>\r\n          <ed-skeleton class=\"h-3 w-16\"></ed-skeleton>\r\n        </header>\r\n        <ul class=\"m-0 grid max-h-64 min-h-0 flex-1 list-none content-start gap-xs overflow-x-hidden overflow-y-auto p-0\">\r\n          @for (_ of listSkeletonRows; track _) {\r\n            <li>\r\n              <div class=\"flex w-full flex-col gap-xs overflow-hidden rounded-md border border-light bg-white p-sm\">\r\n                <div class=\"flex w-full min-w-0 items-center gap-xs\">\r\n                  <div class=\"flex min-w-0 flex-1 items-center gap-xs\">\r\n                    <ed-skeleton class=\"h-9 w-9 shrink-0 !rounded-md\"></ed-skeleton>\r\n                    <div class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\r\n                      <ed-skeleton class=\"h-3 w-32\"></ed-skeleton>\r\n                      <ed-skeleton class=\"h-3 w-36\"></ed-skeleton>\r\n                    </div>\r\n                  </div>\r\n                  <ed-skeleton class=\"h-5 w-28 shrink-0 !rounded-full\"></ed-skeleton>\r\n                </div>\r\n                <div class=\"flex w-full min-w-0 items-center gap-sm\">\r\n                  <div class=\"flex min-w-0 flex-1 items-center gap-xs\">\r\n                    <ed-skeleton class=\"h-8 w-8 shrink-0 !rounded-md\"></ed-skeleton>\r\n                    <ed-skeleton class=\"h-3 w-full max-w-xs\"></ed-skeleton>\r\n                  </div>\r\n                  <ed-skeleton class=\"h-3 w-14 shrink-0\"></ed-skeleton>\r\n                </div>\r\n              </div>\r\n            </li>\r\n          }\r\n        </ul>\r\n      </article>\r\n    </section>\r\n\r\n    <article class=\"flex flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base\" aria-busy=\"true\">\r\n      <header class=\"flex items-center justify-between gap-xs\">\r\n        <div class=\"flex items-center gap-sm\">\r\n          <h4>Recent Calls</h4>\r\n          <ed-skeleton class=\"h-5 w-8 !rounded-full\"></ed-skeleton>\r\n        </div>\r\n        <ed-skeleton class=\"h-3 w-16\"></ed-skeleton>\r\n      </header>\r\n      <div class=\"overflow-x-auto bg-white rounded-md\">\r\n        <table class=\"table-default relative min-w-5xl w-full\" aria-label=\"Recent calls\">\r\n          <thead>\r\n            <tr>\r\n              <th>Time</th>\r\n              <th>Patient/Caller</th>\r\n              <th class=\"w-16\" aria-label=\"Direction\">\r\n                <span class=\"inline-flex items-center justify-center gap-2xs\">\r\n                  <ed-icon name=\"call_received\" [size]=\"12\" class=\"text-success\" color=\"currentColor\" />\r\n                  <span class=\"text-light\">/</span>\r\n                  <ed-icon name=\"call_made\" [size]=\"12\" class=\"text-primary\" color=\"currentColor\" />\r\n                </span>\r\n              </th>\r\n              <th>Goal</th>\r\n              <th>Handled By</th>\r\n              <th>Resolution</th>\r\n              <th>Result</th>\r\n              <th>Duration</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            @for (_ of skeletonRows; track _) {\r\n              <tr>\r\n                <td>\r\n                  <div class=\"grid gap-2xs py-2xs\">\r\n                    <ed-skeleton class=\"h-3 w-12\"></ed-skeleton>\r\n                    <ed-skeleton class=\"h-3 w-20\"></ed-skeleton>\r\n                  </div>\r\n                </td>\r\n                <td>\r\n                  <div class=\"flex items-center gap-xs py-2xs\">\r\n                    <ed-skeleton class=\"h-8 w-8 !rounded-md\"></ed-skeleton>\r\n                    <div class=\"grid gap-2xs\">\r\n                      <ed-skeleton class=\"h-3 w-28\"></ed-skeleton>\r\n                      <ed-skeleton class=\"h-3 w-36\"></ed-skeleton>\r\n                    </div>\r\n                  </div>\r\n                </td>\r\n                <td>\r\n                  <div class=\"flex py-2xs\">\r\n                    <ed-skeleton class=\"h-5 w-5 !rounded\"></ed-skeleton>\r\n                  </div>\r\n                </td>\r\n                <td><ed-skeleton class=\"h-3 w-32\"></ed-skeleton></td>\r\n                <td><ed-skeleton class=\"h-5 w-12 !rounded-full\"></ed-skeleton></td>\r\n                <td><ed-skeleton class=\"h-5 w-20 !rounded-full\"></ed-skeleton></td>\r\n                <td><ed-skeleton class=\"h-5 w-28 !rounded\"></ed-skeleton></td>\r\n                <td><ed-skeleton class=\"h-3 w-10 ml-auto\"></ed-skeleton></td>\r\n              </tr>\r\n            }\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </article>\r\n  } @else if (data()) {\r\n    <section class=\"grid grid-cols-1 gap-base sm:grid-cols-2 xl:grid-cols-4\" aria-label=\"Overview KPIs\">\r\n      @for (tile of kpiCards(); track tile.id) {\r\n        @if (tile.link) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"flex flex-col gap-xs overflow-hidden rounded-md border border-light bg-white p-base text-left text-inherit transition-colors hover:bg-primary-100 hover:shadow-sm\"\r\n            (click)=\"openKpi(tile)\">\r\n            <span class=\"fs-xs font-semibold uppercase tracking-wide text-light\">{{ tile.label }}</span>\r\n            <h3>{{ tile.value }}</h3>\r\n            <span class=\"fs-xs text-light\">{{ tile.meta }}</span>\r\n          </button>\r\n        } @else {\r\n          <article class=\"flex flex-col gap-xs overflow-hidden rounded-md border border-light bg-white p-base\">\r\n            <span class=\"fs-xs font-semibold uppercase tracking-wide text-light\">{{ tile.label }}</span>\r\n            <h3>{{ tile.value }}</h3>\r\n            <span class=\"fs-sm text-light\">{{ tile.meta }}</span>\r\n          </article>\r\n        }\r\n      }\r\n    </section>\r\n\r\n    <section\r\n      class=\"grid grid-cols-1 items-stretch gap-base xl:grid-cols-[minmax(0,785fr)_minmax(0,415fr)]\"\r\n      aria-label=\"Live calls and needs attention\">\r\n      <article class=\"flex h-full min-h-0 flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base\">\r\n        <header class=\"flex shrink-0 items-center justify-between gap-sm\">\r\n          <div class=\"flex items-center gap-sm\">\r\n            <h4>Live Calls</h4>\r\n            @if (agentOffline()) {\r\n              <span class=\"inline-flex items-center gap-2xs fs-sm font-semibold text-danger\">\r\n                <ed-icon name=\"phone_disabled\" [size]=\"18\" />\r\n                Offline\r\n              </span>\r\n            } @else {\r\n              <ed-badge-2 variant=\"success\" pill uppercase>\r\n                {{ liveCallCount() }} LIVE\r\n              </ed-badge-2>\r\n            }\r\n          </div>\r\n          <button type=\"button\" class=\"eds-plain-nav fs-sm font-medium text-primary\" (click)=\"goTo('../live')\">\r\n            View All\r\n            <ed-icon name=\"chevron_right\" [size]=\"16\" color=\"currentColor\" />\r\n          </button>\r\n        </header>\r\n\r\n        <ul\r\n          class=\"m-0 grid max-h-64 min-h-0 list-none content-start gap-xs overflow-x-hidden overflow-y-auto p-0\"\r\n          [class.flex-1]=\"liveCallsLoading() || liveCallRows().length > 0\"\r\n        >\r\n          @if (liveCallsError()) {\r\n            <li class=\"fs-sm text-light\" role=\"alert\">{{ liveCallsError() }}</li>\r\n          }\r\n          @if (liveCallsLoading() && liveCallRows().length === 0) {\r\n            @for (_ of listSkeletonRows; track _) {\r\n              <li>\r\n                <div class=\"flex w-full items-center gap-base rounded-md border border-light bg-white p-sm\">\r\n                  <div class=\"flex min-w-0 flex-1 items-center gap-xs xl:max-w-xs\">\r\n                    <ed-skeleton class=\"h-9 w-9 shrink-0 !rounded-md\"></ed-skeleton>\r\n                    <div class=\"grid min-w-0 flex-1 gap-2xs\">\r\n                      <ed-skeleton class=\"h-3 w-32\"></ed-skeleton>\r\n                      <ed-skeleton class=\"h-3 w-40\"></ed-skeleton>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"hidden min-w-0 flex-1 items-center gap-xs xl:flex\">\r\n                    <ed-skeleton class=\"h-9 w-9 shrink-0 !rounded-md\"></ed-skeleton>\r\n                    <div class=\"grid min-w-0 gap-2xs\">\r\n                      <ed-skeleton class=\"h-3 w-28\"></ed-skeleton>\r\n                      <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"grid shrink-0 justify-items-end gap-2xs self-stretch\">\r\n                    <ed-skeleton class=\"h-5 w-24 !rounded-full\"></ed-skeleton>\r\n                    <ed-skeleton class=\"h-3 w-12\"></ed-skeleton>\r\n                  </div>\r\n                </div>\r\n              </li>\r\n            }\r\n          }\r\n          @for (call of liveCallRows(); track call.id) {\r\n            <li>\r\n              <button\r\n                type=\"button\"\r\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\"\r\n                [class.border-danger]=\"call.needsAssistance\"\r\n                [class.bg-danger-50]=\"call.needsAssistance\"\r\n                (click)=\"openLiveCall(call.id)\"\r\n              >\r\n                <div class=\"flex min-w-0 flex-1 items-center gap-xs xl:max-w-xs\">\r\n                  <ed-avatar\r\n                    shape=\"box\"\r\n                    size=\"base\"\r\n                    [initials]=\"call.initials\"\r\n                    [tone]=\"call.avatarTone\"\r\n                  />\r\n                  <div class=\"grid min-w-0 flex-1 gap-2xs\">\r\n                    <div class=\"flex min-w-0 flex-wrap items-center gap-sm\">\r\n                      <span class=\"fs-sm font-semibold text-dark\">{{ call.name }}</span>\r\n                      <span class=\"vr-sentiment\" [attr.data-sentiment]=\"call.sentiment\">\r\n                        <span class=\"vr-sentiment__icon\" aria-hidden=\"true\">\r\n                          <img [src]=\"call.sentimentIconSrc\" alt=\"\" width=\"16\" height=\"16\" />\r\n                        </span>\r\n                        <span>{{ call.sentimentLabel }}</span>\r\n                      </span>\r\n                    </div>\r\n                    <span class=\"fs-sm whitespace-nowrap text-light\">{{ call.metaLine }}</span>\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"hidden min-w-0 flex-1 items-center gap-xs xl:flex\">\r\n                  <span\r\n                    class=\"inline-flex size-9 shrink-0 items-center justify-center rounded-md\"\r\n                    [class.bg-success-50]=\"call.direction === 'inbound'\"\r\n                    [class.text-success]=\"call.direction === 'inbound'\"\r\n                    [class.bg-primary-50]=\"call.direction === 'outbound'\"\r\n                    [class.text-primary]=\"call.direction === 'outbound'\"\r\n                    [smartTooltip]=\"call.directionTitle\"\r\n                  >\r\n                    <ed-icon [name]=\"call.directionIcon\" [size]=\"18\" color=\"currentColor\" />\r\n                  </span>\r\n                  <div class=\"grid min-w-0 gap-2xs whitespace-nowrap\">\r\n                    <span class=\"fs-sm font-medium text-dark\">{{ call.goal }}</span>\r\n                    <span class=\"fs-xs text-light\">{{ call.statusSubtitle }}</span>\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"grid shrink-0 justify-items-end gap-2xs self-stretch\">\r\n                  <ed-badge-2 [attr.variant]=\"call.handlingVariant\" pill uppercase>\r\n                    {{ call.handlingLabel }}\r\n                  </ed-badge-2>\r\n                  <strong\r\n                    class=\"inline-flex items-center gap-2xs fs-2xs text-primary\"\r\n                    [class.text-danger]=\"call.needsAssistance\"\r\n                    [class.text-light]=\"!call.needsAssistance\"\r\n                  >\r\n                    @if (!call.needsAssistance) {\r\n                      <eds-pulse-dot />\r\n                    }\r\n                    {{ call.started | edsElapsed }}\r\n                  </strong>\r\n                </div>\r\n              </button>\r\n            </li>\r\n          }\r\n        </ul>\r\n        @if (!liveCallsLoading() && !liveCallsError() && liveCallRows().length === 0) {\r\n          <div class=\"xy-center flex min-h-0 flex-1 items-center justify-center fs-sm text-light\">\r\n            No active calls right now.\r\n          </div>\r\n        }\r\n      </article>\r\n\r\n      <article class=\"flex h-full min-h-0 flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base\">\r\n        <header class=\"flex shrink-0 items-center justify-between gap-sm\">\r\n          <div class=\"flex items-center gap-sm\">\r\n            <h4>Needs Attention</h4>\r\n            <ed-badge-2 variant=\"warning\" pill>\r\n              {{ attentionCount() }}\r\n            </ed-badge-2>\r\n          </div>\r\n          <button type=\"button\" class=\"eds-plain-nav fs-sm font-medium text-primary\" (click)=\"goTo('../history')\">\r\n            View All\r\n            <ed-icon name=\"chevron_right\" [size]=\"16\" color=\"currentColor\" />\r\n          </button>\r\n        </header>\r\n\r\n        <ul class=\"m-0 grid max-h-64 min-h-0 flex-1 list-none content-start gap-xs overflow-x-hidden overflow-y-auto p-0\">\r\n          @for (item of attentionRows(); track item.id) {\r\n            <li>\r\n              <div\r\n                role=\"button\"\r\n                tabindex=\"0\"\r\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\"\r\n                [attr.aria-label]=\"'Open attention item for ' + item.name\"\r\n                (click)=\"openAttention(item)\"\r\n                (keyup.enter)=\"openAttention(item)\"\r\n              >\r\n                <div class=\"flex w-full min-w-0 items-center gap-xs\">\r\n                  <div class=\"flex min-w-0 flex-1 items-center gap-xs\">\r\n                    <ed-avatar\r\n                      shape=\"box\"\r\n                      size=\"base\"\r\n                      [initials]=\"item.initials\"\r\n                      [tone]=\"item.avatarTone\"\r\n                    />\r\n                    <div class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\r\n                      <div class=\"flex min-w-0 items-center gap-2xs\">\r\n                        <span class=\"truncate fs-sm font-semibold text-dark\">{{ item.name }}</span>\r\n                        <!-- <span class=\"inline-flex shrink-0 text-light\">\r\n                          <ed-icon name=\"TagSimple\" [size]=\"14\" color=\"currentColor\" />\r\n                        </span> -->\r\n                      </div>\r\n                      <span class=\"truncate fs-sm text-light\">{{ item.metaLine }}</span>\r\n                    </div>\r\n                  </div>\r\n                  <ed-badge-2 class=\"shrink-0\" variant=\"light\" pill uppercase>\r\n                    {{ item.badge }}\r\n                  </ed-badge-2>\r\n                </div>\r\n                <div class=\"flex w-full min-w-0 items-center gap-sm\">\r\n                  <div class=\"flex min-w-0 flex-1 items-center gap-xs\">\r\n                    <span\r\n                      class=\"inline-flex size-8 shrink-0 items-center justify-center rounded-md\"\r\n                      [class.bg-success-50]=\"item.direction === 'inbound'\"\r\n                      [class.text-success]=\"item.direction === 'inbound'\"\r\n                      [class.bg-primary-50]=\"item.direction === 'outbound'\"\r\n                      [class.text-primary]=\"item.direction === 'outbound'\"\r\n                      [smartTooltip]=\"item.directionTitle\"\r\n                    >\r\n                      <ed-icon [name]=\"item.directionIcon\" [size]=\"16\" color=\"currentColor\" />\r\n                    </span>\r\n                    <span class=\"min-w-0 flex-1 truncate fs-sm text-light\">{{ item.detail }}</span>\r\n                  </div>\r\n                  <span class=\"shrink-0 whitespace-nowrap fs-xs text-light\">{{ item.timeLabel }}</span>\r\n                </div>\r\n              </div>\r\n            </li>\r\n          } @empty {\r\n            <li class=\"fs-sm text-light\">Nothing needs attention right now.</li>\r\n          }\r\n        </ul>\r\n      </article>\r\n    </section>\r\n\r\n    <article class=\"flex flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base\">\r\n      <header class=\"flex items-center justify-between gap-xs\">\r\n        <div class=\"flex items-center gap-sm\">\r\n          <h4>Recent Calls</h4>\r\n          <ed-badge-2\r\n            variant=\"light\"\r\n            pill\r\n            [attr.aria-label]=\"'Recent calls count ' + recentHistoryCount()\"\r\n          >\r\n            {{ recentHistoryCount() }}\r\n          </ed-badge-2>\r\n        </div>\r\n        <button type=\"button\" class=\"eds-plain-nav fs-sm font-medium text-primary\" (click)=\"goTo('../history')\">\r\n          View All\r\n          <ed-icon name=\"chevron_right\" [size]=\"16\" color=\"currentColor\" />\r\n        </button>\r\n      </header>\r\n\r\n      <div class=\"overflow-x-auto bg-white rounded-md\">\r\n        <table class=\"table-default relative min-w-5xl w-full\" aria-label=\"Recent calls\">\r\n          <thead>\r\n            <tr>\r\n              <th>Time</th>\r\n              <th>Patient/Caller</th>\r\n              <th class=\"w-16\" aria-label=\"Direction\">\r\n                <span class=\"inline-flex items-center justify-center gap-2xs\">\r\n                  <ed-icon name=\"call_received\" [size]=\"12\" class=\"text-success\" color=\"currentColor\" />\r\n                  <span class=\"text-light\">/</span>\r\n                  <ed-icon name=\"call_made\" [size]=\"12\" class=\"text-primary\" color=\"currentColor\" />\r\n                </span>\r\n              </th>\r\n              <th>Goal</th>\r\n              <th>Handled By</th>\r\n              <th>Resolution</th>\r\n              <th>Result</th>\r\n              <th>Duration</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            @for (row of recentHistoryRows(); track row.id) {\r\n              <tr\r\n                class=\"focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary\"\r\n                tabindex=\"0\"\r\n                role=\"button\"\r\n                [attr.aria-label]=\"'View call details for ' + row.name\"\r\n                (click)=\"openHistoryDetail(row.id)\"\r\n                (keyup.enter)=\"openHistoryDetail(row.id)\"\r\n              >\r\n                <td>\r\n                  <div class=\"flex flex-col gap-2xs whitespace-nowrap\">\r\n                    @if (row.started) {\r\n                      <span class=\"fs-xs font-medium text-light\">{{ row.started | date: 'shortTime' }}</span>\r\n                      <span class=\"fs-xs text-light\">{{ row.started | date: 'MMM d, y' }}</span>\r\n                    } @else {\r\n                      <span class=\"fs-xs font-medium text-light\">{{ row.whenLabel }}</span>\r\n                    }\r\n                  </div>\r\n                </td>\r\n\r\n                <td>\r\n                  <div class=\"flex min-w-52 items-center gap-xs\">\r\n                    <ed-avatar\r\n                      shape=\"box\"\r\n                      size=\"base\"\r\n                      [initials]=\"row.initials\"\r\n                      [tone]=\"row.avatarTone\"\r\n                    />\r\n                    <div class=\"flex min-w-0 flex-col gap-2xs\">\r\n                      <div class=\"flex min-w-0 items-center gap-2xs text-dark\">\r\n                        <span\r\n                          class=\"inline-block min-w-0 max-w-56 truncate fs-sm font-semibold\"\r\n                          [smartTooltip]=\"row.name\"\r\n                          [tooltipOnlyWhenTruncated]=\"true\"\r\n                        >{{ row.name }}</span>\r\n                        <!-- <span class=\"inline-flex shrink-0 text-light\">\r\n                          <ed-icon name=\"TagSimple\" [size]=\"14\" color=\"currentColor\" />\r\n                        </span> -->\r\n                      </div>\r\n                      <span\r\n                        class=\"inline-block min-w-0 max-w-64 truncate fs-xs text-light\"\r\n                        [smartTooltip]=\"row.metaLine\"\r\n                        [tooltipOnlyWhenTruncated]=\"true\"\r\n                      >{{ row.metaLine }}</span>\r\n                    </div>\r\n                  </div>\r\n                </td>\r\n\r\n                <td>\r\n                  <span\r\n                    class=\"inline-flex size-5 items-center justify-center rounded\"\r\n                    [class.bg-success-50]=\"row.direction === 'inbound'\"\r\n                    [class.text-success]=\"row.direction === 'inbound'\"\r\n                    [class.bg-primary-50]=\"row.direction === 'outbound'\"\r\n                    [class.text-primary]=\"row.direction === 'outbound'\"\r\n                    [smartTooltip]=\"row.directionTitle\"\r\n                  >\r\n                    <ed-icon [name]=\"row.directionIcon\" [size]=\"12\" color=\"currentColor\" />\r\n                  </span>\r\n                </td>\r\n\r\n                <td>\r\n                  <span\r\n                    class=\"inline-block min-w-0 max-w-56 truncate fs-sm font-medium text-light\"\r\n                    [smartTooltip]=\"row.reason\"\r\n                    [tooltipOnlyWhenTruncated]=\"true\"\r\n                  >{{ row.reason }}</span>\r\n                </td>\r\n\r\n                <td>\r\n                  <ed-badge-2 [attr.variant]=\"row.handledByVariant\" pill uppercase>\r\n                    {{ row.handledByLabel }}\r\n                  </ed-badge-2>\r\n                </td>\r\n\r\n                <td>\r\n                  @if (row.resolution) {\r\n                    <ed-badge-2 [attr.variant]=\"row.resolutionVariant\" pill uppercase>\r\n                      {{ row.resolutionLabel }}\r\n                    </ed-badge-2>\r\n                  }\r\n                </td>\r\n\r\n                <td>\r\n                  <div class=\"flex min-w-0 max-w-80 flex-wrap gap-2xs\">\r\n                    @for (chip of row.resultChips; track chip.label) {\r\n                      <span\r\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\"\r\n                      >\r\n                        <ed-icon [name]=\"chip.icon\" [size]=\"12\" color=\"currentColor\" />\r\n                        <span\r\n                          class=\"min-w-0 truncate\"\r\n                          [smartTooltip]=\"chip.label\"\r\n                          [tooltipOnlyWhenTruncated]=\"true\"\r\n                        >{{ chip.label }}</span>\r\n                      </span>\r\n                    } @empty {\r\n                      <span class=\"fs-sm text-light\">\u2014</span>\r\n                    }\r\n                  </div>\r\n                </td>\r\n\r\n                <td class=\"whitespace-nowrap tabular-nums fs-xs font-medium\">\r\n                  {{ row.durationLabel }}\r\n                </td>\r\n              </tr>\r\n            } @empty {\r\n              <tr class=\"table-no-data\">\r\n                <td colspan=\"8\" class=\"py-base fs-sm text-light\">No recent calls.</td>\r\n              </tr>\r\n            }\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </article>\r\n  }\r\n  </div>\r\n</div>\r\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}.eds-plain-nav{display:inline-flex;align-items:center;gap:.25rem;margin:0;padding:0;border:none;background:transparent;cursor:pointer;font:inherit;color:inherit}\n"], dependencies: [{ 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: [
+                        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\">\r\n  <header class=\"mb-base flex shrink-0 items-start justify-between gap-base\">\r\n    <div class=\"flex flex-col gap-2xs\">\r\n      <h3>Dashboard</h3>\r\n      <p class=\"fs-sm text-light\">Monitor AI receptionist activity and follow up where needed</p>\r\n    </div>\r\n    <ed-button\r\n      class=\"shrink-0\"\r\n      variant=\"default\"\r\n      size=\"sm\"\r\n      (click$)=\"exportCsv()\">\r\n      <ed-icon slot=\"prefix\" name=\"download\" [size]=\"16\" />\r\n      Export CSV\r\n    </ed-button>\r\n  </header>\r\n\r\n  <div class=\"flex  flex-1 flex-col gap-base  \">\r\n  @if (loading()) {\r\n    <section class=\"grid grid-cols-1 gap-base sm:grid-cols-2 xl:grid-cols-4\" aria-label=\"Overview KPIs\" aria-busy=\"true\">\r\n      @for (_ of kpiSkeletonRows; track _) {\r\n        <article class=\"flex flex-col gap-xs overflow-hidden rounded-md border border-light bg-white p-base\">\r\n          <ed-skeleton class=\"h-3 w-28\"></ed-skeleton>\r\n          <ed-skeleton class=\"h-6 w-14\"></ed-skeleton>\r\n          <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\r\n        </article>\r\n      }\r\n    </section>\r\n\r\n    <section\r\n      class=\"grid grid-cols-1 items-stretch gap-base xl:grid-cols-[minmax(0,785fr)_minmax(0,415fr)]\"\r\n      aria-label=\"Live calls and needs attention\"\r\n      aria-busy=\"true\"\r\n    >\r\n      <article class=\"flex h-full min-h-0 flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base\">\r\n        <header class=\"flex shrink-0 items-center justify-between gap-sm\">\r\n          <div class=\"flex items-center gap-sm\">\r\n            <h4>Live Calls</h4>\r\n            <ed-skeleton class=\"h-5 w-16 !rounded-full\"></ed-skeleton>\r\n          </div>\r\n          <ed-skeleton class=\"h-3 w-16\"></ed-skeleton>\r\n        </header>\r\n        <ul class=\"m-0 grid max-h-64 min-h-0 flex-1 list-none content-start gap-xs overflow-x-hidden overflow-y-auto p-0\">\r\n          @for (_ of listSkeletonRows; track _) {\r\n            <li>\r\n              <div class=\"flex w-full items-center gap-base rounded-md border border-light bg-white p-sm\">\r\n                <div class=\"flex min-w-0 flex-1 items-center gap-xs xl:max-w-xs\">\r\n                  <ed-skeleton class=\"h-9 w-9 shrink-0 !rounded-md\"></ed-skeleton>\r\n                  <div class=\"grid min-w-0 flex-1 gap-2xs\">\r\n                    <ed-skeleton class=\"h-3 w-32\"></ed-skeleton>\r\n                    <ed-skeleton class=\"h-3 w-40\"></ed-skeleton>\r\n                  </div>\r\n                </div>\r\n                <div class=\"hidden min-w-0 flex-1 items-center gap-xs xl:flex\">\r\n                  <ed-skeleton class=\"h-9 w-9 shrink-0 !rounded-md\"></ed-skeleton>\r\n                  <div class=\"grid min-w-0 gap-2xs\">\r\n                    <ed-skeleton class=\"h-3 w-28\"></ed-skeleton>\r\n                    <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\r\n                  </div>\r\n                </div>\r\n                <div class=\"grid shrink-0 justify-items-end gap-2xs self-stretch\">\r\n                  <ed-skeleton class=\"h-5 w-24 !rounded-full\"></ed-skeleton>\r\n                  <ed-skeleton class=\"h-3 w-12\"></ed-skeleton>\r\n                </div>\r\n              </div>\r\n            </li>\r\n          }\r\n        </ul>\r\n      </article>\r\n\r\n      <article class=\"flex h-full min-h-0 flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base\">\r\n        <header class=\"flex shrink-0 items-center justify-between gap-sm\">\r\n          <div class=\"flex items-center gap-sm\">\r\n            <h4>Needs Attention</h4>\r\n            <ed-skeleton class=\"h-5 w-8 !rounded-full\"></ed-skeleton>\r\n          </div>\r\n          <ed-skeleton class=\"h-3 w-16\"></ed-skeleton>\r\n        </header>\r\n        <ul class=\"m-0 grid max-h-64 min-h-0 flex-1 list-none content-start gap-xs overflow-x-hidden overflow-y-auto p-0\">\r\n          @for (_ of listSkeletonRows; track _) {\r\n            <li>\r\n              <div class=\"flex w-full flex-col gap-xs overflow-hidden rounded-md border border-light bg-white p-sm\">\r\n                <div class=\"flex w-full min-w-0 items-center gap-xs\">\r\n                  <div class=\"flex min-w-0 flex-1 items-center gap-xs\">\r\n                    <ed-skeleton class=\"h-9 w-9 shrink-0 !rounded-md\"></ed-skeleton>\r\n                    <div class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\r\n                      <ed-skeleton class=\"h-3 w-32\"></ed-skeleton>\r\n                      <ed-skeleton class=\"h-3 w-36\"></ed-skeleton>\r\n                    </div>\r\n                  </div>\r\n                  <ed-skeleton class=\"h-5 w-28 shrink-0 !rounded-full\"></ed-skeleton>\r\n                </div>\r\n                <div class=\"flex w-full min-w-0 items-center gap-sm\">\r\n                  <div class=\"flex min-w-0 flex-1 items-center gap-xs\">\r\n                    <ed-skeleton class=\"h-8 w-8 shrink-0 !rounded-md\"></ed-skeleton>\r\n                    <ed-skeleton class=\"h-3 w-full max-w-xs\"></ed-skeleton>\r\n                  </div>\r\n                  <ed-skeleton class=\"h-3 w-14 shrink-0\"></ed-skeleton>\r\n                </div>\r\n              </div>\r\n            </li>\r\n          }\r\n        </ul>\r\n      </article>\r\n    </section>\r\n\r\n    <article class=\"flex flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base\" aria-busy=\"true\">\r\n      <header class=\"flex items-center justify-between gap-xs\">\r\n        <div class=\"flex items-center gap-sm\">\r\n          <h4>Recent Calls</h4>\r\n          <ed-skeleton class=\"h-5 w-8 !rounded-full\"></ed-skeleton>\r\n        </div>\r\n        <ed-skeleton class=\"h-3 w-16\"></ed-skeleton>\r\n      </header>\r\n      <div class=\"overflow-x-auto bg-white rounded-md\">\r\n        <table class=\"table-default relative min-w-5xl w-full\" aria-label=\"Recent calls\">\r\n          <thead>\r\n            <tr>\r\n              <th>Time</th>\r\n              <th>Patient/Caller</th>\r\n              <th class=\"w-16\" aria-label=\"Direction\">\r\n                <span class=\"inline-flex items-center justify-center gap-2xs\">\r\n                  <ed-icon name=\"call_received\" [size]=\"12\" class=\"text-success\" color=\"currentColor\" />\r\n                  <span class=\"text-light\">/</span>\r\n                  <ed-icon name=\"call_made\" [size]=\"12\" class=\"text-primary\" color=\"currentColor\" />\r\n                </span>\r\n              </th>\r\n              <th>Goal</th>\r\n              <th>Handled By</th>\r\n              <th>Resolution</th>\r\n              <th>Result</th>\r\n              <th>Duration</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            @for (_ of skeletonRows; track _) {\r\n              <tr>\r\n                <td>\r\n                  <div class=\"grid gap-2xs py-2xs\">\r\n                    <ed-skeleton class=\"h-3 w-12\"></ed-skeleton>\r\n                    <ed-skeleton class=\"h-3 w-20\"></ed-skeleton>\r\n                  </div>\r\n                </td>\r\n                <td>\r\n                  <div class=\"flex items-center gap-xs py-2xs\">\r\n                    <ed-skeleton class=\"h-8 w-8 !rounded-md\"></ed-skeleton>\r\n                    <div class=\"grid gap-2xs\">\r\n                      <ed-skeleton class=\"h-3 w-28\"></ed-skeleton>\r\n                      <ed-skeleton class=\"h-3 w-36\"></ed-skeleton>\r\n                    </div>\r\n                  </div>\r\n                </td>\r\n                <td>\r\n                  <div class=\"flex py-2xs\">\r\n                    <ed-skeleton class=\"h-5 w-5 !rounded\"></ed-skeleton>\r\n                  </div>\r\n                </td>\r\n                <td><ed-skeleton class=\"h-3 w-32\"></ed-skeleton></td>\r\n                <td><ed-skeleton class=\"h-5 w-12 !rounded-full\"></ed-skeleton></td>\r\n                <td><ed-skeleton class=\"h-5 w-20 !rounded-full\"></ed-skeleton></td>\r\n                <td><ed-skeleton class=\"h-5 w-28 !rounded\"></ed-skeleton></td>\r\n                <td><ed-skeleton class=\"h-3 w-10 ml-auto\"></ed-skeleton></td>\r\n              </tr>\r\n            }\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </article>\r\n  } @else if (data()) {\r\n    <section class=\"grid grid-cols-1 gap-base sm:grid-cols-2 xl:grid-cols-4\" aria-label=\"Overview KPIs\">\r\n      @for (tile of kpiCards(); track tile.id) {\r\n        @if (tile.link) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"flex flex-col gap-xs overflow-hidden rounded-md border border-light bg-white p-base text-left text-inherit transition-colors hover:bg-primary-100 hover:shadow-sm\"\r\n            (click)=\"openKpi(tile)\">\r\n            <span class=\"fs-xs font-semibold uppercase tracking-wide text-light\">{{ tile.label }}</span>\r\n            <h3>{{ tile.value }}</h3>\r\n            <span class=\"fs-xs text-light\">{{ tile.meta }}</span>\r\n          </button>\r\n        } @else {\r\n          <article class=\"flex flex-col gap-xs overflow-hidden rounded-md border border-light bg-white p-base\">\r\n            <span class=\"fs-xs font-semibold uppercase tracking-wide text-light\">{{ tile.label }}</span>\r\n            <h3>{{ tile.value }}</h3>\r\n            <span class=\"fs-sm text-light\">{{ tile.meta }}</span>\r\n          </article>\r\n        }\r\n      }\r\n    </section>\r\n\r\n    <section\r\n      class=\"grid grid-cols-1 items-stretch gap-base xl:grid-cols-[minmax(0,785fr)_minmax(0,415fr)]\"\r\n      aria-label=\"Live calls and needs attention\">\r\n      <article class=\"flex h-full min-h-0 flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base\">\r\n        <header class=\"flex shrink-0 items-center justify-between gap-sm\">\r\n          <div class=\"flex items-center gap-sm\">\r\n            <h4>Live Calls</h4>\r\n            @if (agentOffline()) {\r\n              <span class=\"inline-flex items-center gap-2xs fs-sm font-semibold text-danger\">\r\n                <ed-icon name=\"phone_disabled\" [size]=\"18\" />\r\n                Offline\r\n              </span>\r\n            } @else {\r\n              <ed-badge-2 variant=\"success\" pill uppercase>\r\n                {{ liveCallCount() }} LIVE\r\n              </ed-badge-2>\r\n            }\r\n          </div>\r\n          <button type=\"button\" class=\"eds-plain-nav fs-sm font-medium text-primary\" (click)=\"goTo('../live')\">\r\n            View All\r\n            <ed-icon name=\"chevron_right\" [size]=\"16\" color=\"currentColor\" />\r\n          </button>\r\n        </header>\r\n\r\n        <ul\r\n          class=\"m-0 grid max-h-64 min-h-0 list-none content-start gap-xs overflow-x-hidden overflow-y-auto p-0\"\r\n          [class.flex-1]=\"liveCallsLoading() || liveCallRows().length > 0\"\r\n        >\r\n          @if (liveCallsError()) {\r\n            <li class=\"fs-sm text-light\" role=\"alert\">{{ liveCallsError() }}</li>\r\n          }\r\n          @if (liveCallsLoading() && liveCallRows().length === 0) {\r\n            @for (_ of listSkeletonRows; track _) {\r\n              <li>\r\n                <div class=\"flex w-full items-center gap-base rounded-md border border-light bg-white p-sm\">\r\n                  <div class=\"flex min-w-0 flex-1 items-center gap-xs xl:max-w-xs\">\r\n                    <ed-skeleton class=\"h-9 w-9 shrink-0 !rounded-md\"></ed-skeleton>\r\n                    <div class=\"grid min-w-0 flex-1 gap-2xs\">\r\n                      <ed-skeleton class=\"h-3 w-32\"></ed-skeleton>\r\n                      <ed-skeleton class=\"h-3 w-40\"></ed-skeleton>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"hidden min-w-0 flex-1 items-center gap-xs xl:flex\">\r\n                    <ed-skeleton class=\"h-9 w-9 shrink-0 !rounded-md\"></ed-skeleton>\r\n                    <div class=\"grid min-w-0 gap-2xs\">\r\n                      <ed-skeleton class=\"h-3 w-28\"></ed-skeleton>\r\n                      <ed-skeleton class=\"h-3 w-24\"></ed-skeleton>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"grid shrink-0 justify-items-end gap-2xs self-stretch\">\r\n                    <ed-skeleton class=\"h-5 w-24 !rounded-full\"></ed-skeleton>\r\n                    <ed-skeleton class=\"h-3 w-12\"></ed-skeleton>\r\n                  </div>\r\n                </div>\r\n              </li>\r\n            }\r\n          }\r\n          @for (call of liveCallRows(); track call.id) {\r\n            <li>\r\n              <button\r\n                type=\"button\"\r\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\"\r\n                [class.border-danger]=\"call.needsAssistance\"\r\n                [class.bg-danger-50]=\"call.needsAssistance\"\r\n                (click)=\"openLiveCall(call.id)\"\r\n              >\r\n                <div class=\"flex min-w-0 flex-1 items-center gap-xs xl:max-w-xs\">\r\n                  <ed-avatar\r\n                    shape=\"box\"\r\n                    size=\"base\"\r\n                    [initials]=\"call.initials\"\r\n                    [tone]=\"call.avatarTone\"\r\n                  />\r\n                  <div class=\"grid min-w-0 flex-1 gap-2xs\">\r\n                    <div class=\"flex min-w-0 flex-wrap items-center gap-sm\">\r\n                      <span class=\"fs-sm font-semibold text-dark\">{{ call.name }}</span>\r\n                      <span class=\"vr-sentiment\" [attr.data-sentiment]=\"call.sentiment\">\r\n                        <span class=\"vr-sentiment__icon\" aria-hidden=\"true\">\r\n                          <img [src]=\"call.sentimentIconSrc\" alt=\"\" width=\"16\" height=\"16\" />\r\n                        </span>\r\n                        <span>{{ call.sentimentLabel }}</span>\r\n                      </span>\r\n                    </div>\r\n                    <span class=\"fs-sm whitespace-nowrap text-light\">{{ call.metaLine }}</span>\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"hidden min-w-0 flex-1 items-center gap-xs xl:flex\">\r\n                  <span\r\n                    class=\"inline-flex size-9 shrink-0 items-center justify-center rounded-md\"\r\n                    [class.bg-success-50]=\"call.direction === 'inbound'\"\r\n                    [class.text-success]=\"call.direction === 'inbound'\"\r\n                    [class.bg-primary-50]=\"call.direction === 'outbound'\"\r\n                    [class.text-primary]=\"call.direction === 'outbound'\"\r\n                    [smartTooltip]=\"call.directionTitle\"\r\n                  >\r\n                    <ed-icon [name]=\"call.directionIcon\" [size]=\"18\" color=\"currentColor\" />\r\n                  </span>\r\n                  <div class=\"grid min-w-0 gap-2xs whitespace-nowrap\">\r\n                    <span class=\"fs-sm font-medium text-dark\">{{ call.goal }}</span>\r\n                    <span class=\"fs-xs text-light\">{{ call.statusSubtitle }}</span>\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"grid shrink-0 justify-items-end gap-2xs self-stretch\">\r\n                  <ed-badge-2 [attr.variant]=\"call.handlingVariant\" pill uppercase>\r\n                    {{ call.handlingLabel }}\r\n                  </ed-badge-2>\r\n                  <strong\r\n                    class=\"inline-flex items-center gap-2xs fs-2xs text-primary\"\r\n                    [class.text-danger]=\"call.needsAssistance\"\r\n                    [class.text-light]=\"!call.needsAssistance\"\r\n                  >\r\n                    @if (!call.needsAssistance) {\r\n                      <eds-pulse-dot />\r\n                    }\r\n                    {{ call.started | edsElapsed }}\r\n                  </strong>\r\n                </div>\r\n              </button>\r\n            </li>\r\n          }\r\n        </ul>\r\n        @if (!liveCallsLoading() && !liveCallsError() && liveCallRows().length === 0) {\r\n          <div class=\"xy-center flex min-h-0 flex-1 items-center justify-center fs-sm text-light\">\r\n            No active calls right now.\r\n          </div>\r\n        }\r\n      </article>\r\n\r\n      <article class=\"flex h-full min-h-0 flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base\">\r\n        <header class=\"flex shrink-0 items-center justify-between gap-sm\">\r\n          <div class=\"flex items-center gap-sm\">\r\n            <h4>Needs Attention</h4>\r\n            <ed-badge-2 variant=\"warning\" pill>\r\n              {{ attentionCount() }}\r\n            </ed-badge-2>\r\n          </div>\r\n          <button type=\"button\" class=\"eds-plain-nav fs-sm font-medium text-primary\" (click)=\"goTo('../history')\">\r\n            View All\r\n            <ed-icon name=\"chevron_right\" [size]=\"16\" color=\"currentColor\" />\r\n          </button>\r\n        </header>\r\n\r\n        <ul class=\"m-0 grid max-h-64 min-h-0 flex-1 list-none content-start gap-xs overflow-x-hidden overflow-y-auto p-0\">\r\n          @for (item of attentionRows(); track item.id) {\r\n            <li>\r\n              <div\r\n                role=\"button\"\r\n                tabindex=\"0\"\r\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\"\r\n                [attr.aria-label]=\"'Open attention item for ' + item.name\"\r\n                (click)=\"openAttention(item)\"\r\n                (keyup.enter)=\"openAttention(item)\"\r\n              >\r\n                <div class=\"flex w-full min-w-0 items-center gap-xs\">\r\n                  <div class=\"flex min-w-0 flex-1 items-center gap-xs\">\r\n                    <ed-avatar\r\n                      shape=\"box\"\r\n                      size=\"base\"\r\n                      [initials]=\"item.initials\"\r\n                      [tone]=\"item.avatarTone\"\r\n                    />\r\n                    <div class=\"flex min-w-0 flex-1 flex-col gap-2xs\">\r\n                      <div class=\"flex min-w-0 items-center gap-2xs\">\r\n                        <span class=\"truncate fs-sm font-semibold text-dark\">{{ item.name }}</span>\r\n                        <!-- <span class=\"inline-flex shrink-0 text-light\">\r\n                          <ed-icon name=\"TagSimple\" [size]=\"14\" color=\"currentColor\" />\r\n                        </span> -->\r\n                      </div>\r\n                      <span class=\"truncate fs-sm text-light\">{{ item.metaLine }}</span>\r\n                    </div>\r\n                  </div>\r\n                  <ed-badge-2 class=\"shrink-0\" variant=\"light\" pill uppercase>\r\n                    {{ item.badge }}\r\n                  </ed-badge-2>\r\n                </div>\r\n                <div class=\"flex w-full min-w-0 items-center gap-sm\">\r\n                  <div class=\"flex min-w-0 flex-1 items-center gap-xs\">\r\n                    <span\r\n                      class=\"inline-flex size-8 shrink-0 items-center justify-center rounded-md\"\r\n                      [class.bg-success-50]=\"item.direction === 'inbound'\"\r\n                      [class.text-success]=\"item.direction === 'inbound'\"\r\n                      [class.bg-primary-50]=\"item.direction === 'outbound'\"\r\n                      [class.text-primary]=\"item.direction === 'outbound'\"\r\n                      [smartTooltip]=\"item.directionTitle\"\r\n                    >\r\n                      <ed-icon [name]=\"item.directionIcon\" [size]=\"16\" color=\"currentColor\" />\r\n                    </span>\r\n                    <span class=\"min-w-0 flex-1 truncate fs-sm text-light\">{{ item.detail }}</span>\r\n                  </div>\r\n                  <span class=\"shrink-0 whitespace-nowrap fs-xs text-light\">{{ item.timeLabel }}</span>\r\n                </div>\r\n              </div>\r\n            </li>\r\n          } @empty {\r\n            <li class=\"fs-sm text-light\">Nothing needs attention right now.</li>\r\n          }\r\n        </ul>\r\n      </article>\r\n    </section>\r\n\r\n    <article class=\"flex flex-col gap-base overflow-hidden rounded-lg border border-light bg-white p-base\">\r\n      <header class=\"flex items-center justify-between gap-xs\">\r\n        <div class=\"flex items-center gap-sm\">\r\n          <h4>Recent Calls</h4>\r\n          <ed-badge-2\r\n            variant=\"light\"\r\n            pill\r\n            [attr.aria-label]=\"'Recent calls count ' + recentHistoryCount()\"\r\n          >\r\n            {{ recentHistoryCount() }}\r\n          </ed-badge-2>\r\n        </div>\r\n        <button type=\"button\" class=\"eds-plain-nav fs-sm font-medium text-primary\" (click)=\"goTo('../history')\">\r\n          View All\r\n          <ed-icon name=\"chevron_right\" [size]=\"16\" color=\"currentColor\" />\r\n        </button>\r\n      </header>\r\n\r\n      <div class=\"overflow-x-auto bg-white rounded-md\">\r\n        <table class=\"table-default relative min-w-5xl w-full\" aria-label=\"Recent calls\">\r\n          <thead>\r\n            <tr>\r\n              <th>Time</th>\r\n              <th>Patient/Caller</th>\r\n              <th class=\"w-16\" aria-label=\"Direction\">\r\n                <span class=\"inline-flex items-center justify-center gap-2xs\">\r\n                  <ed-icon name=\"call_received\" [size]=\"12\" class=\"text-success\" color=\"currentColor\" />\r\n                  <span class=\"text-light\">/</span>\r\n                  <ed-icon name=\"call_made\" [size]=\"12\" class=\"text-primary\" color=\"currentColor\" />\r\n                </span>\r\n              </th>\r\n              <th>Goal</th>\r\n              <th>Handled By</th>\r\n              <th>Resolution</th>\r\n              <th>Result</th>\r\n              <th>Duration</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            @for (row of recentHistoryRows(); track row.id) {\r\n              <tr\r\n                class=\"focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary\"\r\n                tabindex=\"0\"\r\n                role=\"button\"\r\n                [attr.aria-label]=\"'View call details for ' + row.name\"\r\n                (click)=\"openHistoryDetail(row.id)\"\r\n                (keyup.enter)=\"openHistoryDetail(row.id)\"\r\n              >\r\n                <td>\r\n                  <div class=\"flex flex-col gap-2xs whitespace-nowrap\">\r\n                    @if (row.started) {\r\n                      <span class=\"fs-xs font-medium text-light\">{{ row.started | date: 'shortTime' }}</span>\r\n                      <span class=\"fs-xs text-light\">{{ row.started | date: 'MMM d, y' }}</span>\r\n                    } @else {\r\n                      <span class=\"fs-xs font-medium text-light\">{{ row.whenLabel }}</span>\r\n                    }\r\n                  </div>\r\n                </td>\r\n\r\n                <td>\r\n                  <div class=\"flex min-w-52 items-center gap-xs\">\r\n                    <ed-avatar\r\n                      shape=\"box\"\r\n                      size=\"base\"\r\n                      [initials]=\"row.initials\"\r\n                      [tone]=\"row.avatarTone\"\r\n                    />\r\n                    <div class=\"flex min-w-0 flex-col gap-2xs\">\r\n                      <div class=\"flex min-w-0 items-center gap-2xs text-dark\">\r\n                        <span\r\n                          class=\"inline-block min-w-0 max-w-56 truncate fs-sm font-semibold\"\r\n                          [smartTooltip]=\"row.name\"\r\n                          [tooltipOnlyWhenTruncated]=\"true\"\r\n                        >{{ row.name }}</span>\r\n                        <!-- <span class=\"inline-flex shrink-0 text-light\">\r\n                          <ed-icon name=\"TagSimple\" [size]=\"14\" color=\"currentColor\" />\r\n                        </span> -->\r\n                      </div>\r\n                      <span\r\n                        class=\"inline-block min-w-0 max-w-64 truncate fs-xs text-light\"\r\n                        [smartTooltip]=\"row.metaLine\"\r\n                        [tooltipOnlyWhenTruncated]=\"true\"\r\n                      >{{ row.metaLine }}</span>\r\n                    </div>\r\n                  </div>\r\n                </td>\r\n\r\n                <td>\r\n                  <span\r\n                    class=\"inline-flex size-5 items-center justify-center rounded\"\r\n                    [class.bg-success-50]=\"row.direction === 'inbound'\"\r\n                    [class.text-success]=\"row.direction === 'inbound'\"\r\n                    [class.bg-primary-50]=\"row.direction === 'outbound'\"\r\n                    [class.text-primary]=\"row.direction === 'outbound'\"\r\n                    [smartTooltip]=\"row.directionTitle\"\r\n                  >\r\n                    <ed-icon [name]=\"row.directionIcon\" [size]=\"12\" color=\"currentColor\" />\r\n                  </span>\r\n                </td>\r\n\r\n                <td>\r\n                  <span\r\n                    class=\"inline-block min-w-0 max-w-56 truncate fs-sm font-medium text-light\"\r\n                    [smartTooltip]=\"row.reason\"\r\n                    [tooltipOnlyWhenTruncated]=\"true\"\r\n                  >{{ row.reason }}</span>\r\n                </td>\r\n\r\n                <td>\r\n                  <ed-badge-2 [attr.variant]=\"row.handledByVariant\" pill uppercase>\r\n                    {{ row.handledByLabel }}\r\n                  </ed-badge-2>\r\n                </td>\r\n\r\n                <td>\r\n                  @if (row.resolution) {\r\n                    <ed-badge-2 [attr.variant]=\"row.resolutionVariant\" pill uppercase>\r\n                      {{ row.resolutionLabel }}\r\n                    </ed-badge-2>\r\n                  }\r\n                </td>\r\n\r\n                <td>\r\n                  <div class=\"flex min-w-0 max-w-80 flex-wrap gap-2xs\">\r\n                    @for (chip of row.resultChips; track chip.label) {\r\n                      <span\r\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\"\r\n                      >\r\n                        <ed-icon [name]=\"chip.icon\" [size]=\"12\" color=\"currentColor\" />\r\n                        <span\r\n                          class=\"min-w-0 truncate\"\r\n                          [smartTooltip]=\"chip.label\"\r\n                          [tooltipOnlyWhenTruncated]=\"true\"\r\n                        >{{ chip.label }}</span>\r\n                      </span>\r\n                    } @empty {\r\n                      <span class=\"fs-sm text-light\">\u2014</span>\r\n                    }\r\n                  </div>\r\n                </td>\r\n\r\n                <td class=\"whitespace-nowrap tabular-nums fs-xs font-medium\">\r\n                  {{ row.durationLabel }}\r\n                </td>\r\n              </tr>\r\n            } @empty {\r\n              <tr class=\"table-no-data\">\r\n                <td colspan=\"8\" class=\"py-base fs-sm text-light\">No recent calls.</td>\r\n              </tr>\r\n            }\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </article>\r\n  }\r\n  </div>\r\n</div>\r\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}.eds-plain-nav{display:inline-flex;align-items:center;gap:.25rem;margin:0;padding:0;border:none;background:transparent;cursor:pointer;font:inherit;color:inherit}\n"] }]
+        }] });
+
+export { DashboardPageComponent };
+//# sourceMappingURL=edvak99-voice-receptionist-widget-dashboard-page.component-Cwunrodb.mjs.map