@memberjunction/ng-dashboards 6.2.0-edge.2 → 6.2.0-edge.3

package/dist/TelephonyOperations/telephony-operations-dashboard.component.js

@@ -0,0 +1,805 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { ChangeDetectorRef, Component, inject } from '@angular/core';
+import { RegisterClass } from '@memberjunction/global';
+import { BaseResourceComponent } from '@memberjunction/ng-shared';
+import { RunView } from '@memberjunction/core';
+import { BuildTelephonyOperationsAgentContext, CalculateOperationsMetrics, FormatCurrency, FormatDuration, ValidateChannelParam, ValidateTimeRangeParam, } from './telephony-operations-agent-context';
+import * as i0 from "@angular/core";
+import * as i1 from "@memberjunction/ng-ui-components";
+import * as i2 from "@angular/common";
+const _forTrack0 = ($index, $item) => $item.Channel;
+const _forTrack1 = ($index, $item) => $item.Direction;
+const _forTrack2 = ($index, $item) => $item.ID;
+const _forTrack3 = ($index, $item) => $item.PhoneNumber;
+function TelephonyOperationsDashboardComponent_Conditional_31_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 15);
+    i0.ɵɵelement(1, "i", 56);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r0.ErrorMessage);
+} }
+function TelephonyOperationsDashboardComponent_Conditional_114_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 41);
+    i0.ɵɵelement(1, "i", 57);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3, "No active live interactions at this moment.");
+    i0.ɵɵelementEnd()();
+} }
+function TelephonyOperationsDashboardComponent_Conditional_115_For_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr", 59)(1, "td", 60);
+    i0.ɵɵelement(2, "i", 61);
+    i0.ɵɵelementStart(3, "span", 62);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "td")(6, "span");
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "td")(9, "span");
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "td")(12, "span", 63);
+    i0.ɵɵelement(13, "span", 64);
+    i0.ɵɵtext(14);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(15, "td");
+    i0.ɵɵtext(16);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(17, "td", 65)(18, "span", 66);
+    i0.ɵɵtext(19);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const live_r2 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(live_r2.RemoteAddress || "Unknown");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(i0.ɵɵinterpolate1("badge channel-badge ", live_r2.Channel.toLowerCase()));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", live_r2.Channel, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(i0.ɵɵinterpolate1("badge direction-badge ", live_r2.Direction.toLowerCase()));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", live_r2.Direction, " ");
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1(" ", live_r2.Status, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.FormatTime(live_r2.StartedAt));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(live_r2.ElapsedLabel);
+} }
+function TelephonyOperationsDashboardComponent_Conditional_115_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 42)(1, "table", 58)(2, "thead")(3, "tr")(4, "th");
+    i0.ɵɵtext(5, "Remote Address");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "th");
+    i0.ɵɵtext(7, "Channel");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "th");
+    i0.ɵɵtext(9, "Direction");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "th");
+    i0.ɵɵtext(11, "Status");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "th");
+    i0.ɵɵtext(13, "Started");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "th");
+    i0.ɵɵtext(15, "Elapsed");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(16, "tbody");
+    i0.ɵɵrepeaterCreate(17, TelephonyOperationsDashboardComponent_Conditional_115_For_18_Template, 20, 12, "tr", 59, _forTrack2);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(17);
+    i0.ɵɵrepeater(ctx_r0.FilteredLiveInteractions);
+} }
+function TelephonyOperationsDashboardComponent_For_128_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 50)(1, "div", 67)(2, "span", 68);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 69);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 70);
+    i0.ɵɵelement(7, "div");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const item_r3 = ctx.$implicit;
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(item_r3.Channel);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate2("", item_r3.Count, " (", item_r3.Percentage, "%)");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(i0.ɵɵinterpolate1("bar-fill channel-", item_r3.Channel.toLowerCase()));
+    i0.ɵɵstyleProp("width", item_r3.Percentage, "%");
+} }
+function TelephonyOperationsDashboardComponent_For_134_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 50)(1, "div", 67)(2, "span", 68);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 69);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 70);
+    i0.ɵɵelement(7, "div");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const item_r4 = ctx.$implicit;
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(item_r4.Direction);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate2("", item_r4.Count, " (", item_r4.Percentage, "%)");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(i0.ɵɵinterpolate1("bar-fill direction-", item_r4.Direction.toLowerCase()));
+    i0.ɵɵstyleProp("width", item_r4.Percentage, "%");
+} }
+function TelephonyOperationsDashboardComponent_Conditional_141_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 41)(1, "p");
+    i0.ɵɵtext(2, "No phone number cost records in this window.");
+    i0.ɵɵelementEnd()();
+} }
+function TelephonyOperationsDashboardComponent_Conditional_142_For_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr")(1, "td", 73);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "td");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "td", 74);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const num_r5 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(num_r5.PhoneNumber);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(num_r5.Count);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.FormatCost(num_r5.Cost));
+} }
+function TelephonyOperationsDashboardComponent_Conditional_142_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 52)(1, "table", 71)(2, "thead")(3, "tr")(4, "th");
+    i0.ɵɵtext(5, "Phone Number / Target");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "th");
+    i0.ɵɵtext(7, "Calls");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "th", 72);
+    i0.ɵɵtext(9, "Est. Cost");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(10, "tbody");
+    i0.ɵɵrepeaterCreate(11, TelephonyOperationsDashboardComponent_Conditional_142_For_12_Template, 7, 3, "tr", null, _forTrack3);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(11);
+    i0.ɵɵrepeater(ctx_r0.Metrics.CostByNumber);
+} }
+function TelephonyOperationsDashboardComponent_Conditional_151_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 41)(1, "p");
+    i0.ɵɵtext(2, "No interactions found matching criteria.");
+    i0.ɵɵelementEnd()();
+} }
+function TelephonyOperationsDashboardComponent_Conditional_152_For_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr")(1, "td")(2, "div", 75)(3, "span", 76);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 77);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(7, "td", 60)(8, "span");
+    i0.ɵɵtext(9);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(10, "td")(11, "span");
+    i0.ɵɵtext(12);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(13, "td")(14, "span");
+    i0.ɵɵtext(15);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(16, "td")(17, "span");
+    i0.ɵɵelement(18, "span", 64);
+    i0.ɵɵtext(19);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(20, "td");
+    i0.ɵɵtext(21);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(22, "td", 78);
+    i0.ɵɵtext(23);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(24, "td", 72);
+    i0.ɵɵtext(25);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const row_r6 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r0.FormatDate(row_r6.StartedAt));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.FormatTime(row_r6.StartedAt));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(row_r6.RemoteAddress || "Unknown");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(i0.ɵɵinterpolate1("badge channel-badge ", row_r6.Channel.toLowerCase()));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", row_r6.Channel, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(i0.ɵɵinterpolate1("badge direction-badge ", row_r6.Direction.toLowerCase()));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", row_r6.Direction, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(i0.ɵɵinterpolate1("status-indicator ", row_r6.Status.toLowerCase()));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", row_r6.Status, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.ComputeDuration(row_r6.StartedAt, row_r6.EndedAt));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(row_r6.EndReason || "-");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.FormatCost(row_r6.CostEstimate));
+} }
+function TelephonyOperationsDashboardComponent_Conditional_152_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 55)(1, "table", 58)(2, "thead")(3, "tr")(4, "th");
+    i0.ɵɵtext(5, "Date / Time");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "th");
+    i0.ɵɵtext(7, "Remote Party");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "th");
+    i0.ɵɵtext(9, "Channel");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "th");
+    i0.ɵɵtext(11, "Direction");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "th");
+    i0.ɵɵtext(13, "Status");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "th");
+    i0.ɵɵtext(15, "Duration");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "th");
+    i0.ɵɵtext(17, "End Reason");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "th", 72);
+    i0.ɵɵtext(19, "Est. Cost");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(20, "tbody");
+    i0.ɵɵrepeaterCreate(21, TelephonyOperationsDashboardComponent_Conditional_152_For_22_Template, 26, 18, "tr", null, _forTrack2);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(21);
+    i0.ɵɵrepeater(ctx_r0.FilteredRecentInteractions);
+} }
+/**
+ * TELEPHONY & INTERACTION OPERATIONS DASHBOARD
+ *
+ * An Explorer L3 dashboard providing operational analytics across phone calls, web realtime
+ * sessions, and multi-party meetings.
+ *
+ * Metrics computed from `MJ: Interactions`, `MJ: Interaction Events`, and `MJ: Phone Numbers`:
+ * - Volume by channel (Phone, Web, Meeting) and direction (Inbound, Outbound, Internal)
+ * - Answer rate and abandonment rate
+ * - Average handle time (AHT) and speed to answer (ASA)
+ * - Transfer and escalation volumes
+ * - Cost estimates by day and by phone number
+ * - Active live calls / sessions in real time
+ *
+ * Data is loaded in a single batched `RunViews` call and aggregated in memory.
+ */
+let TelephonyOperationsDashboardComponent = class TelephonyOperationsDashboardComponent extends BaseResourceComponent {
+    IsLoading = true;
+    ErrorMessage = null;
+    SelectedTimeRange = '7d';
+    SelectedChannelFilter = 'all';
+    SearchQuery = '';
+    RawInteractions = [];
+    RawEvents = [];
+    RawPhoneNumbers = [];
+    Metrics = CalculateOperationsMetrics([], [], []);
+    refreshTimer = null;
+    cdr = inject(ChangeDetectorRef);
+    async GetResourceDisplayName(_data) {
+        return 'Telephony & Interaction Operations';
+    }
+    async GetResourceIconClass(_data) {
+        return 'fa-solid fa-chart-line';
+    }
+    async ngOnInit() {
+        super.ngOnInit();
+        await this.LoadData();
+        this.NotifyLoadComplete();
+        // Auto-refresh live status every 15 seconds
+        this.refreshTimer = setInterval(() => {
+            this.recalculateMetrics();
+            this.cdr.markForCheck();
+        }, 15000);
+    }
+    ngAfterViewInit() {
+        this.publishAgentContext();
+        this.registerAgentClientTools();
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        if (this.refreshTimer) {
+            clearInterval(this.refreshTimer);
+            this.refreshTimer = null;
+        }
+    }
+    async LoadData() {
+        this.IsLoading = true;
+        this.ErrorMessage = null;
+        this.cdr.markForCheck();
+        try {
+            const dateFilterInteractions = this.getDateFilter('StartedAt');
+            const dateFilterEvents = this.getDateFilter('OccurredAt');
+            const rv = RunView.FromMetadataProvider(this.ProviderToUse);
+            const [interactionsResult, eventsResult, phoneNumbersResult] = await rv.RunViews([
+                {
+                    EntityName: 'MJ: Interactions',
+                    ResultType: 'simple',
+                    ExtraFilter: dateFilterInteractions,
+                    OrderBy: 'StartedAt DESC',
+                    MaxRows: 1000,
+                },
+                {
+                    EntityName: 'MJ: Interaction Events',
+                    ResultType: 'simple',
+                    ExtraFilter: dateFilterEvents,
+                    OrderBy: 'OccurredAt DESC',
+                    MaxRows: 2500,
+                },
+                {
+                    EntityName: 'MJ: Phone Numbers',
+                    ResultType: 'simple',
+                    ExtraFilter: "Status = 'Active'",
+                    MaxRows: 200,
+                },
+            ]);
+            if (interactionsResult.Success && Array.isArray(interactionsResult.Results)) {
+                this.RawInteractions = interactionsResult.Results;
+            }
+            else {
+                this.RawInteractions = [];
+            }
+            if (eventsResult.Success && Array.isArray(eventsResult.Results)) {
+                this.RawEvents = eventsResult.Results;
+            }
+            else {
+                this.RawEvents = [];
+            }
+            if (phoneNumbersResult.Success && Array.isArray(phoneNumbersResult.Results)) {
+                this.RawPhoneNumbers = phoneNumbersResult.Results;
+            }
+            else {
+                this.RawPhoneNumbers = [];
+            }
+            this.recalculateMetrics();
+        }
+        catch (err) {
+            this.ErrorMessage = err instanceof Error ? err.message : String(err);
+        }
+        finally {
+            this.IsLoading = false;
+            this.cdr.markForCheck();
+            this.publishAgentContext();
+        }
+    }
+    SetTimeRange(range) {
+        if (this.SelectedTimeRange !== range) {
+            this.SelectedTimeRange = range;
+            void this.LoadData();
+        }
+    }
+    SetChannelFilter(channel) {
+        if (this.SelectedChannelFilter !== channel) {
+            this.SelectedChannelFilter = channel;
+            this.recalculateMetrics();
+            this.cdr.markForCheck();
+            this.publishAgentContext();
+        }
+    }
+    OnSearchQueryChange(query) {
+        this.SearchQuery = query;
+        this.cdr.markForCheck();
+    }
+    get FilteredLiveInteractions() {
+        if (!this.SearchQuery.trim()) {
+            return this.Metrics.LiveInteractions;
+        }
+        const q = this.SearchQuery.toLowerCase();
+        return this.Metrics.LiveInteractions.filter((i) => (i.RemoteAddress && i.RemoteAddress.toLowerCase().includes(q)) ||
+            i.Channel.toLowerCase().includes(q) ||
+            i.Direction.toLowerCase().includes(q) ||
+            i.ID.toLowerCase().includes(q));
+    }
+    get FilteredRecentInteractions() {
+        let rows = this.filteredRawInteractions;
+        if (this.SearchQuery.trim()) {
+            const q = this.SearchQuery.toLowerCase();
+            rows = rows.filter((r) => (r.RemoteAddress && r.RemoteAddress.toLowerCase().includes(q)) ||
+                (r.EndReason && r.EndReason.toLowerCase().includes(q)) ||
+                r.Channel.toLowerCase().includes(q) ||
+                r.Direction.toLowerCase().includes(q) ||
+                r.ID.toLowerCase().includes(q));
+        }
+        return rows.slice(0, 15);
+    }
+    FormatCost(amount) {
+        return FormatCurrency(amount ?? 0);
+    }
+    FormatTime(date) {
+        if (!date)
+            return '-';
+        const d = date instanceof Date ? date : new Date(date);
+        return isNaN(d.getTime()) ? '-' : d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    }
+    FormatDate(date) {
+        if (!date)
+            return '-';
+        const d = date instanceof Date ? date : new Date(date);
+        return isNaN(d.getTime()) ? '-' : d.toLocaleDateString([], { month: 'short', day: 'numeric' });
+    }
+    ComputeDuration(started, ended) {
+        const s = started instanceof Date ? started : new Date(started);
+        if (isNaN(s.getTime()))
+            return '-';
+        const e = ended ? (ended instanceof Date ? ended : new Date(ended)) : new Date();
+        if (isNaN(e.getTime()))
+            return '-';
+        const sec = Math.max(0, Math.floor((e.getTime() - s.getTime()) / 1000));
+        return FormatDuration(sec);
+    }
+    get filteredRawInteractions() {
+        if (this.SelectedChannelFilter === 'all') {
+            return this.RawInteractions;
+        }
+        return this.RawInteractions.filter((i) => i.Channel === this.SelectedChannelFilter);
+    }
+    recalculateMetrics() {
+        const filtered = this.filteredRawInteractions;
+        const activeIds = new Set(filtered.map((i) => i.ID.toLowerCase()));
+        const relevantEvents = this.RawEvents.filter((e) => activeIds.has(e.InteractionID.toLowerCase()));
+        this.Metrics = CalculateOperationsMetrics(filtered, relevantEvents, this.RawPhoneNumbers);
+    }
+    getDateFilter(field) {
+        switch (this.SelectedTimeRange) {
+            case '24h':
+                return `${field} >= DATEADD(hour, -24, GETUTCDATE())`;
+            case '7d':
+                return `${field} >= DATEADD(day, -7, GETUTCDATE())`;
+            case '30d':
+                return `${field} >= DATEADD(day, -30, GETUTCDATE())`;
+            case 'all':
+            default:
+                return '1=1';
+        }
+    }
+    publishAgentContext() {
+        if (!this.navigationService)
+            return;
+        const snapshot = BuildTelephonyOperationsAgentContext(this.Metrics, this.SelectedTimeRange, this.SelectedChannelFilter);
+        this.navigationService.SetAgentContext(this, snapshot);
+    }
+    registerAgentClientTools() {
+        if (!this.navigationService)
+            return;
+        this.navigationService.SetAgentClientTools(this, [
+            {
+                Name: 'RefreshOperationsData',
+                Description: 'Refresh telephony and interaction operations data from the database.',
+                ParameterSchema: { type: 'object', properties: {} },
+                Handler: async () => {
+                    await this.LoadData();
+                    return { Success: true };
+                },
+            },
+            {
+                Name: 'SetTimeRange',
+                Description: 'Set the active time range window (24h, 7d, 30d, all).',
+                ParameterSchema: {
+                    type: 'object',
+                    properties: {
+                        timeRange: {
+                            type: 'string',
+                            description: 'Time range to display: 24h, 7d, 30d, or all',
+                            enum: ['24h', '7d', '30d', 'all'],
+                        },
+                    },
+                    required: ['timeRange'],
+                },
+                Handler: async (params) => {
+                    const validated = ValidateTimeRangeParam(params['timeRange']);
+                    if (!validated.ok) {
+                        return validated.result;
+                    }
+                    this.SetTimeRange(validated.value);
+                    return { Success: true };
+                },
+            },
+            {
+                Name: 'FilterByChannel',
+                Description: 'Filter operations metrics by interaction channel (all, Phone, Web, Meeting).',
+                ParameterSchema: {
+                    type: 'object',
+                    properties: {
+                        channel: {
+                            type: 'string',
+                            description: 'Channel to filter: all, Phone, Web, or Meeting',
+                            enum: ['all', 'Phone', 'Web', 'Meeting'],
+                        },
+                    },
+                    required: ['channel'],
+                },
+                Handler: async (params) => {
+                    const validated = ValidateChannelParam(params['channel']);
+                    if (!validated.ok) {
+                        return validated.result;
+                    }
+                    this.SetChannelFilter(validated.value);
+                    return { Success: true };
+                },
+            },
+        ]);
+    }
+    static ɵfac = /*@__PURE__*/ (() => { let ɵTelephonyOperationsDashboardComponent_BaseFactory; return function TelephonyOperationsDashboardComponent_Factory(__ngFactoryType__) { return (ɵTelephonyOperationsDashboardComponent_BaseFactory || (ɵTelephonyOperationsDashboardComponent_BaseFactory = i0.ɵɵgetInheritedFactory(TelephonyOperationsDashboardComponent)))(__ngFactoryType__ || TelephonyOperationsDashboardComponent); }; })();
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TelephonyOperationsDashboardComponent, selectors: [["mj-telephony-operations-dashboard"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 153, vars: 46, consts: [["Title", "Telephony & Interaction Operations", "Subtitle", "Real-time metrics, volume breakdown, answer rates, and cost analysis across channels", "Icon", "fa-solid fa-chart-line"], ["meta", ""], ["Label", "live now", 3, "Count", "Total", "Variant"], ["actions", ""], [3, "Clicked", "Loading"], ["toolbar", ""], [1, "toolbar-controls"], [3, "ValueChange", "Value"], ["role", "radiogroup", "aria-label", "Time Range", 1, "time-range-pills"], ["type", "button", 1, "range-pill", 3, "click"], ["role", "radiogroup", "aria-label", "Channel Filter", 1, "channel-filter-pills"], ["type", "button", 1, "channel-pill", 3, "click"], [1, "fa-solid", "fa-phone"], [1, "fa-solid", "fa-globe"], [1, "fa-solid", "fa-users"], ["role", "alert", 1, "error-banner"], [1, "kpi-grid"], [1, "kpi-card"], [1, "kpi-icon-wrap", "primary"], [1, "fa-solid", "fa-headset"], [1, "kpi-content"], [1, "kpi-label"], [1, "kpi-value"], [1, "kpi-subtext"], [1, "kpi-icon-wrap", "success"], [1, "live-dot-ping"], [1, "fa-solid", "fa-phone-volume"], [1, "fa-solid", "fa-circle-check"], [1, "kpi-icon-wrap", "warning"], [1, "fa-solid", "fa-phone-slash"], [1, "kpi-icon-wrap", "info"], [1, "fa-solid", "fa-clock"], [1, "kpi-icon-wrap", "accent"], [1, "fa-solid", "fa-arrows-split-up-and-left"], [1, "kpi-icon-wrap", "cost"], [1, "fa-solid", "fa-dollar-sign"], [1, "dashboard-section", "live-section"], [1, "section-header"], [1, "section-title"], [1, "live-pulse-badge"], [1, "count-pill"], [1, "empty-feed"], [1, "live-table-container"], [1, "two-col-grid"], [1, "dashboard-card"], [1, "card-header"], [1, "fa-solid", "fa-layer-group"], [1, "card-body"], [1, "distribution-group"], [1, "bars-container"], [1, "bar-row"], [1, "fa-solid", "fa-money-bill-wave"], [1, "cost-table-container"], [1, "dashboard-section"], [1, "fa-solid", "fa-list-check"], [1, "table-container"], [1, "fa-solid", "fa-triangle-exclamation"], [1, "fa-solid", "fa-phone-slash", "empty-icon"], [1, "ops-table"], [1, "live-row"], [1, "address-col"], [1, "fa-solid", "fa-user-circle", "address-icon"], [1, "address-text"], [1, "status-indicator", "active"], [1, "dot"], [1, "elapsed-col"], [1, "elapsed-badge"], [1, "bar-info"], [1, "bar-label"], [1, "bar-stats"], [1, "bar-track"], [1, "ops-table", "compact"], [1, "text-right"], [1, "font-medium"], [1, "text-right", "font-semibold"], [1, "datetime-cell"], [1, "date"], [1, "time"], [1, "end-reason-cell"]], template: function TelephonyOperationsDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "mj-page-layout")(1, "mj-page-header", 0)(2, "div", 1);
+            i0.ɵɵelement(3, "mj-stat-badge", 2);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "div", 3)(5, "mj-refresh-button", 4);
+            i0.ɵɵlistener("Clicked", function TelephonyOperationsDashboardComponent_Template_mj_refresh_button_Clicked_5_listener() { return ctx.LoadData(); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(6, "div", 5)(7, "div", 6)(8, "mj-page-search", 7);
+            i0.ɵɵlistener("ValueChange", function TelephonyOperationsDashboardComponent_Template_mj_page_search_ValueChange_8_listener($event) { return ctx.OnSearchQueryChange($event); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(9, "div", 8)(10, "button", 9);
+            i0.ɵɵlistener("click", function TelephonyOperationsDashboardComponent_Template_button_click_10_listener() { return ctx.SetTimeRange("24h"); });
+            i0.ɵɵtext(11, " 24h ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(12, "button", 9);
+            i0.ɵɵlistener("click", function TelephonyOperationsDashboardComponent_Template_button_click_12_listener() { return ctx.SetTimeRange("7d"); });
+            i0.ɵɵtext(13, " 7d ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(14, "button", 9);
+            i0.ɵɵlistener("click", function TelephonyOperationsDashboardComponent_Template_button_click_14_listener() { return ctx.SetTimeRange("30d"); });
+            i0.ɵɵtext(15, " 30d ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(16, "button", 9);
+            i0.ɵɵlistener("click", function TelephonyOperationsDashboardComponent_Template_button_click_16_listener() { return ctx.SetTimeRange("all"); });
+            i0.ɵɵtext(17, " All Time ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(18, "div", 10)(19, "button", 11);
+            i0.ɵɵlistener("click", function TelephonyOperationsDashboardComponent_Template_button_click_19_listener() { return ctx.SetChannelFilter("all"); });
+            i0.ɵɵtext(20, " All Channels ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(21, "button", 11);
+            i0.ɵɵlistener("click", function TelephonyOperationsDashboardComponent_Template_button_click_21_listener() { return ctx.SetChannelFilter("Phone"); });
+            i0.ɵɵelement(22, "i", 12);
+            i0.ɵɵtext(23, " Phone ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(24, "button", 11);
+            i0.ɵɵlistener("click", function TelephonyOperationsDashboardComponent_Template_button_click_24_listener() { return ctx.SetChannelFilter("Web"); });
+            i0.ɵɵelement(25, "i", 13);
+            i0.ɵɵtext(26, " Web ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(27, "button", 11);
+            i0.ɵɵlistener("click", function TelephonyOperationsDashboardComponent_Template_button_click_27_listener() { return ctx.SetChannelFilter("Meeting"); });
+            i0.ɵɵelement(28, "i", 14);
+            i0.ɵɵtext(29, " Meeting ");
+            i0.ɵɵelementEnd()()()()();
+            i0.ɵɵelementStart(30, "mj-page-body");
+            i0.ɵɵconditionalCreate(31, TelephonyOperationsDashboardComponent_Conditional_31_Template, 4, 1, "div", 15);
+            i0.ɵɵelementStart(32, "div", 16)(33, "div", 17)(34, "div", 18);
+            i0.ɵɵelement(35, "i", 19);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(36, "div", 20)(37, "span", 21);
+            i0.ɵɵtext(38, "Total Volume");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(39, "span", 22);
+            i0.ɵɵtext(40);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(41, "span", 23);
+            i0.ɵɵtext(42, "in selected window");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(43, "div", 17)(44, "div", 24);
+            i0.ɵɵelement(45, "span", 25)(46, "i", 26);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(47, "div", 20)(48, "span", 21);
+            i0.ɵɵtext(49, "Live Now");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(50, "span", 22);
+            i0.ɵɵtext(51);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(52, "span", 23);
+            i0.ɵɵtext(53, "active sessions");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(54, "div", 17)(55, "div", 24);
+            i0.ɵɵelement(56, "i", 27);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(57, "div", 20)(58, "span", 21);
+            i0.ɵɵtext(59, "Answer Rate");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(60, "span", 22);
+            i0.ɵɵtext(61);
+            i0.ɵɵpipe(62, "number");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(63, "span", 23);
+            i0.ɵɵtext(64);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(65, "div", 17)(66, "div", 28);
+            i0.ɵɵelement(67, "i", 29);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(68, "div", 20)(69, "span", 21);
+            i0.ɵɵtext(70, "Abandonment Rate");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(71, "span", 22);
+            i0.ɵɵtext(72);
+            i0.ɵɵpipe(73, "number");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(74, "span", 23);
+            i0.ɵɵtext(75);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(76, "div", 17)(77, "div", 30);
+            i0.ɵɵelement(78, "i", 31);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(79, "div", 20)(80, "span", 21);
+            i0.ɵɵtext(81, "Avg Handle Time");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(82, "span", 22);
+            i0.ɵɵtext(83);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(84, "span", 23);
+            i0.ɵɵtext(85);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(86, "div", 17)(87, "div", 32);
+            i0.ɵɵelement(88, "i", 33);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(89, "div", 20)(90, "span", 21);
+            i0.ɵɵtext(91, "Transfers & Esc.");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(92, "span", 22);
+            i0.ɵɵtext(93);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(94, "span", 23);
+            i0.ɵɵtext(95, "transfers / escalations");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(96, "div", 17)(97, "div", 34);
+            i0.ɵɵelement(98, "i", 35);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(99, "div", 20)(100, "span", 21);
+            i0.ɵɵtext(101, "Total Cost Est.");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(102, "span", 22);
+            i0.ɵɵtext(103);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(104, "span", 23);
+            i0.ɵɵtext(105, "usage & carrier minutes");
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(106, "div", 36)(107, "div", 37)(108, "div", 38);
+            i0.ɵɵelement(109, "span", 39);
+            i0.ɵɵelementStart(110, "h2");
+            i0.ɵɵtext(111, "Active Live Sessions");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(112, "span", 40);
+            i0.ɵɵtext(113);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵconditionalCreate(114, TelephonyOperationsDashboardComponent_Conditional_114_Template, 4, 0, "div", 41)(115, TelephonyOperationsDashboardComponent_Conditional_115_Template, 19, 0, "div", 42);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(116, "div", 43)(117, "div", 44)(118, "div", 45)(119, "h3");
+            i0.ɵɵelement(120, "i", 46);
+            i0.ɵɵtext(121, " Volume Distribution");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(122, "div", 47)(123, "div", 48)(124, "h4");
+            i0.ɵɵtext(125, "By Channel");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(126, "div", 49);
+            i0.ɵɵrepeaterCreate(127, TelephonyOperationsDashboardComponent_For_128_Template, 8, 8, "div", 50, _forTrack0);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(129, "div", 48)(130, "h4");
+            i0.ɵɵtext(131, "By Direction");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(132, "div", 49);
+            i0.ɵɵrepeaterCreate(133, TelephonyOperationsDashboardComponent_For_134_Template, 8, 8, "div", 50, _forTrack1);
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(135, "div", 44)(136, "div", 45)(137, "h3");
+            i0.ɵɵelement(138, "i", 51);
+            i0.ɵɵtext(139, " Cost by Phone Number");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(140, "div", 47);
+            i0.ɵɵconditionalCreate(141, TelephonyOperationsDashboardComponent_Conditional_141_Template, 3, 0, "div", 41)(142, TelephonyOperationsDashboardComponent_Conditional_142_Template, 13, 0, "div", 52);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(143, "div", 53)(144, "div", 37)(145, "div", 38);
+            i0.ɵɵelement(146, "i", 54);
+            i0.ɵɵelementStart(147, "h2");
+            i0.ɵɵtext(148, "Recent Interactions");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(149, "span", 40);
+            i0.ɵɵtext(150);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵconditionalCreate(151, TelephonyOperationsDashboardComponent_Conditional_151_Template, 3, 0, "div", 41)(152, TelephonyOperationsDashboardComponent_Conditional_152_Template, 23, 0, "div", 55);
+            i0.ɵɵelementEnd()()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("Count", ctx.Metrics.LiveCallsCount)("Total", ctx.Metrics.TotalVolume)("Variant", ctx.Metrics.LiveCallsCount > 0 ? "success" : "default");
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("Loading", ctx.IsLoading);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("Value", ctx.SearchQuery);
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("active", ctx.SelectedTimeRange === "24h");
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("active", ctx.SelectedTimeRange === "7d");
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("active", ctx.SelectedTimeRange === "30d");
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("active", ctx.SelectedTimeRange === "all");
+            i0.ɵɵadvance(3);
+            i0.ɵɵclassProp("active", ctx.SelectedChannelFilter === "all");
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("active", ctx.SelectedChannelFilter === "Phone");
+            i0.ɵɵadvance(3);
+            i0.ɵɵclassProp("active", ctx.SelectedChannelFilter === "Web");
+            i0.ɵɵadvance(3);
+            i0.ɵɵclassProp("active", ctx.SelectedChannelFilter === "Meeting");
+            i0.ɵɵadvance(4);
+            i0.ɵɵconditional(ctx.ErrorMessage ? 31 : -1);
+            i0.ɵɵadvance(9);
+            i0.ɵɵtextInterpolate(ctx.Metrics.TotalVolume);
+            i0.ɵɵadvance(3);
+            i0.ɵɵclassProp("live-active", ctx.Metrics.LiveCallsCount > 0);
+            i0.ɵɵadvance(8);
+            i0.ɵɵtextInterpolate(ctx.Metrics.LiveCallsCount);
+            i0.ɵɵadvance(10);
+            i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind2(62, 40, ctx.Metrics.AnswerRate, "1.0-1"), "%");
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate1("", ctx.Metrics.AnsweredCount, " answered");
+            i0.ɵɵadvance(8);
+            i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind2(73, 43, ctx.Metrics.AbandonmentRate, "1.0-1"), "%");
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate1("", ctx.Metrics.AbandonedCount, " caller abandons");
+            i0.ɵɵadvance(8);
+            i0.ɵɵtextInterpolate(ctx.Metrics.AverageHandleTimeFormatted);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1("ASA: ", ctx.Metrics.AverageSpeedToAnswerFormatted);
+            i0.ɵɵadvance(8);
+            i0.ɵɵtextInterpolate2("", ctx.Metrics.TransferCount, " / ", ctx.Metrics.EscalationCount);
+            i0.ɵɵadvance(10);
+            i0.ɵɵtextInterpolate(ctx.Metrics.TotalCostFormatted);
+            i0.ɵɵadvance(10);
+            i0.ɵɵtextInterpolate(ctx.FilteredLiveInteractions.length);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.FilteredLiveInteractions.length === 0 ? 114 : 115);
+            i0.ɵɵadvance(13);
+            i0.ɵɵrepeater(ctx.Metrics.VolumeByChannel);
+            i0.ɵɵadvance(6);
+            i0.ɵɵrepeater(ctx.Metrics.VolumeByDirection);
+            i0.ɵɵadvance(8);
+            i0.ɵɵconditional(ctx.Metrics.CostByNumber.length === 0 ? 141 : 142);
+            i0.ɵɵadvance(9);
+            i0.ɵɵtextInterpolate(ctx.FilteredRecentInteractions.length);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.FilteredRecentInteractions.length === 0 ? 151 : 152);
+        } }, dependencies: [i1.MJPageHeaderComponent, i1.MJPageLayoutComponent, i1.MJPageBodyComponent, i1.MJPageSearchComponent, i1.MJStatBadgeComponent, i1.MJRefreshButtonComponent, i2.DecimalPipe], styles: ["[_nghost-%COMP%] {\n  display: block;\n  height: 100%;\n}\n\n.toolbar-controls[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-wrap: wrap;\n}\n\n.time-range-pills[_ngcontent-%COMP%], \n.channel-filter-pills[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  background-color: var(--mj-bg-subtle);\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: 6px;\n  padding: 2px;\n  gap: 2px;\n}\n\n.range-pill[_ngcontent-%COMP%], \n.channel-pill[_ngcontent-%COMP%] {\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  font-size: 12px;\n  font-weight: 500;\n  padding: 4px 10px;\n  border-radius: 4px;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  transition: all 0.15s ease-in-out;\n}\n\n.range-pill[_ngcontent-%COMP%]:hover, \n.channel-pill[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n  background-color: var(--mj-bg-surface);\n}\n\n.range-pill.active[_ngcontent-%COMP%], \n.channel-pill.active[_ngcontent-%COMP%] {\n  background-color: var(--mj-bg-surface);\n  color: var(--mj-color-primary);\n  font-weight: 600;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\n}\n\n.error-banner[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 12px 16px;\n  border-radius: 8px;\n  margin-bottom: 20px;\n  background-color: var(--mj-color-danger-subtle);\n  border: 1px solid var(--mj-color-danger);\n  color: var(--mj-color-danger);\n  font-size: 14px;\n}\n\n\n.kpi-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  gap: 16px;\n  margin-bottom: 24px;\n}\n\n.kpi-card[_ngcontent-%COMP%] {\n  background-color: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: 8px;\n  padding: 16px;\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);\n}\n\n.kpi-card.live-active[_ngcontent-%COMP%] {\n  border-color: var(--mj-color-success);\n}\n\n.kpi-icon-wrap[_ngcontent-%COMP%] {\n  width: 44px;\n  height: 44px;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 18px;\n  position: relative;\n  flex-shrink: 0;\n}\n\n.kpi-icon-wrap.primary[_ngcontent-%COMP%] {\n  background-color: var(--mj-color-primary-subtle);\n  color: var(--mj-color-primary);\n}\n\n.kpi-icon-wrap.success[_ngcontent-%COMP%] {\n  background-color: var(--mj-color-success-subtle);\n  color: var(--mj-color-success);\n}\n\n.kpi-icon-wrap.warning[_ngcontent-%COMP%] {\n  background-color: var(--mj-color-warning-subtle);\n  color: var(--mj-color-warning);\n}\n\n.kpi-icon-wrap.info[_ngcontent-%COMP%] {\n  background-color: var(--mj-bg-subtle);\n  color: var(--mj-text-secondary);\n}\n\n.kpi-icon-wrap.accent[_ngcontent-%COMP%] {\n  background-color: var(--mj-color-primary-subtle);\n  color: var(--mj-color-primary);\n}\n\n.kpi-icon-wrap.cost[_ngcontent-%COMP%] {\n  background-color: var(--mj-color-success-subtle);\n  color: var(--mj-color-success);\n}\n\n.live-dot-ping[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 6px;\n  right: 6px;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background-color: var(--mj-color-success);\n  animation: _ngcontent-%COMP%_pulse-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;\n}\n\n@keyframes _ngcontent-%COMP%_pulse-ping {\n  0% {\n    transform: scale(0.95);\n    opacity: 1;\n  }\n  50% {\n    transform: scale(1.4);\n    opacity: 0.5;\n  }\n  100% {\n    transform: scale(0.95);\n    opacity: 1;\n  }\n}\n\n.kpi-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.kpi-label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.kpi-value[_ngcontent-%COMP%] {\n  font-size: 22px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  line-height: 1.2;\n  margin: 2px 0;\n}\n\n.kpi-subtext[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n\n.dashboard-section[_ngcontent-%COMP%] {\n  background-color: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: 8px;\n  padding: 20px;\n  margin-bottom: 24px;\n}\n\n.section-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 16px;\n}\n\n.section-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.section-title[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0;\n}\n\n.count-pill[_ngcontent-%COMP%] {\n  background-color: var(--mj-bg-subtle);\n  color: var(--mj-text-secondary);\n  font-size: 11px;\n  font-weight: 600;\n  padding: 2px 8px;\n  border-radius: 12px;\n}\n\n.live-pulse-badge[_ngcontent-%COMP%] {\n  display: inline-block;\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background-color: var(--mj-color-success);\n}\n\n.empty-feed[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 32px 16px;\n  color: var(--mj-text-muted);\n  text-align: center;\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n  font-size: 28px;\n  margin-bottom: 8px;\n}\n\n\n.two-col-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 24px;\n  margin-bottom: 24px;\n}\n\n@media (max-width: 900px) {\n  .two-col-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n}\n\n.dashboard-card[_ngcontent-%COMP%] {\n  background-color: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: 8px;\n  padding: 20px;\n}\n\n.card-header[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n}\n\n.card-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n\n.distribution-group[_ngcontent-%COMP%] {\n  margin-bottom: 18px;\n}\n\n.distribution-group[_ngcontent-%COMP%]:last-child {\n  margin-bottom: 0;\n}\n\n.distribution-group[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  margin: 0 0 10px 0;\n}\n\n.bars-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.bar-row[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.bar-info[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  font-size: 13px;\n}\n\n.bar-label[_ngcontent-%COMP%] {\n  font-weight: 500;\n  color: var(--mj-text-primary);\n}\n\n.bar-stats[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-size: 12px;\n}\n\n.bar-track[_ngcontent-%COMP%] {\n  height: 8px;\n  background-color: var(--mj-bg-subtle);\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.bar-fill[_ngcontent-%COMP%] {\n  height: 100%;\n  border-radius: 4px;\n  transition: width 0.3s ease;\n}\n\n.bar-fill.channel-phone[_ngcontent-%COMP%] {\n  background-color: var(--mj-color-primary);\n}\n\n.bar-fill.channel-web[_ngcontent-%COMP%] {\n  background-color: var(--mj-color-success);\n}\n\n.bar-fill.channel-meeting[_ngcontent-%COMP%] {\n  background-color: var(--mj-color-warning);\n}\n\n.bar-fill.direction-inbound[_ngcontent-%COMP%] {\n  background-color: var(--mj-color-primary);\n}\n\n.bar-fill.direction-outbound[_ngcontent-%COMP%] {\n  background-color: var(--mj-color-success);\n}\n\n.bar-fill.direction-internal[_ngcontent-%COMP%] {\n  background-color: var(--mj-color-warning);\n}\n\n\n.table-container[_ngcontent-%COMP%], \n.live-table-container[_ngcontent-%COMP%], \n.cost-table-container[_ngcontent-%COMP%] {\n  overflow-x: auto;\n}\n\n.ops-table[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 13px;\n  text-align: left;\n}\n\n.ops-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  padding: 10px 12px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  border-bottom: 1px solid var(--mj-border-subtle);\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.ops-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 10px 12px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  color: var(--mj-text-primary);\n  vertical-align: middle;\n}\n\n.ops-table.compact[_ngcontent-%COMP%]   td[_ngcontent-%COMP%], \n.ops-table.compact[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  padding: 8px 10px;\n}\n\n.ops-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n  background-color: var(--mj-bg-subtle);\n}\n\n.address-col[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.address-icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n\n.badge[_ngcontent-%COMP%] {\n  display: inline-block;\n  padding: 2px 8px;\n  border-radius: 4px;\n  font-size: 11px;\n  font-weight: 500;\n}\n\n.channel-badge.phone[_ngcontent-%COMP%] {\n  background-color: var(--mj-color-primary-subtle);\n  color: var(--mj-color-primary);\n}\n\n.channel-badge.web[_ngcontent-%COMP%] {\n  background-color: var(--mj-color-success-subtle);\n  color: var(--mj-color-success);\n}\n\n.channel-badge.meeting[_ngcontent-%COMP%] {\n  background-color: var(--mj-color-warning-subtle);\n  color: var(--mj-color-warning);\n}\n\n.direction-badge[_ngcontent-%COMP%] {\n  background-color: var(--mj-bg-subtle);\n  color: var(--mj-text-secondary);\n}\n\n.status-indicator[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n}\n\n.status-indicator[_ngcontent-%COMP%]   .dot[_ngcontent-%COMP%] {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n}\n\n.status-indicator.active[_ngcontent-%COMP%]   .dot[_ngcontent-%COMP%] {\n  background-color: var(--mj-color-success);\n}\n\n.status-indicator.queued[_ngcontent-%COMP%]   .dot[_ngcontent-%COMP%] {\n  background-color: var(--mj-color-warning);\n}\n\n.status-indicator.ended[_ngcontent-%COMP%]   .dot[_ngcontent-%COMP%] {\n  background-color: var(--mj-text-muted);\n}\n\n.status-indicator.abandoned[_ngcontent-%COMP%]   .dot[_ngcontent-%COMP%] {\n  background-color: var(--mj-color-danger);\n}\n\n.status-indicator.failed[_ngcontent-%COMP%]   .dot[_ngcontent-%COMP%] {\n  background-color: var(--mj-color-danger);\n}\n\n.elapsed-badge[_ngcontent-%COMP%] {\n  display: inline-block;\n  background-color: var(--mj-color-success-subtle);\n  color: var(--mj-color-success);\n  font-weight: 600;\n  font-size: 12px;\n  padding: 2px 6px;\n  border-radius: 4px;\n}\n\n.datetime-cell[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n}\n\n.datetime-cell[_ngcontent-%COMP%]   .date[_ngcontent-%COMP%] {\n  font-weight: 500;\n}\n\n.datetime-cell[_ngcontent-%COMP%]   .time[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.end-reason-cell[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.text-right[_ngcontent-%COMP%] {\n  text-align: right;\n}\n\n.font-medium[_ngcontent-%COMP%] {\n  font-weight: 500;\n}\n\n.font-semibold[_ngcontent-%COMP%] {\n  font-weight: 600;\n}"] });
+};
+TelephonyOperationsDashboardComponent = __decorate([
+    RegisterClass(BaseResourceComponent, 'TelephonyOperationsDashboard'),
+    RegisterClass(BaseResourceComponent, 'InteractionOperationsDashboard')
+], TelephonyOperationsDashboardComponent);
+export { TelephonyOperationsDashboardComponent };
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TelephonyOperationsDashboardComponent, [{
+        type: Component,
+        args: [{ standalone: false, selector: 'mj-telephony-operations-dashboard', template: "<mj-page-layout>\n  <mj-page-header\n    Title=\"Telephony & Interaction Operations\"\n    Subtitle=\"Real-time metrics, volume breakdown, answer rates, and cost analysis across channels\"\n    Icon=\"fa-solid fa-chart-line\"\n  >\n    <div meta>\n      <mj-stat-badge\n        [Count]=\"Metrics.LiveCallsCount\"\n        [Total]=\"Metrics.TotalVolume\"\n        Label=\"live now\"\n        [Variant]=\"Metrics.LiveCallsCount > 0 ? 'success' : 'default'\"\n      />\n    </div>\n\n    <div actions>\n      <mj-refresh-button [Loading]=\"IsLoading\" (Clicked)=\"LoadData()\" />\n    </div>\n\n    <div toolbar>\n      <div class=\"toolbar-controls\">\n        <mj-page-search [Value]=\"SearchQuery\" (ValueChange)=\"OnSearchQueryChange($event)\" />\n\n        <div class=\"time-range-pills\" role=\"radiogroup\" aria-label=\"Time Range\">\n          <button\n            type=\"button\"\n            class=\"range-pill\"\n            [class.active]=\"SelectedTimeRange === '24h'\"\n            (click)=\"SetTimeRange('24h')\"\n          >\n            24h\n          </button>\n          <button\n            type=\"button\"\n            class=\"range-pill\"\n            [class.active]=\"SelectedTimeRange === '7d'\"\n            (click)=\"SetTimeRange('7d')\"\n          >\n            7d\n          </button>\n          <button\n            type=\"button\"\n            class=\"range-pill\"\n            [class.active]=\"SelectedTimeRange === '30d'\"\n            (click)=\"SetTimeRange('30d')\"\n          >\n            30d\n          </button>\n          <button\n            type=\"button\"\n            class=\"range-pill\"\n            [class.active]=\"SelectedTimeRange === 'all'\"\n            (click)=\"SetTimeRange('all')\"\n          >\n            All Time\n          </button>\n        </div>\n\n        <div class=\"channel-filter-pills\" role=\"radiogroup\" aria-label=\"Channel Filter\">\n          <button\n            type=\"button\"\n            class=\"channel-pill\"\n            [class.active]=\"SelectedChannelFilter === 'all'\"\n            (click)=\"SetChannelFilter('all')\"\n          >\n            All Channels\n          </button>\n          <button\n            type=\"button\"\n            class=\"channel-pill\"\n            [class.active]=\"SelectedChannelFilter === 'Phone'\"\n            (click)=\"SetChannelFilter('Phone')\"\n          >\n            <i class=\"fa-solid fa-phone\"></i> Phone\n          </button>\n          <button\n            type=\"button\"\n            class=\"channel-pill\"\n            [class.active]=\"SelectedChannelFilter === 'Web'\"\n            (click)=\"SetChannelFilter('Web')\"\n          >\n            <i class=\"fa-solid fa-globe\"></i> Web\n          </button>\n          <button\n            type=\"button\"\n            class=\"channel-pill\"\n            [class.active]=\"SelectedChannelFilter === 'Meeting'\"\n            (click)=\"SetChannelFilter('Meeting')\"\n          >\n            <i class=\"fa-solid fa-users\"></i> Meeting\n          </button>\n        </div>\n      </div>\n    </div>\n  </mj-page-header>\n\n  <mj-page-body>\n    @if (ErrorMessage) {\n      <div class=\"error-banner\" role=\"alert\">\n        <i class=\"fa-solid fa-triangle-exclamation\"></i>\n        <span>{{ ErrorMessage }}</span>\n      </div>\n    }\n\n    <!-- KPI Metric Cards Grid -->\n    <div class=\"kpi-grid\">\n      <div class=\"kpi-card\">\n        <div class=\"kpi-icon-wrap primary\">\n          <i class=\"fa-solid fa-headset\"></i>\n        </div>\n        <div class=\"kpi-content\">\n          <span class=\"kpi-label\">Total Volume</span>\n          <span class=\"kpi-value\">{{ Metrics.TotalVolume }}</span>\n          <span class=\"kpi-subtext\">in selected window</span>\n        </div>\n      </div>\n\n      <div class=\"kpi-card\" [class.live-active]=\"Metrics.LiveCallsCount > 0\">\n        <div class=\"kpi-icon-wrap success\">\n          <span class=\"live-dot-ping\"></span>\n          <i class=\"fa-solid fa-phone-volume\"></i>\n        </div>\n        <div class=\"kpi-content\">\n          <span class=\"kpi-label\">Live Now</span>\n          <span class=\"kpi-value\">{{ Metrics.LiveCallsCount }}</span>\n          <span class=\"kpi-subtext\">active sessions</span>\n        </div>\n      </div>\n\n      <div class=\"kpi-card\">\n        <div class=\"kpi-icon-wrap success\">\n          <i class=\"fa-solid fa-circle-check\"></i>\n        </div>\n        <div class=\"kpi-content\">\n          <span class=\"kpi-label\">Answer Rate</span>\n          <span class=\"kpi-value\">{{ Metrics.AnswerRate | number:'1.0-1' }}%</span>\n          <span class=\"kpi-subtext\">{{ Metrics.AnsweredCount }} answered</span>\n        </div>\n      </div>\n\n      <div class=\"kpi-card\">\n        <div class=\"kpi-icon-wrap warning\">\n          <i class=\"fa-solid fa-phone-slash\"></i>\n        </div>\n        <div class=\"kpi-content\">\n          <span class=\"kpi-label\">Abandonment Rate</span>\n          <span class=\"kpi-value\">{{ Metrics.AbandonmentRate | number:'1.0-1' }}%</span>\n          <span class=\"kpi-subtext\">{{ Metrics.AbandonedCount }} caller abandons</span>\n        </div>\n      </div>\n\n      <div class=\"kpi-card\">\n        <div class=\"kpi-icon-wrap info\">\n          <i class=\"fa-solid fa-clock\"></i>\n        </div>\n        <div class=\"kpi-content\">\n          <span class=\"kpi-label\">Avg Handle Time</span>\n          <span class=\"kpi-value\">{{ Metrics.AverageHandleTimeFormatted }}</span>\n          <span class=\"kpi-subtext\">ASA: {{ Metrics.AverageSpeedToAnswerFormatted }}</span>\n        </div>\n      </div>\n\n      <div class=\"kpi-card\">\n        <div class=\"kpi-icon-wrap accent\">\n          <i class=\"fa-solid fa-arrows-split-up-and-left\"></i>\n        </div>\n        <div class=\"kpi-content\">\n          <span class=\"kpi-label\">Transfers & Esc.</span>\n          <span class=\"kpi-value\">{{ Metrics.TransferCount }} / {{ Metrics.EscalationCount }}</span>\n          <span class=\"kpi-subtext\">transfers / escalations</span>\n        </div>\n      </div>\n\n      <div class=\"kpi-card\">\n        <div class=\"kpi-icon-wrap cost\">\n          <i class=\"fa-solid fa-dollar-sign\"></i>\n        </div>\n        <div class=\"kpi-content\">\n          <span class=\"kpi-label\">Total Cost Est.</span>\n          <span class=\"kpi-value\">{{ Metrics.TotalCostFormatted }}</span>\n          <span class=\"kpi-subtext\">usage & carrier minutes</span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Active Live Calls Section -->\n    <div class=\"dashboard-section live-section\">\n      <div class=\"section-header\">\n        <div class=\"section-title\">\n          <span class=\"live-pulse-badge\"></span>\n          <h2>Active Live Sessions</h2>\n          <span class=\"count-pill\">{{ FilteredLiveInteractions.length }}</span>\n        </div>\n      </div>\n\n      @if (FilteredLiveInteractions.length === 0) {\n        <div class=\"empty-feed\">\n          <i class=\"fa-solid fa-phone-slash empty-icon\"></i>\n          <p>No active live interactions at this moment.</p>\n        </div>\n      } @else {\n        <div class=\"live-table-container\">\n          <table class=\"ops-table\">\n            <thead>\n              <tr>\n                <th>Remote Address</th>\n                <th>Channel</th>\n                <th>Direction</th>\n                <th>Status</th>\n                <th>Started</th>\n                <th>Elapsed</th>\n              </tr>\n            </thead>\n            <tbody>\n              @for (live of FilteredLiveInteractions; track live.ID) {\n                <tr class=\"live-row\">\n                  <td class=\"address-col\">\n                    <i class=\"fa-solid fa-user-circle address-icon\"></i>\n                    <span class=\"address-text\">{{ live.RemoteAddress || 'Unknown' }}</span>\n                  </td>\n                  <td>\n                    <span class=\"badge channel-badge {{ live.Channel.toLowerCase() }}\">\n                      {{ live.Channel }}\n                    </span>\n                  </td>\n                  <td>\n                    <span class=\"badge direction-badge {{ live.Direction.toLowerCase() }}\">\n                      {{ live.Direction }}\n                    </span>\n                  </td>\n                  <td>\n                    <span class=\"status-indicator active\">\n                      <span class=\"dot\"></span>\n                      {{ live.Status }}\n                    </span>\n                  </td>\n                  <td>{{ FormatTime(live.StartedAt) }}</td>\n                  <td class=\"elapsed-col\">\n                    <span class=\"elapsed-badge\">{{ live.ElapsedLabel }}</span>\n                  </td>\n                </tr>\n              }\n            </tbody>\n          </table>\n        </div>\n      }\n    </div>\n\n    <!-- Middle Row: Volume Breakdown Cards -->\n    <div class=\"two-col-grid\">\n      <!-- Volume by Channel & Direction -->\n      <div class=\"dashboard-card\">\n        <div class=\"card-header\">\n          <h3><i class=\"fa-solid fa-layer-group\"></i> Volume Distribution</h3>\n        </div>\n        <div class=\"card-body\">\n          <div class=\"distribution-group\">\n            <h4>By Channel</h4>\n            <div class=\"bars-container\">\n              @for (item of Metrics.VolumeByChannel; track item.Channel) {\n                <div class=\"bar-row\">\n                  <div class=\"bar-info\">\n                    <span class=\"bar-label\">{{ item.Channel }}</span>\n                    <span class=\"bar-stats\">{{ item.Count }} ({{ item.Percentage }}%)</span>\n                  </div>\n                  <div class=\"bar-track\">\n                    <div class=\"bar-fill channel-{{ item.Channel.toLowerCase() }}\" [style.width.%]=\"item.Percentage\"></div>\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n\n          <div class=\"distribution-group\">\n            <h4>By Direction</h4>\n            <div class=\"bars-container\">\n              @for (item of Metrics.VolumeByDirection; track item.Direction) {\n                <div class=\"bar-row\">\n                  <div class=\"bar-info\">\n                    <span class=\"bar-label\">{{ item.Direction }}</span>\n                    <span class=\"bar-stats\">{{ item.Count }} ({{ item.Percentage }}%)</span>\n                  </div>\n                  <div class=\"bar-track\">\n                    <div class=\"bar-fill direction-{{ item.Direction.toLowerCase() }}\" [style.width.%]=\"item.Percentage\"></div>\n                  </div>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Cost by Number -->\n      <div class=\"dashboard-card\">\n        <div class=\"card-header\">\n          <h3><i class=\"fa-solid fa-money-bill-wave\"></i> Cost by Phone Number</h3>\n        </div>\n        <div class=\"card-body\">\n          @if (Metrics.CostByNumber.length === 0) {\n            <div class=\"empty-feed\">\n              <p>No phone number cost records in this window.</p>\n            </div>\n          } @else {\n            <div class=\"cost-table-container\">\n              <table class=\"ops-table compact\">\n                <thead>\n                  <tr>\n                    <th>Phone Number / Target</th>\n                    <th>Calls</th>\n                    <th class=\"text-right\">Est. Cost</th>\n                  </tr>\n                </thead>\n                <tbody>\n                  @for (num of Metrics.CostByNumber; track num.PhoneNumber) {\n                    <tr>\n                      <td class=\"font-medium\">{{ num.PhoneNumber }}</td>\n                      <td>{{ num.Count }}</td>\n                      <td class=\"text-right font-semibold\">{{ FormatCost(num.Cost) }}</td>\n                    </tr>\n                  }\n                </tbody>\n              </table>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n\n    <!-- Bottom Row: Recent Interactions Audit Table -->\n    <div class=\"dashboard-section\">\n      <div class=\"section-header\">\n        <div class=\"section-title\">\n          <i class=\"fa-solid fa-list-check\"></i>\n          <h2>Recent Interactions</h2>\n          <span class=\"count-pill\">{{ FilteredRecentInteractions.length }}</span>\n        </div>\n      </div>\n\n      @if (FilteredRecentInteractions.length === 0) {\n        <div class=\"empty-feed\">\n          <p>No interactions found matching criteria.</p>\n        </div>\n      } @else {\n        <div class=\"table-container\">\n          <table class=\"ops-table\">\n            <thead>\n              <tr>\n                <th>Date / Time</th>\n                <th>Remote Party</th>\n                <th>Channel</th>\n                <th>Direction</th>\n                <th>Status</th>\n                <th>Duration</th>\n                <th>End Reason</th>\n                <th class=\"text-right\">Est. Cost</th>\n              </tr>\n            </thead>\n            <tbody>\n              @for (row of FilteredRecentInteractions; track row.ID) {\n                <tr>\n                  <td>\n                    <div class=\"datetime-cell\">\n                      <span class=\"date\">{{ FormatDate(row.StartedAt) }}</span>\n                      <span class=\"time\">{{ FormatTime(row.StartedAt) }}</span>\n                    </div>\n                  </td>\n                  <td class=\"address-col\">\n                    <span>{{ row.RemoteAddress || 'Unknown' }}</span>\n                  </td>\n                  <td>\n                    <span class=\"badge channel-badge {{ row.Channel.toLowerCase() }}\">\n                      {{ row.Channel }}\n                    </span>\n                  </td>\n                  <td>\n                    <span class=\"badge direction-badge {{ row.Direction.toLowerCase() }}\">\n                      {{ row.Direction }}\n                    </span>\n                  </td>\n                  <td>\n                    <span class=\"status-indicator {{ row.Status.toLowerCase() }}\">\n                      <span class=\"dot\"></span>\n                      {{ row.Status }}\n                    </span>\n                  </td>\n                  <td>{{ ComputeDuration(row.StartedAt, row.EndedAt) }}</td>\n                  <td class=\"end-reason-cell\">{{ row.EndReason || '-' }}</td>\n                  <td class=\"text-right\">{{ FormatCost(row.CostEstimate) }}</td>\n                </tr>\n              }\n            </tbody>\n          </table>\n        </div>\n      }\n    </div>\n  </mj-page-body>\n</mj-page-layout>\n", styles: [":host {\n  display: block;\n  height: 100%;\n}\n\n.toolbar-controls {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-wrap: wrap;\n}\n\n.time-range-pills,\n.channel-filter-pills {\n  display: inline-flex;\n  align-items: center;\n  background-color: var(--mj-bg-subtle);\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: 6px;\n  padding: 2px;\n  gap: 2px;\n}\n\n.range-pill,\n.channel-pill {\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  font-size: 12px;\n  font-weight: 500;\n  padding: 4px 10px;\n  border-radius: 4px;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  transition: all 0.15s ease-in-out;\n}\n\n.range-pill:hover,\n.channel-pill:hover {\n  color: var(--mj-text-primary);\n  background-color: var(--mj-bg-surface);\n}\n\n.range-pill.active,\n.channel-pill.active {\n  background-color: var(--mj-bg-surface);\n  color: var(--mj-color-primary);\n  font-weight: 600;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\n}\n\n.error-banner {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 12px 16px;\n  border-radius: 8px;\n  margin-bottom: 20px;\n  background-color: var(--mj-color-danger-subtle);\n  border: 1px solid var(--mj-color-danger);\n  color: var(--mj-color-danger);\n  font-size: 14px;\n}\n\n/* KPI Grid */\n.kpi-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  gap: 16px;\n  margin-bottom: 24px;\n}\n\n.kpi-card {\n  background-color: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: 8px;\n  padding: 16px;\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);\n}\n\n.kpi-card.live-active {\n  border-color: var(--mj-color-success);\n}\n\n.kpi-icon-wrap {\n  width: 44px;\n  height: 44px;\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 18px;\n  position: relative;\n  flex-shrink: 0;\n}\n\n.kpi-icon-wrap.primary {\n  background-color: var(--mj-color-primary-subtle);\n  color: var(--mj-color-primary);\n}\n\n.kpi-icon-wrap.success {\n  background-color: var(--mj-color-success-subtle);\n  color: var(--mj-color-success);\n}\n\n.kpi-icon-wrap.warning {\n  background-color: var(--mj-color-warning-subtle);\n  color: var(--mj-color-warning);\n}\n\n.kpi-icon-wrap.info {\n  background-color: var(--mj-bg-subtle);\n  color: var(--mj-text-secondary);\n}\n\n.kpi-icon-wrap.accent {\n  background-color: var(--mj-color-primary-subtle);\n  color: var(--mj-color-primary);\n}\n\n.kpi-icon-wrap.cost {\n  background-color: var(--mj-color-success-subtle);\n  color: var(--mj-color-success);\n}\n\n.live-dot-ping {\n  position: absolute;\n  top: 6px;\n  right: 6px;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background-color: var(--mj-color-success);\n  animation: pulse-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;\n}\n\n@keyframes pulse-ping {\n  0% {\n    transform: scale(0.95);\n    opacity: 1;\n  }\n  50% {\n    transform: scale(1.4);\n    opacity: 0.5;\n  }\n  100% {\n    transform: scale(0.95);\n    opacity: 1;\n  }\n}\n\n.kpi-content {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.kpi-label {\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.kpi-value {\n  font-size: 22px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  line-height: 1.2;\n  margin: 2px 0;\n}\n\n.kpi-subtext {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Sections */\n.dashboard-section {\n  background-color: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: 8px;\n  padding: 20px;\n  margin-bottom: 24px;\n}\n\n.section-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 16px;\n}\n\n.section-title {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.section-title h2 {\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0;\n}\n\n.count-pill {\n  background-color: var(--mj-bg-subtle);\n  color: var(--mj-text-secondary);\n  font-size: 11px;\n  font-weight: 600;\n  padding: 2px 8px;\n  border-radius: 12px;\n}\n\n.live-pulse-badge {\n  display: inline-block;\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background-color: var(--mj-color-success);\n}\n\n.empty-feed {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 32px 16px;\n  color: var(--mj-text-muted);\n  text-align: center;\n}\n\n.empty-icon {\n  font-size: 28px;\n  margin-bottom: 8px;\n}\n\n/* Two-column grid */\n.two-col-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 24px;\n  margin-bottom: 24px;\n}\n\n@media (max-width: 900px) {\n  .two-col-grid {\n    grid-template-columns: 1fr;\n  }\n}\n\n.dashboard-card {\n  background-color: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: 8px;\n  padding: 20px;\n}\n\n.card-header {\n  margin-bottom: 16px;\n}\n\n.card-header h3 {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n/* Distribution Bars */\n.distribution-group {\n  margin-bottom: 18px;\n}\n\n.distribution-group:last-child {\n  margin-bottom: 0;\n}\n\n.distribution-group h4 {\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  margin: 0 0 10px 0;\n}\n\n.bars-container {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.bar-row {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.bar-info {\n  display: flex;\n  justify-content: space-between;\n  font-size: 13px;\n}\n\n.bar-label {\n  font-weight: 500;\n  color: var(--mj-text-primary);\n}\n\n.bar-stats {\n  color: var(--mj-text-secondary);\n  font-size: 12px;\n}\n\n.bar-track {\n  height: 8px;\n  background-color: var(--mj-bg-subtle);\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.bar-fill {\n  height: 100%;\n  border-radius: 4px;\n  transition: width 0.3s ease;\n}\n\n.bar-fill.channel-phone {\n  background-color: var(--mj-color-primary);\n}\n\n.bar-fill.channel-web {\n  background-color: var(--mj-color-success);\n}\n\n.bar-fill.channel-meeting {\n  background-color: var(--mj-color-warning);\n}\n\n.bar-fill.direction-inbound {\n  background-color: var(--mj-color-primary);\n}\n\n.bar-fill.direction-outbound {\n  background-color: var(--mj-color-success);\n}\n\n.bar-fill.direction-internal {\n  background-color: var(--mj-color-warning);\n}\n\n/* Tables */\n.table-container,\n.live-table-container,\n.cost-table-container {\n  overflow-x: auto;\n}\n\n.ops-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 13px;\n  text-align: left;\n}\n\n.ops-table th {\n  padding: 10px 12px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  border-bottom: 1px solid var(--mj-border-subtle);\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.ops-table td {\n  padding: 10px 12px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  color: var(--mj-text-primary);\n  vertical-align: middle;\n}\n\n.ops-table.compact td,\n.ops-table.compact th {\n  padding: 8px 10px;\n}\n\n.ops-table tbody tr:hover {\n  background-color: var(--mj-bg-subtle);\n}\n\n.address-col {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.address-icon {\n  color: var(--mj-text-muted);\n}\n\n.badge {\n  display: inline-block;\n  padding: 2px 8px;\n  border-radius: 4px;\n  font-size: 11px;\n  font-weight: 500;\n}\n\n.channel-badge.phone {\n  background-color: var(--mj-color-primary-subtle);\n  color: var(--mj-color-primary);\n}\n\n.channel-badge.web {\n  background-color: var(--mj-color-success-subtle);\n  color: var(--mj-color-success);\n}\n\n.channel-badge.meeting {\n  background-color: var(--mj-color-warning-subtle);\n  color: var(--mj-color-warning);\n}\n\n.direction-badge {\n  background-color: var(--mj-bg-subtle);\n  color: var(--mj-text-secondary);\n}\n\n.status-indicator {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n}\n\n.status-indicator .dot {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n}\n\n.status-indicator.active .dot {\n  background-color: var(--mj-color-success);\n}\n\n.status-indicator.queued .dot {\n  background-color: var(--mj-color-warning);\n}\n\n.status-indicator.ended .dot {\n  background-color: var(--mj-text-muted);\n}\n\n.status-indicator.abandoned .dot {\n  background-color: var(--mj-color-danger);\n}\n\n.status-indicator.failed .dot {\n  background-color: var(--mj-color-danger);\n}\n\n.elapsed-badge {\n  display: inline-block;\n  background-color: var(--mj-color-success-subtle);\n  color: var(--mj-color-success);\n  font-weight: 600;\n  font-size: 12px;\n  padding: 2px 6px;\n  border-radius: 4px;\n}\n\n.datetime-cell {\n  display: flex;\n  flex-direction: column;\n}\n\n.datetime-cell .date {\n  font-weight: 500;\n}\n\n.datetime-cell .time {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.end-reason-cell {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.text-right {\n  text-align: right;\n}\n\n.font-medium {\n  font-weight: 500;\n}\n\n.font-semibold {\n  font-weight: 600;\n}\n"] }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TelephonyOperationsDashboardComponent, { className: "TelephonyOperationsDashboardComponent", filePath: "src/TelephonyOperations/telephony-operations-dashboard.component.ts", lineNumber: 45 }); })();
+//# sourceMappingURL=telephony-operations-dashboard.component.js.map