@memberjunction/ng-dashboards 3.4.0 → 4.0.0

package/dist/Communication/communication-monitor-resource.component.js

@@ -11,18 +11,18 @@ import { RunView } from '@memberjunction/core';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "../AI/components/charts/time-series-chart.component";
-function CommunicationMonitorResourceComponent_div_64_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 38)(1, "div", 39);
+function CommunicationMonitorResourceComponent_For_65_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 30)(1, "div", 38);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 40)(4, "span", 41);
+    i0.ɵɵelementStart(3, "div", 39)(4, "span", 40);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 42);
+    i0.ɵɵelementStart(6, "span", 41);
     i0.ɵɵtext(7);
     i0.ɵɵpipe(8, "date");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "span", 43);
+    i0.ɵɵelementStart(9, "span", 42);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -35,35 +35,35 @@ function CommunicationMonitorResourceComponent_div_64_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(log_r1.CommunicationProviderMessageType || "Message");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate2("", log_r1.CommunicationProvider, " \u2022 ", i0.ɵɵpipeBind2(8, 8, log_r1.MessageDate, "shortTime"), "");
+    i0.ɵɵtextInterpolate2("", log_r1.CommunicationProvider, " \u2022 ", i0.ɵɵpipeBind2(8, 8, log_r1.MessageDate, "shortTime"));
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", log_r1.Status == null ? null : log_r1.Status.toLowerCase());
+    i0.ɵɵproperty("ngClass", log_r1.Status.toLowerCase());
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", log_r1.Status, " ");
 } }
-function CommunicationMonitorResourceComponent_div_65_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 44);
-    i0.ɵɵelement(1, "i", 45);
+function CommunicationMonitorResourceComponent_Conditional_66_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 31);
+    i0.ɵɵelement(1, "i", 43);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No recent activity");
     i0.ɵɵelementEnd()();
 } }
-function CommunicationMonitorResourceComponent_div_74_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 46);
-    i0.ɵɵelement(1, "div", 47);
-    i0.ɵɵelementStart(2, "div", 48);
+function CommunicationMonitorResourceComponent_For_76_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 34);
+    i0.ɵɵelement(1, "div", 44);
+    i0.ɵɵelementStart(2, "div", 45);
     i0.ɵɵelement(3, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 49)(5, "div", 50);
+    i0.ɵɵelementStart(4, "div", 46)(5, "div", 47);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 51);
+    i0.ɵɵelementStart(7, "div", 48);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 52);
-    i0.ɵɵelement(10, "div", 53);
+    i0.ɵɵelementStart(9, "div", 49);
+    i0.ɵɵelement(10, "div", 50);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "span", 54);
+    i0.ɵɵelementStart(11, "span", 51);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -87,28 +87,28 @@ function CommunicationMonitorResourceComponent_div_74_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1("", provider_r3.SuccessRate, "%");
 } }
-function CommunicationMonitorResourceComponent_div_75_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 44);
-    i0.ɵɵelement(1, "i", 55);
+function CommunicationMonitorResourceComponent_Conditional_77_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 31);
+    i0.ɵɵelement(1, "i", 52);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No providers configured");
     i0.ɵɵelementEnd()();
 } }
-function CommunicationMonitorResourceComponent_div_83_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 56)(1, "div", 57);
+function CommunicationMonitorResourceComponent_For_86_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 37)(1, "div", 53);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 58)(4, "div", 59);
+    i0.ɵɵelementStart(3, "div", 54)(4, "div", 55);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 60);
+    i0.ɵɵelementStart(6, "div", 56);
     i0.ɵɵtext(7);
     i0.ɵɵpipe(8, "number");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 61);
-    i0.ɵɵelement(10, "div", 62);
+    i0.ɵɵelementStart(9, "div", 57);
+    i0.ɵɵelement(10, "div", 58);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "span", 63);
+    i0.ɵɵelementStart(11, "span", 59);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -126,19 +126,13 @@ function CommunicationMonitorResourceComponent_div_83_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("", channel_r4.Percentage, "%");
 } }
-function CommunicationMonitorResourceComponent_div_84_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 44);
+function CommunicationMonitorResourceComponent_Conditional_87_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 31);
     i0.ɵɵelement(1, "i", 35);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No channel data available");
     i0.ɵɵelementEnd()();
 } }
-/**
- * Tree-shaking prevention function
- */
-export function LoadCommunicationMonitorResource() {
-    // Force inclusion in production builds
-}
 let CommunicationMonitorResourceComponent = class CommunicationMonitorResourceComponent extends BaseResourceComponent {
     cdr;
     isLoading = false;
@@ -373,7 +367,7 @@ let CommunicationMonitorResourceComponent = class CommunicationMonitorResourceCo
         return 'fa-solid fa-chart-line';
     }
     static ɵfac = function CommunicationMonitorResourceComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CommunicationMonitorResourceComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CommunicationMonitorResourceComponent, selectors: [["mj-communication-monitor-resource"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 85, vars: 35, consts: [[1, "monitor-wrapper"], [1, "monitor-container"], [1, "kpi-strip"], [1, "kpi-card", "sent"], [1, "kpi-icon"], [1, "fa-solid", "fa-paper-plane"], [1, "kpi-body"], [1, "kpi-label"], [1, "kpi-value"], [1, "kpi-delta"], [1, "fa-solid"], [1, "kpi-card", "delivered"], [1, "fa-solid", "fa-check-double"], [1, "delivery-bar"], [1, "delivery-fill"], [1, "kpi-card", "pending"], [1, "fa-solid", "fa-clock"], [1, "kpi-delta", "neutral"], [1, "fa-solid", "fa-minus"], [1, "kpi-card", "failed"], [1, "fa-solid", "fa-circle-exclamation"], [1, "content-grid"], [1, "card"], [1, "card-header"], [1, "fa-solid", "fa-chart-bar"], [1, "chart-container-inner"], [3, "data", "showLegend", "showControls", "config"], [1, "fa-solid", "fa-bolt"], [1, "card-body", "no-padding"], [1, "activity-feed"], ["class", "activity-item", 4, "ngFor", "ngForOf"], ["class", "empty-state", 4, "ngIf"], [1, "fa-solid", "fa-heart-pulse"], [1, "provider-health-list"], ["class", "provider-row", 4, "ngFor", "ngForOf"], [1, "fa-solid", "fa-layer-group"], [1, "channel-breakdown"], ["class", "channel-row", 4, "ngFor", "ngForOf"], [1, "activity-item"], [1, "activity-icon", 3, "ngClass"], [1, "activity-body"], [1, "activity-title"], [1, "activity-meta"], [1, "activity-status", 3, "ngClass"], [1, "empty-state"], [1, "fa-solid", "fa-inbox"], [1, "provider-row"], [1, "provider-status-dot"], [1, "provider-logo", 3, "ngClass"], [1, "provider-info"], [1, "provider-name"], [1, "provider-type"], [1, "provider-health-bar"], [1, "provider-health-fill", 3, "ngClass"], [1, "provider-rate", 3, "ngClass"], [1, "fa-solid", "fa-server"], [1, "channel-row"], [1, "channel-icon", 3, "ngClass"], [1, "channel-info"], [1, "channel-name"], [1, "channel-count"], [1, "channel-bar-wrapper"], [1, "channel-bar-fill"], [1, "channel-pct"]], template: function CommunicationMonitorResourceComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CommunicationMonitorResourceComponent, selectors: [["mj-communication-monitor-resource"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 88, vars: 32, consts: [[1, "monitor-wrapper"], [1, "monitor-container"], [1, "kpi-strip"], [1, "kpi-card", "sent"], [1, "kpi-icon"], [1, "fa-solid", "fa-paper-plane"], [1, "kpi-body"], [1, "kpi-label"], [1, "kpi-value"], [1, "kpi-delta"], [1, "fa-solid"], [1, "kpi-card", "delivered"], [1, "fa-solid", "fa-check-double"], [1, "delivery-bar"], [1, "delivery-fill"], [1, "kpi-card", "pending"], [1, "fa-solid", "fa-clock"], [1, "kpi-delta", "neutral"], [1, "fa-solid", "fa-minus"], [1, "kpi-card", "failed"], [1, "fa-solid", "fa-circle-exclamation"], [1, "content-grid"], [1, "card"], [1, "card-header"], [1, "fa-solid", "fa-chart-bar"], [1, "chart-container-inner"], [3, "data", "showLegend", "showControls", "config"], [1, "fa-solid", "fa-bolt"], [1, "card-body", "no-padding"], [1, "activity-feed"], [1, "activity-item"], [1, "empty-state"], [1, "fa-solid", "fa-heart-pulse"], [1, "provider-health-list"], [1, "provider-row"], [1, "fa-solid", "fa-layer-group"], [1, "channel-breakdown"], [1, "channel-row"], [1, "activity-icon", 3, "ngClass"], [1, "activity-body"], [1, "activity-title"], [1, "activity-meta"], [1, "activity-status", 3, "ngClass"], [1, "fa-solid", "fa-inbox"], [1, "provider-status-dot"], [1, "provider-logo", 3, "ngClass"], [1, "provider-info"], [1, "provider-name"], [1, "provider-type"], [1, "provider-health-bar"], [1, "provider-health-fill", 3, "ngClass"], [1, "provider-rate", 3, "ngClass"], [1, "fa-solid", "fa-server"], [1, "channel-icon", 3, "ngClass"], [1, "channel-info"], [1, "channel-name"], [1, "channel-count"], [1, "channel-bar-wrapper"], [1, "channel-bar-fill"], [1, "channel-pct"]], template: function CommunicationMonitorResourceComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "div", 4);
             i0.ɵɵelement(5, "i", 5);
             i0.ɵɵelementEnd();
@@ -440,25 +434,28 @@ let CommunicationMonitorResourceComponent = class CommunicationMonitorResourceCo
             i0.ɵɵtext(61, " Recent Activity");
             i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(62, "div", 28)(63, "div", 29);
-            i0.ɵɵtemplate(64, CommunicationMonitorResourceComponent_div_64_Template, 11, 11, "div", 30)(65, CommunicationMonitorResourceComponent_div_65_Template, 4, 0, "div", 31);
+            i0.ɵɵrepeaterCreate(64, CommunicationMonitorResourceComponent_For_65_Template, 11, 11, "div", 30, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵconditionalCreate(66, CommunicationMonitorResourceComponent_Conditional_66_Template, 4, 0, "div", 31);
             i0.ɵɵelementEnd()()()();
-            i0.ɵɵelementStart(66, "div", 21)(67, "div", 22)(68, "div", 23)(69, "h3");
-            i0.ɵɵelement(70, "i", 32);
-            i0.ɵɵtext(71, " Provider Health");
+            i0.ɵɵelementStart(67, "div", 21)(68, "div", 22)(69, "div", 23)(70, "h3");
+            i0.ɵɵelement(71, "i", 32);
+            i0.ɵɵtext(72, " Provider Health");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(72, "div", 28)(73, "div", 33);
-            i0.ɵɵtemplate(74, CommunicationMonitorResourceComponent_div_74_Template, 13, 13, "div", 34)(75, CommunicationMonitorResourceComponent_div_75_Template, 4, 0, "div", 31);
+            i0.ɵɵelementStart(73, "div", 28)(74, "div", 33);
+            i0.ɵɵrepeaterCreate(75, CommunicationMonitorResourceComponent_For_76_Template, 13, 13, "div", 34, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵconditionalCreate(77, CommunicationMonitorResourceComponent_Conditional_77_Template, 4, 0, "div", 31);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(76, "div", 22)(77, "div", 23)(78, "h3");
-            i0.ɵɵelement(79, "i", 35);
-            i0.ɵɵtext(80, " Channel Breakdown");
+            i0.ɵɵelementStart(78, "div", 22)(79, "div", 23)(80, "h3");
+            i0.ɵɵelement(81, "i", 35);
+            i0.ɵɵtext(82, " Channel Breakdown");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(81, "div", 28)(82, "div", 36);
-            i0.ɵɵtemplate(83, CommunicationMonitorResourceComponent_div_83_Template, 13, 12, "div", 37)(84, CommunicationMonitorResourceComponent_div_84_Template, 4, 0, "div", 31);
+            i0.ɵɵelementStart(83, "div", 28)(84, "div", 36);
+            i0.ɵɵrepeaterCreate(85, CommunicationMonitorResourceComponent_For_86_Template, 13, 12, "div", 37, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵconditionalCreate(87, CommunicationMonitorResourceComponent_Conditional_87_Template, 4, 0, "div", 31);
             i0.ɵɵelementEnd()()()()()();
         } if (rf & 2) {
             i0.ɵɵadvance(10);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(11, 29, ctx.stats.totalSent));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(11, 26, ctx.stats.totalSent));
             i0.ɵɵadvance(2);
             i0.ɵɵclassMap(ctx.stats.totalSent > 0 ? "up" : "neutral");
             i0.ɵɵadvance();
@@ -468,9 +465,9 @@ let CommunicationMonitorResourceComponent = class CommunicationMonitorResourceCo
             i0.ɵɵadvance(2);
             i0.ɵɵstyleProp("width", ctx.stats.deliveryRate, "%");
             i0.ɵɵadvance(8);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(33, 31, ctx.stats.pending));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(33, 28, ctx.stats.pending));
             i0.ɵɵadvance(12);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(45, 33, ctx.stats.failed));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(45, 30, ctx.stats.failed));
             i0.ɵɵadvance(2);
             i0.ɵɵclassMap(ctx.stats.failed > 0 ? "down" : "neutral");
             i0.ɵɵadvance();
@@ -480,18 +477,18 @@ let CommunicationMonitorResourceComponent = class CommunicationMonitorResourceCo
             i0.ɵɵadvance(8);
             i0.ɵɵproperty("data", ctx.chartData)("showLegend", true)("showControls", false)("config", ctx.chartConfig);
             i0.ɵɵadvance(8);
-            i0.ɵɵproperty("ngForOf", ctx.recentLogs);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.recentLogs.length === 0);
+            i0.ɵɵrepeater(ctx.recentLogs);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.recentLogs.length === 0 ? 66 : -1);
             i0.ɵɵadvance(9);
-            i0.ɵɵproperty("ngForOf", ctx.providerHealth);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.providerHealth.length === 0);
+            i0.ɵɵrepeater(ctx.providerHealth);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.providerHealth.length === 0 ? 77 : -1);
             i0.ɵɵadvance(8);
-            i0.ɵɵproperty("ngForOf", ctx.channelBreakdown);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.channelBreakdown.length === 0);
-        } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i2.TimeSeriesChartComponent, i1.DecimalPipe, i1.DatePipe], styles: ["\n\n    \n\n    \n\n    .monitor-wrapper[_ngcontent-%COMP%] {\n        height: 100%;\n        overflow-y: auto;\n        background: var(--mat-sys-surface-container);\n    }\n    .monitor-container[_ngcontent-%COMP%] {\n        padding: 24px;\n        min-height: 100%;\n        max-width: 1600px;\n        margin: 0 auto;\n    }\n\n    \n\n    .kpi-strip[_ngcontent-%COMP%] {\n        display: grid;\n        grid-template-columns: repeat(4, 1fr);\n        gap: 16px;\n        margin-bottom: 24px;\n    }\n    .kpi-card[_ngcontent-%COMP%] {\n        background: var(--mat-sys-surface-container-lowest);\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: var(--mat-sys-corner-medium, 12px);\n        padding: 20px;\n        display: flex;\n        align-items: flex-start;\n        gap: 16px;\n        transition: all 0.15s ease;\n        position: relative;\n        overflow: hidden;\n    }\n    .kpi-card[_ngcontent-%COMP%]:hover {\n        box-shadow: var(--mat-sys-elevation-1);\n        border-color: var(--mat-sys-outline);\n    }\n    .kpi-card[_ngcontent-%COMP%]::before {\n        content: '';\n        position: absolute;\n        top: 0; left: 0; right: 0;\n        height: 3px;\n    }\n    .kpi-card.sent[_ngcontent-%COMP%]::before { background: var(--mat-sys-primary); }\n    .kpi-card.delivered[_ngcontent-%COMP%]::before { background: #1b873f; }\n    .kpi-card.pending[_ngcontent-%COMP%]::before { background: #9a6700; }\n    .kpi-card.failed[_ngcontent-%COMP%]::before { background: #cf222e; }\n\n    .kpi-icon[_ngcontent-%COMP%] {\n        width: 44px; height: 44px;\n        border-radius: var(--mat-sys-corner-medium, 12px);\n        display: flex; align-items: center; justify-content: center;\n        font-size: 16px; flex-shrink: 0;\n    }\n    .kpi-card.sent[_ngcontent-%COMP%]   .kpi-icon[_ngcontent-%COMP%] { background: var(--mat-sys-primary-container); color: var(--mat-sys-primary); }\n    .kpi-card.delivered[_ngcontent-%COMP%]   .kpi-icon[_ngcontent-%COMP%] { background: #d4f8e0; color: #1b873f; }\n    .kpi-card.pending[_ngcontent-%COMP%]   .kpi-icon[_ngcontent-%COMP%] { background: #fff0c7; color: #9a6700; }\n    .kpi-card.failed[_ngcontent-%COMP%]   .kpi-icon[_ngcontent-%COMP%] { background: #ffdce0; color: #cf222e; }\n\n    .kpi-body[_ngcontent-%COMP%] { flex: 1; display: flex; flex-direction: column; gap: 2px; }\n    .kpi-label[_ngcontent-%COMP%] {\n        font-size: 11px; font-weight: 600;\n        text-transform: uppercase; letter-spacing: 0.5px;\n        color: var(--mat-sys-on-surface-variant);\n    }\n    .kpi-value[_ngcontent-%COMP%] {\n        font-size: 28px; font-weight: 800;\n        color: var(--mat-sys-on-surface);\n        letter-spacing: -0.02em; line-height: 1.1;\n    }\n    .kpi-delta[_ngcontent-%COMP%] {\n        display: inline-flex; align-items: center;\n        gap: 4px; font-size: 11px; font-weight: 600;\n        margin-top: 4px; padding: 2px 8px;\n        border-radius: 10px; width: fit-content;\n    }\n    .kpi-delta.up[_ngcontent-%COMP%] { background: #d4f8e0; color: #1b873f; }\n    .kpi-delta.down[_ngcontent-%COMP%] { background: #ffdce0; color: #cf222e; }\n    .kpi-delta.neutral[_ngcontent-%COMP%] { background: var(--mat-sys-surface-container); color: var(--mat-sys-on-surface-variant); }\n\n    .delivery-bar[_ngcontent-%COMP%] {\n        height: 6px; margin-top: 10px;\n        background: var(--mat-sys-surface-container-high);\n        border-radius: 3px; overflow: hidden;\n    }\n    .delivery-fill[_ngcontent-%COMP%] {\n        height: 100%; border-radius: 3px;\n        background: #1b873f; transition: width 0.6s ease;\n    }\n\n    \n\n    .content-grid[_ngcontent-%COMP%] {\n        display: grid;\n        grid-template-columns: 1.6fr 1fr;\n        gap: 16px;\n        margin-bottom: 16px;\n    }\n\n    .card[_ngcontent-%COMP%] {\n        background: var(--mat-sys-surface-container-lowest);\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: var(--mat-sys-corner-medium, 12px);\n        overflow: hidden;\n    }\n    .card-header[_ngcontent-%COMP%] {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 16px 20px 12px;\n        border-bottom: 1px solid var(--mat-sys-outline-variant);\n    }\n    .card-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n        font-size: 13px; font-weight: 700;\n        color: var(--mat-sys-on-surface);\n        display: flex; align-items: center; gap: 8px;\n        margin: 0;\n    }\n    .card-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n        color: var(--mat-sys-on-surface-variant);\n        font-size: 12px;\n    }\n    .card-body[_ngcontent-%COMP%] { padding: 16px 20px; }\n    .card-body.no-padding[_ngcontent-%COMP%] { padding: 0; }\n\n    .chart-container-inner[_ngcontent-%COMP%] {\n        padding: 16px 20px;\n        min-height: 300px;\n    }\n\n    \n\n    .activity-feed[_ngcontent-%COMP%] { max-height: 370px; overflow-y: auto; }\n    .activity-item[_ngcontent-%COMP%] {\n        display: flex; align-items: center; gap: 12px;\n        padding: 12px 20px;\n        border-bottom: 1px solid var(--mat-sys-surface-container);\n        transition: background 0.15s ease; cursor: pointer;\n    }\n    .activity-item[_ngcontent-%COMP%]:last-child { border-bottom: none; }\n    .activity-item[_ngcontent-%COMP%]:hover { background: var(--mat-sys-surface-container-low); }\n\n    .activity-icon[_ngcontent-%COMP%] {\n        width: 34px; height: 34px;\n        border-radius: var(--mat-sys-corner-small, 8px);\n        display: flex; align-items: center; justify-content: center;\n        font-size: 12px; flex-shrink: 0;\n    }\n    .activity-icon.email[_ngcontent-%COMP%] { background: var(--mat-sys-primary-container); color: var(--mat-sys-primary); }\n    .activity-icon.sms[_ngcontent-%COMP%] { background: #e8f5e9; color: #2e7d32; }\n    .activity-icon.error[_ngcontent-%COMP%] { background: #ffdce0; color: #cf222e; }\n\n    .activity-body[_ngcontent-%COMP%] { flex: 1; min-width: 0; }\n    .activity-title[_ngcontent-%COMP%] {\n        font-size: 12px; font-weight: 600;\n        color: var(--mat-sys-on-surface);\n        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n        display: block;\n    }\n    .activity-meta[_ngcontent-%COMP%] {\n        font-size: 11px; color: var(--mat-sys-on-surface-variant); margin-top: 1px;\n        display: block;\n    }\n    .activity-status[_ngcontent-%COMP%] {\n        font-size: 10px; font-weight: 700;\n        text-transform: uppercase; letter-spacing: 0.3px;\n        padding: 3px 8px;\n        border-radius: var(--mat-sys-corner-extra-small, 4px);\n        flex-shrink: 0;\n    }\n    .activity-status.complete[_ngcontent-%COMP%] { background: #d4f8e0; color: #1b873f; }\n    .activity-status.failed[_ngcontent-%COMP%] { background: #ffdce0; color: #cf222e; }\n    .activity-status.pending[_ngcontent-%COMP%] { background: #fff0c7; color: #9a6700; }\n\n    \n\n    .provider-health-list[_ngcontent-%COMP%] { display: flex; flex-direction: column; }\n    .provider-row[_ngcontent-%COMP%] {\n        display: flex; align-items: center; gap: 12px;\n        padding: 14px 20px;\n        border-bottom: 1px solid var(--mat-sys-surface-container);\n        transition: background 0.15s ease;\n    }\n    .provider-row[_ngcontent-%COMP%]:last-child { border-bottom: none; }\n    .provider-row[_ngcontent-%COMP%]:hover { background: var(--mat-sys-surface-container-low); }\n\n    .provider-status-dot[_ngcontent-%COMP%] {\n        width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;\n        background: var(--mat-sys-outline);\n    }\n    .provider-status-dot.active[_ngcontent-%COMP%] { background: #1b873f; }\n\n    .provider-logo[_ngcontent-%COMP%] {\n        width: 36px; height: 36px;\n        border-radius: var(--mat-sys-corner-small, 8px);\n        background: var(--mat-sys-surface-container);\n        display: flex; align-items: center; justify-content: center;\n        font-size: 16px; flex-shrink: 0;\n    }\n    .provider-logo.sendgrid[_ngcontent-%COMP%] { color: #1A82E2; }\n    .provider-logo.twilio[_ngcontent-%COMP%] { color: #F22F46; }\n    .provider-logo.gmail[_ngcontent-%COMP%] { color: #EA4335; }\n    .provider-logo.msgraph[_ngcontent-%COMP%] { color: #0078D4; }\n\n    .provider-info[_ngcontent-%COMP%] { flex: 1; }\n    .provider-name[_ngcontent-%COMP%] { font-size: 13px; font-weight: 600; color: var(--mat-sys-on-surface); }\n    .provider-type[_ngcontent-%COMP%] { font-size: 11px; color: var(--mat-sys-on-surface-variant); }\n\n    .provider-health-bar[_ngcontent-%COMP%] {\n        width: 80px; height: 6px;\n        background: var(--mat-sys-surface-container-high);\n        border-radius: 3px; overflow: hidden;\n    }\n    .provider-health-fill[_ngcontent-%COMP%] {\n        height: 100%; border-radius: 3px;\n        transition: width 0.4s ease;\n    }\n    .provider-health-fill.excellent[_ngcontent-%COMP%] { background: #1b873f; }\n    .provider-health-fill.good[_ngcontent-%COMP%] { background: #66bb6a; }\n    .provider-health-fill.warning[_ngcontent-%COMP%] { background: #9a6700; }\n    .provider-health-fill.critical[_ngcontent-%COMP%] { background: #cf222e; }\n\n    .provider-rate[_ngcontent-%COMP%] {\n        font-size: 12px; font-weight: 700;\n        min-width: 44px; text-align: right;\n    }\n    .provider-rate.excellent[_ngcontent-%COMP%] { color: #1b873f; }\n    .provider-rate.good[_ngcontent-%COMP%] { color: #66bb6a; }\n    .provider-rate.warning[_ngcontent-%COMP%] { color: #9a6700; }\n    .provider-rate.critical[_ngcontent-%COMP%] { color: #cf222e; }\n\n    \n\n    .channel-breakdown[_ngcontent-%COMP%] { display: flex; flex-direction: column; }\n    .channel-row[_ngcontent-%COMP%] {\n        display: flex; align-items: center; gap: 12px;\n        padding: 14px 20px;\n        border-bottom: 1px solid var(--mat-sys-surface-container);\n    }\n    .channel-row[_ngcontent-%COMP%]:last-child { border-bottom: none; }\n    .channel-icon[_ngcontent-%COMP%] {\n        width: 32px; height: 32px;\n        border-radius: var(--mat-sys-corner-small, 8px);\n        display: flex; align-items: center; justify-content: center;\n        font-size: 13px; flex-shrink: 0;\n    }\n    .channel-icon.email[_ngcontent-%COMP%] { background: var(--mat-sys-primary-container); color: var(--mat-sys-primary); }\n    .channel-icon.sms[_ngcontent-%COMP%] { background: #e8f5e9; color: #2e7d32; }\n\n    .channel-info[_ngcontent-%COMP%] { flex: 1; }\n    .channel-name[_ngcontent-%COMP%] { font-size: 12px; font-weight: 600; color: var(--mat-sys-on-surface); }\n    .channel-count[_ngcontent-%COMP%] { font-size: 11px; color: var(--mat-sys-on-surface-variant); }\n\n    .channel-bar-wrapper[_ngcontent-%COMP%] {\n        width: 100px; height: 6px;\n        background: var(--mat-sys-surface-container-high);\n        border-radius: 3px; overflow: hidden;\n    }\n    .channel-bar-fill[_ngcontent-%COMP%] { height: 100%; border-radius: 3px; }\n    .channel-pct[_ngcontent-%COMP%] {\n        font-size: 12px; font-weight: 700;\n        color: var(--mat-sys-on-surface);\n        min-width: 36px; text-align: right;\n    }\n\n    \n\n    .empty-state[_ngcontent-%COMP%] {\n        display: flex; flex-direction: column;\n        align-items: center; justify-content: center;\n        padding: 40px 0; color: var(--mat-sys-on-surface-variant);\n    }\n    .empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 2rem; margin-bottom: 12px; opacity: 0.5; }\n    .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] { margin: 0; font-size: 13px; }\n\n    @media (max-width: 1200px) {\n        .kpi-strip[_ngcontent-%COMP%] { grid-template-columns: repeat(2, 1fr); }\n        .content-grid[_ngcontent-%COMP%] { grid-template-columns: 1fr; }\n    }"] });
+            i0.ɵɵrepeater(ctx.channelBreakdown);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.channelBreakdown.length === 0 ? 87 : -1);
+        } }, dependencies: [i1.NgClass, i2.TimeSeriesChartComponent, i1.DecimalPipe, i1.DatePipe], styles: ["\n\n    \n\n    \n\n    .monitor-wrapper[_ngcontent-%COMP%] {\n        height: 100%;\n        overflow-y: auto;\n        background: var(--mat-sys-surface-container);\n    }\n    .monitor-container[_ngcontent-%COMP%] {\n        padding: 24px;\n        min-height: 100%;\n        max-width: 1600px;\n        margin: 0 auto;\n    }\n\n    \n\n    .kpi-strip[_ngcontent-%COMP%] {\n        display: grid;\n        grid-template-columns: repeat(4, 1fr);\n        gap: 16px;\n        margin-bottom: 24px;\n    }\n    .kpi-card[_ngcontent-%COMP%] {\n        background: var(--mat-sys-surface-container-lowest);\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: var(--mat-sys-corner-medium, 12px);\n        padding: 20px;\n        display: flex;\n        align-items: flex-start;\n        gap: 16px;\n        transition: all 0.15s ease;\n        position: relative;\n        overflow: hidden;\n    }\n    .kpi-card[_ngcontent-%COMP%]:hover {\n        box-shadow: var(--mat-sys-elevation-1);\n        border-color: var(--mat-sys-outline);\n    }\n    .kpi-card[_ngcontent-%COMP%]::before {\n        content: '';\n        position: absolute;\n        top: 0; left: 0; right: 0;\n        height: 3px;\n    }\n    .kpi-card.sent[_ngcontent-%COMP%]::before { background: var(--mat-sys-primary); }\n    .kpi-card.delivered[_ngcontent-%COMP%]::before { background: #1b873f; }\n    .kpi-card.pending[_ngcontent-%COMP%]::before { background: #9a6700; }\n    .kpi-card.failed[_ngcontent-%COMP%]::before { background: #cf222e; }\n\n    .kpi-icon[_ngcontent-%COMP%] {\n        width: 44px; height: 44px;\n        border-radius: var(--mat-sys-corner-medium, 12px);\n        display: flex; align-items: center; justify-content: center;\n        font-size: 16px; flex-shrink: 0;\n    }\n    .kpi-card.sent[_ngcontent-%COMP%]   .kpi-icon[_ngcontent-%COMP%] { background: var(--mat-sys-primary-container); color: var(--mat-sys-primary); }\n    .kpi-card.delivered[_ngcontent-%COMP%]   .kpi-icon[_ngcontent-%COMP%] { background: #d4f8e0; color: #1b873f; }\n    .kpi-card.pending[_ngcontent-%COMP%]   .kpi-icon[_ngcontent-%COMP%] { background: #fff0c7; color: #9a6700; }\n    .kpi-card.failed[_ngcontent-%COMP%]   .kpi-icon[_ngcontent-%COMP%] { background: #ffdce0; color: #cf222e; }\n\n    .kpi-body[_ngcontent-%COMP%] { flex: 1; display: flex; flex-direction: column; gap: 2px; }\n    .kpi-label[_ngcontent-%COMP%] {\n        font-size: 11px; font-weight: 600;\n        text-transform: uppercase; letter-spacing: 0.5px;\n        color: var(--mat-sys-on-surface-variant);\n    }\n    .kpi-value[_ngcontent-%COMP%] {\n        font-size: 28px; font-weight: 800;\n        color: var(--mat-sys-on-surface);\n        letter-spacing: -0.02em; line-height: 1.1;\n    }\n    .kpi-delta[_ngcontent-%COMP%] {\n        display: inline-flex; align-items: center;\n        gap: 4px; font-size: 11px; font-weight: 600;\n        margin-top: 4px; padding: 2px 8px;\n        border-radius: 10px; width: fit-content;\n    }\n    .kpi-delta.up[_ngcontent-%COMP%] { background: #d4f8e0; color: #1b873f; }\n    .kpi-delta.down[_ngcontent-%COMP%] { background: #ffdce0; color: #cf222e; }\n    .kpi-delta.neutral[_ngcontent-%COMP%] { background: var(--mat-sys-surface-container); color: var(--mat-sys-on-surface-variant); }\n\n    .delivery-bar[_ngcontent-%COMP%] {\n        height: 6px; margin-top: 10px;\n        background: var(--mat-sys-surface-container-high);\n        border-radius: 3px; overflow: hidden;\n    }\n    .delivery-fill[_ngcontent-%COMP%] {\n        height: 100%; border-radius: 3px;\n        background: #1b873f; transition: width 0.6s ease;\n    }\n\n    \n\n    .content-grid[_ngcontent-%COMP%] {\n        display: grid;\n        grid-template-columns: 1.6fr 1fr;\n        gap: 16px;\n        margin-bottom: 16px;\n    }\n\n    .card[_ngcontent-%COMP%] {\n        background: var(--mat-sys-surface-container-lowest);\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: var(--mat-sys-corner-medium, 12px);\n        overflow: hidden;\n    }\n    .card-header[_ngcontent-%COMP%] {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 16px 20px 12px;\n        border-bottom: 1px solid var(--mat-sys-outline-variant);\n    }\n    .card-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n        font-size: 13px; font-weight: 700;\n        color: var(--mat-sys-on-surface);\n        display: flex; align-items: center; gap: 8px;\n        margin: 0;\n    }\n    .card-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n        color: var(--mat-sys-on-surface-variant);\n        font-size: 12px;\n    }\n    .card-body[_ngcontent-%COMP%] { padding: 16px 20px; }\n    .card-body.no-padding[_ngcontent-%COMP%] { padding: 0; }\n\n    .chart-container-inner[_ngcontent-%COMP%] {\n        padding: 16px 20px;\n        min-height: 300px;\n    }\n\n    \n\n    .activity-feed[_ngcontent-%COMP%] { max-height: 370px; overflow-y: auto; }\n    .activity-item[_ngcontent-%COMP%] {\n        display: flex; align-items: center; gap: 12px;\n        padding: 12px 20px;\n        border-bottom: 1px solid var(--mat-sys-surface-container);\n        transition: background 0.15s ease; cursor: pointer;\n    }\n    .activity-item[_ngcontent-%COMP%]:last-child { border-bottom: none; }\n    .activity-item[_ngcontent-%COMP%]:hover { background: var(--mat-sys-surface-container-low); }\n\n    .activity-icon[_ngcontent-%COMP%] {\n        width: 34px; height: 34px;\n        border-radius: var(--mat-sys-corner-small, 8px);\n        display: flex; align-items: center; justify-content: center;\n        font-size: 12px; flex-shrink: 0;\n    }\n    .activity-icon.email[_ngcontent-%COMP%] { background: var(--mat-sys-primary-container); color: var(--mat-sys-primary); }\n    .activity-icon.sms[_ngcontent-%COMP%] { background: #e8f5e9; color: #2e7d32; }\n    .activity-icon.error[_ngcontent-%COMP%] { background: #ffdce0; color: #cf222e; }\n\n    .activity-body[_ngcontent-%COMP%] { flex: 1; min-width: 0; }\n    .activity-title[_ngcontent-%COMP%] {\n        font-size: 12px; font-weight: 600;\n        color: var(--mat-sys-on-surface);\n        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n        display: block;\n    }\n    .activity-meta[_ngcontent-%COMP%] {\n        font-size: 11px; color: var(--mat-sys-on-surface-variant); margin-top: 1px;\n        display: block;\n    }\n    .activity-status[_ngcontent-%COMP%] {\n        font-size: 10px; font-weight: 700;\n        text-transform: uppercase; letter-spacing: 0.3px;\n        padding: 3px 8px;\n        border-radius: var(--mat-sys-corner-extra-small, 4px);\n        flex-shrink: 0;\n    }\n    .activity-status.complete[_ngcontent-%COMP%] { background: #d4f8e0; color: #1b873f; }\n    .activity-status.failed[_ngcontent-%COMP%] { background: #ffdce0; color: #cf222e; }\n    .activity-status.pending[_ngcontent-%COMP%] { background: #fff0c7; color: #9a6700; }\n\n    \n\n    .provider-health-list[_ngcontent-%COMP%] { display: flex; flex-direction: column; }\n    .provider-row[_ngcontent-%COMP%] {\n        display: flex; align-items: center; gap: 12px;\n        padding: 14px 20px;\n        border-bottom: 1px solid var(--mat-sys-surface-container);\n        transition: background 0.15s ease;\n    }\n    .provider-row[_ngcontent-%COMP%]:last-child { border-bottom: none; }\n    .provider-row[_ngcontent-%COMP%]:hover { background: var(--mat-sys-surface-container-low); }\n\n    .provider-status-dot[_ngcontent-%COMP%] {\n        width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;\n        background: var(--mat-sys-outline);\n    }\n    .provider-status-dot.active[_ngcontent-%COMP%] { background: #1b873f; }\n\n    .provider-logo[_ngcontent-%COMP%] {\n        width: 36px; height: 36px;\n        border-radius: var(--mat-sys-corner-small, 8px);\n        background: var(--mat-sys-surface-container);\n        display: flex; align-items: center; justify-content: center;\n        font-size: 16px; flex-shrink: 0;\n    }\n    .provider-logo.sendgrid[_ngcontent-%COMP%] { color: #1A82E2; }\n    .provider-logo.twilio[_ngcontent-%COMP%] { color: #F22F46; }\n    .provider-logo.gmail[_ngcontent-%COMP%] { color: #EA4335; }\n    .provider-logo.msgraph[_ngcontent-%COMP%] { color: #0078D4; }\n\n    .provider-info[_ngcontent-%COMP%] { flex: 1; }\n    .provider-name[_ngcontent-%COMP%] { font-size: 13px; font-weight: 600; color: var(--mat-sys-on-surface); }\n    .provider-type[_ngcontent-%COMP%] { font-size: 11px; color: var(--mat-sys-on-surface-variant); }\n\n    .provider-health-bar[_ngcontent-%COMP%] {\n        width: 80px; height: 6px;\n        background: var(--mat-sys-surface-container-high);\n        border-radius: 3px; overflow: hidden;\n    }\n    .provider-health-fill[_ngcontent-%COMP%] {\n        height: 100%; border-radius: 3px;\n        transition: width 0.4s ease;\n    }\n    .provider-health-fill.excellent[_ngcontent-%COMP%] { background: #1b873f; }\n    .provider-health-fill.good[_ngcontent-%COMP%] { background: #66bb6a; }\n    .provider-health-fill.warning[_ngcontent-%COMP%] { background: #9a6700; }\n    .provider-health-fill.critical[_ngcontent-%COMP%] { background: #cf222e; }\n\n    .provider-rate[_ngcontent-%COMP%] {\n        font-size: 12px; font-weight: 700;\n        min-width: 44px; text-align: right;\n    }\n    .provider-rate.excellent[_ngcontent-%COMP%] { color: #1b873f; }\n    .provider-rate.good[_ngcontent-%COMP%] { color: #66bb6a; }\n    .provider-rate.warning[_ngcontent-%COMP%] { color: #9a6700; }\n    .provider-rate.critical[_ngcontent-%COMP%] { color: #cf222e; }\n\n    \n\n    .channel-breakdown[_ngcontent-%COMP%] { display: flex; flex-direction: column; }\n    .channel-row[_ngcontent-%COMP%] {\n        display: flex; align-items: center; gap: 12px;\n        padding: 14px 20px;\n        border-bottom: 1px solid var(--mat-sys-surface-container);\n    }\n    .channel-row[_ngcontent-%COMP%]:last-child { border-bottom: none; }\n    .channel-icon[_ngcontent-%COMP%] {\n        width: 32px; height: 32px;\n        border-radius: var(--mat-sys-corner-small, 8px);\n        display: flex; align-items: center; justify-content: center;\n        font-size: 13px; flex-shrink: 0;\n    }\n    .channel-icon.email[_ngcontent-%COMP%] { background: var(--mat-sys-primary-container); color: var(--mat-sys-primary); }\n    .channel-icon.sms[_ngcontent-%COMP%] { background: #e8f5e9; color: #2e7d32; }\n\n    .channel-info[_ngcontent-%COMP%] { flex: 1; }\n    .channel-name[_ngcontent-%COMP%] { font-size: 12px; font-weight: 600; color: var(--mat-sys-on-surface); }\n    .channel-count[_ngcontent-%COMP%] { font-size: 11px; color: var(--mat-sys-on-surface-variant); }\n\n    .channel-bar-wrapper[_ngcontent-%COMP%] {\n        width: 100px; height: 6px;\n        background: var(--mat-sys-surface-container-high);\n        border-radius: 3px; overflow: hidden;\n    }\n    .channel-bar-fill[_ngcontent-%COMP%] { height: 100%; border-radius: 3px; }\n    .channel-pct[_ngcontent-%COMP%] {\n        font-size: 12px; font-weight: 700;\n        color: var(--mat-sys-on-surface);\n        min-width: 36px; text-align: right;\n    }\n\n    \n\n    .empty-state[_ngcontent-%COMP%] {\n        display: flex; flex-direction: column;\n        align-items: center; justify-content: center;\n        padding: 40px 0; color: var(--mat-sys-on-surface-variant);\n    }\n    .empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 2rem; margin-bottom: 12px; opacity: 0.5; }\n    .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] { margin: 0; font-size: 13px; }\n\n    @media (max-width: 1200px) {\n        .kpi-strip[_ngcontent-%COMP%] { grid-template-columns: repeat(2, 1fr); }\n        .content-grid[_ngcontent-%COMP%] { grid-template-columns: 1fr; }\n    }"] });
 };
 CommunicationMonitorResourceComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'CommunicationMonitorResource')
@@ -499,158 +496,170 @@ CommunicationMonitorResourceComponent = __decorate([
 export { CommunicationMonitorResourceComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CommunicationMonitorResourceComponent, [{
         type: Component,
-        args: [{ selector: 'mj-communication-monitor-resource', template: `
+        args: [{ standalone: false, selector: 'mj-communication-monitor-resource', template: `
     <div class="monitor-wrapper">
-        <div class="monitor-container">
-            <!-- KPI STRIP -->
-            <div class="kpi-strip">
-                <div class="kpi-card sent">
-                    <div class="kpi-icon"><i class="fa-solid fa-paper-plane"></i></div>
-                    <div class="kpi-body">
-                        <span class="kpi-label">Total Sent</span>
-                        <span class="kpi-value">{{stats.totalSent | number}}</span>
-                        <span class="kpi-delta" [class]="stats.totalSent > 0 ? 'up' : 'neutral'">
-                            <i class="fa-solid" [class.fa-arrow-up]="stats.totalSent > 0" [class.fa-minus]="stats.totalSent === 0"></i>
-                            Last 24 hours
-                        </span>
-                    </div>
-                </div>
-                <div class="kpi-card delivered">
-                    <div class="kpi-icon"><i class="fa-solid fa-check-double"></i></div>
-                    <div class="kpi-body">
-                        <span class="kpi-label">Delivery Rate</span>
-                        <span class="kpi-value">{{stats.deliveryRate}}%</span>
-                        <div class="delivery-bar">
-                            <div class="delivery-fill" [style.width.%]="stats.deliveryRate"></div>
-                        </div>
-                    </div>
-                </div>
-                <div class="kpi-card pending">
-                    <div class="kpi-icon"><i class="fa-solid fa-clock"></i></div>
-                    <div class="kpi-body">
-                        <span class="kpi-label">Pending</span>
-                        <span class="kpi-value">{{stats.pending | number}}</span>
-                        <span class="kpi-delta neutral">
-                            <i class="fa-solid fa-minus"></i> Awaiting provider
-                        </span>
+      <div class="monitor-container">
+        <!-- KPI STRIP -->
+        <div class="kpi-strip">
+          <div class="kpi-card sent">
+            <div class="kpi-icon"><i class="fa-solid fa-paper-plane"></i></div>
+            <div class="kpi-body">
+              <span class="kpi-label">Total Sent</span>
+              <span class="kpi-value">{{stats.totalSent | number}}</span>
+              <span class="kpi-delta" [class]="stats.totalSent > 0 ? 'up' : 'neutral'">
+                <i class="fa-solid" [class.fa-arrow-up]="stats.totalSent > 0" [class.fa-minus]="stats.totalSent === 0"></i>
+                Last 24 hours
+              </span>
+            </div>
+          </div>
+          <div class="kpi-card delivered">
+            <div class="kpi-icon"><i class="fa-solid fa-check-double"></i></div>
+            <div class="kpi-body">
+              <span class="kpi-label">Delivery Rate</span>
+              <span class="kpi-value">{{stats.deliveryRate}}%</span>
+              <div class="delivery-bar">
+                <div class="delivery-fill" [style.width.%]="stats.deliveryRate"></div>
+              </div>
+            </div>
+          </div>
+          <div class="kpi-card pending">
+            <div class="kpi-icon"><i class="fa-solid fa-clock"></i></div>
+            <div class="kpi-body">
+              <span class="kpi-label">Pending</span>
+              <span class="kpi-value">{{stats.pending | number}}</span>
+              <span class="kpi-delta neutral">
+                <i class="fa-solid fa-minus"></i> Awaiting provider
+              </span>
+            </div>
+          </div>
+          <div class="kpi-card failed">
+            <div class="kpi-icon"><i class="fa-solid fa-circle-exclamation"></i></div>
+            <div class="kpi-body">
+              <span class="kpi-label">Failed</span>
+              <span class="kpi-value">{{stats.failed | number}}</span>
+              <span class="kpi-delta" [class]="stats.failed > 0 ? 'down' : 'neutral'">
+                <i class="fa-solid" [class.fa-arrow-up]="stats.failed > 0" [class.fa-minus]="stats.failed === 0"></i>
+                {{stats.failed > 0 ? 'Requires attention' : 'No failures'}}
+              </span>
+            </div>
+          </div>
+        </div>
+    
+        <!-- CHARTS + ACTIVITY ROW -->
+        <div class="content-grid">
+          <div class="card">
+            <div class="card-header">
+              <h3><i class="fa-solid fa-chart-bar"></i> Delivery Volume</h3>
+            </div>
+            <div class="chart-container-inner">
+              <app-time-series-chart
+                [data]="chartData"
+                [showLegend]="true"
+                [showControls]="false"
+                [config]="chartConfig">
+              </app-time-series-chart>
+            </div>
+          </div>
+    
+          <div class="card">
+            <div class="card-header">
+              <h3><i class="fa-solid fa-bolt"></i> Recent Activity</h3>
+            </div>
+            <div class="card-body no-padding">
+              <div class="activity-feed">
+                @for (log of recentLogs; track log) {
+                  <div class="activity-item">
+                    <div class="activity-icon" [ngClass]="getActivityIconClass(log)">
+                      <i [class]="getActivityIcon(log)"></i>
                     </div>
-                </div>
-                <div class="kpi-card failed">
-                    <div class="kpi-icon"><i class="fa-solid fa-circle-exclamation"></i></div>
-                    <div class="kpi-body">
-                        <span class="kpi-label">Failed</span>
-                        <span class="kpi-value">{{stats.failed | number}}</span>
-                        <span class="kpi-delta" [class]="stats.failed > 0 ? 'down' : 'neutral'">
-                            <i class="fa-solid" [class.fa-arrow-up]="stats.failed > 0" [class.fa-minus]="stats.failed === 0"></i>
-                            {{stats.failed > 0 ? 'Requires attention' : 'No failures'}}
-                        </span>
+                    <div class="activity-body">
+                      <span class="activity-title">{{log.CommunicationProviderMessageType || 'Message'}}</span>
+                      <span class="activity-meta">{{log.CommunicationProvider}} &bull; {{log.MessageDate | date:'shortTime'}}</span>
                     </div>
-                </div>
+                    <span class="activity-status" [ngClass]="log.Status.toLowerCase()">
+                      {{log.Status}}
+                    </span>
+                  </div>
+                }
+                @if (recentLogs.length === 0) {
+                  <div class="empty-state">
+                    <i class="fa-solid fa-inbox"></i>
+                    <p>No recent activity</p>
+                  </div>
+                }
+              </div>
             </div>
-
-            <!-- CHARTS + ACTIVITY ROW -->
-            <div class="content-grid">
-                <div class="card">
-                    <div class="card-header">
-                        <h3><i class="fa-solid fa-chart-bar"></i> Delivery Volume</h3>
-                    </div>
-                    <div class="chart-container-inner">
-                        <app-time-series-chart
-                            [data]="chartData"
-                            [showLegend]="true"
-                            [showControls]="false"
-                            [config]="chartConfig">
-                        </app-time-series-chart>
+          </div>
+        </div>
+    
+        <!-- PROVIDER HEALTH + CHANNEL BREAKDOWN -->
+        <div class="content-grid">
+          <div class="card">
+            <div class="card-header">
+              <h3><i class="fa-solid fa-heart-pulse"></i> Provider Health</h3>
+            </div>
+            <div class="card-body no-padding">
+              <div class="provider-health-list">
+                @for (provider of providerHealth; track provider) {
+                  <div class="provider-row">
+                    <div class="provider-status-dot" [class.active]="provider.IsActive"></div>
+                    <div class="provider-logo" [ngClass]="provider.ColorClass">
+                      <i [class]="provider.IconClass"></i>
                     </div>
-                </div>
-
-                <div class="card">
-                    <div class="card-header">
-                        <h3><i class="fa-solid fa-bolt"></i> Recent Activity</h3>
+                    <div class="provider-info">
+                      <div class="provider-name">{{provider.Name}}</div>
+                      <div class="provider-type">{{provider.Type}} &bull; {{provider.SentCount}} sent today</div>
                     </div>
-                    <div class="card-body no-padding">
-                        <div class="activity-feed">
-                            <div *ngFor="let log of recentLogs" class="activity-item">
-                                <div class="activity-icon" [ngClass]="getActivityIconClass(log)">
-                                    <i [class]="getActivityIcon(log)"></i>
-                                </div>
-                                <div class="activity-body">
-                                    <span class="activity-title">{{log.CommunicationProviderMessageType || 'Message'}}</span>
-                                    <span class="activity-meta">{{log.CommunicationProvider}} &bull; {{log.MessageDate | date:'shortTime'}}</span>
-                                </div>
-                                <span class="activity-status" [ngClass]="log.Status?.toLowerCase()">
-                                    {{log.Status}}
-                                </span>
-                            </div>
-                            <div *ngIf="recentLogs.length === 0" class="empty-state">
-                                <i class="fa-solid fa-inbox"></i>
-                                <p>No recent activity</p>
-                            </div>
-                        </div>
+                    <div class="provider-health-bar">
+                      <div class="provider-health-fill" [ngClass]="getHealthClass(provider.SuccessRate)" [style.width.%]="provider.SuccessRate"></div>
                     </div>
-                </div>
+                    <span class="provider-rate" [ngClass]="getHealthClass(provider.SuccessRate)">{{provider.SuccessRate}}%</span>
+                  </div>
+                }
+                @if (providerHealth.length === 0) {
+                  <div class="empty-state">
+                    <i class="fa-solid fa-server"></i>
+                    <p>No providers configured</p>
+                  </div>
+                }
+              </div>
             </div>
-
-            <!-- PROVIDER HEALTH + CHANNEL BREAKDOWN -->
-            <div class="content-grid">
-                <div class="card">
-                    <div class="card-header">
-                        <h3><i class="fa-solid fa-heart-pulse"></i> Provider Health</h3>
-                    </div>
-                    <div class="card-body no-padding">
-                        <div class="provider-health-list">
-                            <div *ngFor="let provider of providerHealth" class="provider-row">
-                                <div class="provider-status-dot" [class.active]="provider.IsActive"></div>
-                                <div class="provider-logo" [ngClass]="provider.ColorClass">
-                                    <i [class]="provider.IconClass"></i>
-                                </div>
-                                <div class="provider-info">
-                                    <div class="provider-name">{{provider.Name}}</div>
-                                    <div class="provider-type">{{provider.Type}} &bull; {{provider.SentCount}} sent today</div>
-                                </div>
-                                <div class="provider-health-bar">
-                                    <div class="provider-health-fill" [ngClass]="getHealthClass(provider.SuccessRate)" [style.width.%]="provider.SuccessRate"></div>
-                                </div>
-                                <span class="provider-rate" [ngClass]="getHealthClass(provider.SuccessRate)">{{provider.SuccessRate}}%</span>
-                            </div>
-                            <div *ngIf="providerHealth.length === 0" class="empty-state">
-                                <i class="fa-solid fa-server"></i>
-                                <p>No providers configured</p>
-                            </div>
-                        </div>
+          </div>
+    
+          <div class="card">
+            <div class="card-header">
+              <h3><i class="fa-solid fa-layer-group"></i> Channel Breakdown</h3>
+            </div>
+            <div class="card-body no-padding">
+              <div class="channel-breakdown">
+                @for (channel of channelBreakdown; track channel) {
+                  <div class="channel-row">
+                    <div class="channel-icon" [ngClass]="channel.ColorClass">
+                      <i [class]="channel.IconClass"></i>
                     </div>
-                </div>
-
-                <div class="card">
-                    <div class="card-header">
-                        <h3><i class="fa-solid fa-layer-group"></i> Channel Breakdown</h3>
+                    <div class="channel-info">
+                      <div class="channel-name">{{channel.Name}}</div>
+                      <div class="channel-count">{{channel.Count | number}} messages</div>
                     </div>
-                    <div class="card-body no-padding">
-                        <div class="channel-breakdown">
-                            <div *ngFor="let channel of channelBreakdown" class="channel-row">
-                                <div class="channel-icon" [ngClass]="channel.ColorClass">
-                                    <i [class]="channel.IconClass"></i>
-                                </div>
-                                <div class="channel-info">
-                                    <div class="channel-name">{{channel.Name}}</div>
-                                    <div class="channel-count">{{channel.Count | number}} messages</div>
-                                </div>
-                                <div class="channel-bar-wrapper">
-                                    <div class="channel-bar-fill" [style.width.%]="channel.Percentage" [style.background]="channel.ColorClass === 'email' ? 'var(--mat-sys-primary)' : '#2e7d32'"></div>
-                                </div>
-                                <span class="channel-pct">{{channel.Percentage}}%</span>
-                            </div>
-                            <div *ngIf="channelBreakdown.length === 0" class="empty-state">
-                                <i class="fa-solid fa-layer-group"></i>
-                                <p>No channel data available</p>
-                            </div>
-                        </div>
+                    <div class="channel-bar-wrapper">
+                      <div class="channel-bar-fill" [style.width.%]="channel.Percentage" [style.background]="channel.ColorClass === 'email' ? 'var(--mat-sys-primary)' : '#2e7d32'"></div>
                     </div>
-                </div>
+                    <span class="channel-pct">{{channel.Percentage}}%</span>
+                  </div>
+                }
+                @if (channelBreakdown.length === 0) {
+                  <div class="empty-state">
+                    <i class="fa-solid fa-layer-group"></i>
+                    <p>No channel data available</p>
+                  </div>
+                }
+              </div>
             </div>
+          </div>
         </div>
+      </div>
     </div>
-  `, styles: ["\n    /* ============================================================ */\n    /* MD3 MONITOR RESOURCE                                        */\n    /* ============================================================ */\n    .monitor-wrapper {\n        height: 100%;\n        overflow-y: auto;\n        background: var(--mat-sys-surface-container);\n    }\n    .monitor-container {\n        padding: 24px;\n        min-height: 100%;\n        max-width: 1600px;\n        margin: 0 auto;\n    }\n\n    /* KPI STRIP */\n    .kpi-strip {\n        display: grid;\n        grid-template-columns: repeat(4, 1fr);\n        gap: 16px;\n        margin-bottom: 24px;\n    }\n    .kpi-card {\n        background: var(--mat-sys-surface-container-lowest);\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: var(--mat-sys-corner-medium, 12px);\n        padding: 20px;\n        display: flex;\n        align-items: flex-start;\n        gap: 16px;\n        transition: all 0.15s ease;\n        position: relative;\n        overflow: hidden;\n    }\n    .kpi-card:hover {\n        box-shadow: var(--mat-sys-elevation-1);\n        border-color: var(--mat-sys-outline);\n    }\n    .kpi-card::before {\n        content: '';\n        position: absolute;\n        top: 0; left: 0; right: 0;\n        height: 3px;\n    }\n    .kpi-card.sent::before { background: var(--mat-sys-primary); }\n    .kpi-card.delivered::before { background: #1b873f; }\n    .kpi-card.pending::before { background: #9a6700; }\n    .kpi-card.failed::before { background: #cf222e; }\n\n    .kpi-icon {\n        width: 44px; height: 44px;\n        border-radius: var(--mat-sys-corner-medium, 12px);\n        display: flex; align-items: center; justify-content: center;\n        font-size: 16px; flex-shrink: 0;\n    }\n    .kpi-card.sent .kpi-icon { background: var(--mat-sys-primary-container); color: var(--mat-sys-primary); }\n    .kpi-card.delivered .kpi-icon { background: #d4f8e0; color: #1b873f; }\n    .kpi-card.pending .kpi-icon { background: #fff0c7; color: #9a6700; }\n    .kpi-card.failed .kpi-icon { background: #ffdce0; color: #cf222e; }\n\n    .kpi-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }\n    .kpi-label {\n        font-size: 11px; font-weight: 600;\n        text-transform: uppercase; letter-spacing: 0.5px;\n        color: var(--mat-sys-on-surface-variant);\n    }\n    .kpi-value {\n        font-size: 28px; font-weight: 800;\n        color: var(--mat-sys-on-surface);\n        letter-spacing: -0.02em; line-height: 1.1;\n    }\n    .kpi-delta {\n        display: inline-flex; align-items: center;\n        gap: 4px; font-size: 11px; font-weight: 600;\n        margin-top: 4px; padding: 2px 8px;\n        border-radius: 10px; width: fit-content;\n    }\n    .kpi-delta.up { background: #d4f8e0; color: #1b873f; }\n    .kpi-delta.down { background: #ffdce0; color: #cf222e; }\n    .kpi-delta.neutral { background: var(--mat-sys-surface-container); color: var(--mat-sys-on-surface-variant); }\n\n    .delivery-bar {\n        height: 6px; margin-top: 10px;\n        background: var(--mat-sys-surface-container-high);\n        border-radius: 3px; overflow: hidden;\n    }\n    .delivery-fill {\n        height: 100%; border-radius: 3px;\n        background: #1b873f; transition: width 0.6s ease;\n    }\n\n    /* CONTENT GRID */\n    .content-grid {\n        display: grid;\n        grid-template-columns: 1.6fr 1fr;\n        gap: 16px;\n        margin-bottom: 16px;\n    }\n\n    .card {\n        background: var(--mat-sys-surface-container-lowest);\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: var(--mat-sys-corner-medium, 12px);\n        overflow: hidden;\n    }\n    .card-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 16px 20px 12px;\n        border-bottom: 1px solid var(--mat-sys-outline-variant);\n    }\n    .card-header h3 {\n        font-size: 13px; font-weight: 700;\n        color: var(--mat-sys-on-surface);\n        display: flex; align-items: center; gap: 8px;\n        margin: 0;\n    }\n    .card-header h3 i {\n        color: var(--mat-sys-on-surface-variant);\n        font-size: 12px;\n    }\n    .card-body { padding: 16px 20px; }\n    .card-body.no-padding { padding: 0; }\n\n    .chart-container-inner {\n        padding: 16px 20px;\n        min-height: 300px;\n    }\n\n    /* ACTIVITY FEED */\n    .activity-feed { max-height: 370px; overflow-y: auto; }\n    .activity-item {\n        display: flex; align-items: center; gap: 12px;\n        padding: 12px 20px;\n        border-bottom: 1px solid var(--mat-sys-surface-container);\n        transition: background 0.15s ease; cursor: pointer;\n    }\n    .activity-item:last-child { border-bottom: none; }\n    .activity-item:hover { background: var(--mat-sys-surface-container-low); }\n\n    .activity-icon {\n        width: 34px; height: 34px;\n        border-radius: var(--mat-sys-corner-small, 8px);\n        display: flex; align-items: center; justify-content: center;\n        font-size: 12px; flex-shrink: 0;\n    }\n    .activity-icon.email { background: var(--mat-sys-primary-container); color: var(--mat-sys-primary); }\n    .activity-icon.sms { background: #e8f5e9; color: #2e7d32; }\n    .activity-icon.error { background: #ffdce0; color: #cf222e; }\n\n    .activity-body { flex: 1; min-width: 0; }\n    .activity-title {\n        font-size: 12px; font-weight: 600;\n        color: var(--mat-sys-on-surface);\n        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n        display: block;\n    }\n    .activity-meta {\n        font-size: 11px; color: var(--mat-sys-on-surface-variant); margin-top: 1px;\n        display: block;\n    }\n    .activity-status {\n        font-size: 10px; font-weight: 700;\n        text-transform: uppercase; letter-spacing: 0.3px;\n        padding: 3px 8px;\n        border-radius: var(--mat-sys-corner-extra-small, 4px);\n        flex-shrink: 0;\n    }\n    .activity-status.complete { background: #d4f8e0; color: #1b873f; }\n    .activity-status.failed { background: #ffdce0; color: #cf222e; }\n    .activity-status.pending { background: #fff0c7; color: #9a6700; }\n\n    /* PROVIDER HEALTH */\n    .provider-health-list { display: flex; flex-direction: column; }\n    .provider-row {\n        display: flex; align-items: center; gap: 12px;\n        padding: 14px 20px;\n        border-bottom: 1px solid var(--mat-sys-surface-container);\n        transition: background 0.15s ease;\n    }\n    .provider-row:last-child { border-bottom: none; }\n    .provider-row:hover { background: var(--mat-sys-surface-container-low); }\n\n    .provider-status-dot {\n        width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;\n        background: var(--mat-sys-outline);\n    }\n    .provider-status-dot.active { background: #1b873f; }\n\n    .provider-logo {\n        width: 36px; height: 36px;\n        border-radius: var(--mat-sys-corner-small, 8px);\n        background: var(--mat-sys-surface-container);\n        display: flex; align-items: center; justify-content: center;\n        font-size: 16px; flex-shrink: 0;\n    }\n    .provider-logo.sendgrid { color: #1A82E2; }\n    .provider-logo.twilio { color: #F22F46; }\n    .provider-logo.gmail { color: #EA4335; }\n    .provider-logo.msgraph { color: #0078D4; }\n\n    .provider-info { flex: 1; }\n    .provider-name { font-size: 13px; font-weight: 600; color: var(--mat-sys-on-surface); }\n    .provider-type { font-size: 11px; color: var(--mat-sys-on-surface-variant); }\n\n    .provider-health-bar {\n        width: 80px; height: 6px;\n        background: var(--mat-sys-surface-container-high);\n        border-radius: 3px; overflow: hidden;\n    }\n    .provider-health-fill {\n        height: 100%; border-radius: 3px;\n        transition: width 0.4s ease;\n    }\n    .provider-health-fill.excellent { background: #1b873f; }\n    .provider-health-fill.good { background: #66bb6a; }\n    .provider-health-fill.warning { background: #9a6700; }\n    .provider-health-fill.critical { background: #cf222e; }\n\n    .provider-rate {\n        font-size: 12px; font-weight: 700;\n        min-width: 44px; text-align: right;\n    }\n    .provider-rate.excellent { color: #1b873f; }\n    .provider-rate.good { color: #66bb6a; }\n    .provider-rate.warning { color: #9a6700; }\n    .provider-rate.critical { color: #cf222e; }\n\n    /* CHANNEL BREAKDOWN */\n    .channel-breakdown { display: flex; flex-direction: column; }\n    .channel-row {\n        display: flex; align-items: center; gap: 12px;\n        padding: 14px 20px;\n        border-bottom: 1px solid var(--mat-sys-surface-container);\n    }\n    .channel-row:last-child { border-bottom: none; }\n    .channel-icon {\n        width: 32px; height: 32px;\n        border-radius: var(--mat-sys-corner-small, 8px);\n        display: flex; align-items: center; justify-content: center;\n        font-size: 13px; flex-shrink: 0;\n    }\n    .channel-icon.email { background: var(--mat-sys-primary-container); color: var(--mat-sys-primary); }\n    .channel-icon.sms { background: #e8f5e9; color: #2e7d32; }\n\n    .channel-info { flex: 1; }\n    .channel-name { font-size: 12px; font-weight: 600; color: var(--mat-sys-on-surface); }\n    .channel-count { font-size: 11px; color: var(--mat-sys-on-surface-variant); }\n\n    .channel-bar-wrapper {\n        width: 100px; height: 6px;\n        background: var(--mat-sys-surface-container-high);\n        border-radius: 3px; overflow: hidden;\n    }\n    .channel-bar-fill { height: 100%; border-radius: 3px; }\n    .channel-pct {\n        font-size: 12px; font-weight: 700;\n        color: var(--mat-sys-on-surface);\n        min-width: 36px; text-align: right;\n    }\n\n    /* EMPTY STATE */\n    .empty-state {\n        display: flex; flex-direction: column;\n        align-items: center; justify-content: center;\n        padding: 40px 0; color: var(--mat-sys-on-surface-variant);\n    }\n    .empty-state i { font-size: 2rem; margin-bottom: 12px; opacity: 0.5; }\n    .empty-state p { margin: 0; font-size: 13px; }\n\n    @media (max-width: 1200px) {\n        .kpi-strip { grid-template-columns: repeat(2, 1fr); }\n        .content-grid { grid-template-columns: 1fr; }\n    }\n  "] }]
+    `, styles: ["\n    /* ============================================================ */\n    /* MD3 MONITOR RESOURCE                                        */\n    /* ============================================================ */\n    .monitor-wrapper {\n        height: 100%;\n        overflow-y: auto;\n        background: var(--mat-sys-surface-container);\n    }\n    .monitor-container {\n        padding: 24px;\n        min-height: 100%;\n        max-width: 1600px;\n        margin: 0 auto;\n    }\n\n    /* KPI STRIP */\n    .kpi-strip {\n        display: grid;\n        grid-template-columns: repeat(4, 1fr);\n        gap: 16px;\n        margin-bottom: 24px;\n    }\n    .kpi-card {\n        background: var(--mat-sys-surface-container-lowest);\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: var(--mat-sys-corner-medium, 12px);\n        padding: 20px;\n        display: flex;\n        align-items: flex-start;\n        gap: 16px;\n        transition: all 0.15s ease;\n        position: relative;\n        overflow: hidden;\n    }\n    .kpi-card:hover {\n        box-shadow: var(--mat-sys-elevation-1);\n        border-color: var(--mat-sys-outline);\n    }\n    .kpi-card::before {\n        content: '';\n        position: absolute;\n        top: 0; left: 0; right: 0;\n        height: 3px;\n    }\n    .kpi-card.sent::before { background: var(--mat-sys-primary); }\n    .kpi-card.delivered::before { background: #1b873f; }\n    .kpi-card.pending::before { background: #9a6700; }\n    .kpi-card.failed::before { background: #cf222e; }\n\n    .kpi-icon {\n        width: 44px; height: 44px;\n        border-radius: var(--mat-sys-corner-medium, 12px);\n        display: flex; align-items: center; justify-content: center;\n        font-size: 16px; flex-shrink: 0;\n    }\n    .kpi-card.sent .kpi-icon { background: var(--mat-sys-primary-container); color: var(--mat-sys-primary); }\n    .kpi-card.delivered .kpi-icon { background: #d4f8e0; color: #1b873f; }\n    .kpi-card.pending .kpi-icon { background: #fff0c7; color: #9a6700; }\n    .kpi-card.failed .kpi-icon { background: #ffdce0; color: #cf222e; }\n\n    .kpi-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }\n    .kpi-label {\n        font-size: 11px; font-weight: 600;\n        text-transform: uppercase; letter-spacing: 0.5px;\n        color: var(--mat-sys-on-surface-variant);\n    }\n    .kpi-value {\n        font-size: 28px; font-weight: 800;\n        color: var(--mat-sys-on-surface);\n        letter-spacing: -0.02em; line-height: 1.1;\n    }\n    .kpi-delta {\n        display: inline-flex; align-items: center;\n        gap: 4px; font-size: 11px; font-weight: 600;\n        margin-top: 4px; padding: 2px 8px;\n        border-radius: 10px; width: fit-content;\n    }\n    .kpi-delta.up { background: #d4f8e0; color: #1b873f; }\n    .kpi-delta.down { background: #ffdce0; color: #cf222e; }\n    .kpi-delta.neutral { background: var(--mat-sys-surface-container); color: var(--mat-sys-on-surface-variant); }\n\n    .delivery-bar {\n        height: 6px; margin-top: 10px;\n        background: var(--mat-sys-surface-container-high);\n        border-radius: 3px; overflow: hidden;\n    }\n    .delivery-fill {\n        height: 100%; border-radius: 3px;\n        background: #1b873f; transition: width 0.6s ease;\n    }\n\n    /* CONTENT GRID */\n    .content-grid {\n        display: grid;\n        grid-template-columns: 1.6fr 1fr;\n        gap: 16px;\n        margin-bottom: 16px;\n    }\n\n    .card {\n        background: var(--mat-sys-surface-container-lowest);\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: var(--mat-sys-corner-medium, 12px);\n        overflow: hidden;\n    }\n    .card-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 16px 20px 12px;\n        border-bottom: 1px solid var(--mat-sys-outline-variant);\n    }\n    .card-header h3 {\n        font-size: 13px; font-weight: 700;\n        color: var(--mat-sys-on-surface);\n        display: flex; align-items: center; gap: 8px;\n        margin: 0;\n    }\n    .card-header h3 i {\n        color: var(--mat-sys-on-surface-variant);\n        font-size: 12px;\n    }\n    .card-body { padding: 16px 20px; }\n    .card-body.no-padding { padding: 0; }\n\n    .chart-container-inner {\n        padding: 16px 20px;\n        min-height: 300px;\n    }\n\n    /* ACTIVITY FEED */\n    .activity-feed { max-height: 370px; overflow-y: auto; }\n    .activity-item {\n        display: flex; align-items: center; gap: 12px;\n        padding: 12px 20px;\n        border-bottom: 1px solid var(--mat-sys-surface-container);\n        transition: background 0.15s ease; cursor: pointer;\n    }\n    .activity-item:last-child { border-bottom: none; }\n    .activity-item:hover { background: var(--mat-sys-surface-container-low); }\n\n    .activity-icon {\n        width: 34px; height: 34px;\n        border-radius: var(--mat-sys-corner-small, 8px);\n        display: flex; align-items: center; justify-content: center;\n        font-size: 12px; flex-shrink: 0;\n    }\n    .activity-icon.email { background: var(--mat-sys-primary-container); color: var(--mat-sys-primary); }\n    .activity-icon.sms { background: #e8f5e9; color: #2e7d32; }\n    .activity-icon.error { background: #ffdce0; color: #cf222e; }\n\n    .activity-body { flex: 1; min-width: 0; }\n    .activity-title {\n        font-size: 12px; font-weight: 600;\n        color: var(--mat-sys-on-surface);\n        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n        display: block;\n    }\n    .activity-meta {\n        font-size: 11px; color: var(--mat-sys-on-surface-variant); margin-top: 1px;\n        display: block;\n    }\n    .activity-status {\n        font-size: 10px; font-weight: 700;\n        text-transform: uppercase; letter-spacing: 0.3px;\n        padding: 3px 8px;\n        border-radius: var(--mat-sys-corner-extra-small, 4px);\n        flex-shrink: 0;\n    }\n    .activity-status.complete { background: #d4f8e0; color: #1b873f; }\n    .activity-status.failed { background: #ffdce0; color: #cf222e; }\n    .activity-status.pending { background: #fff0c7; color: #9a6700; }\n\n    /* PROVIDER HEALTH */\n    .provider-health-list { display: flex; flex-direction: column; }\n    .provider-row {\n        display: flex; align-items: center; gap: 12px;\n        padding: 14px 20px;\n        border-bottom: 1px solid var(--mat-sys-surface-container);\n        transition: background 0.15s ease;\n    }\n    .provider-row:last-child { border-bottom: none; }\n    .provider-row:hover { background: var(--mat-sys-surface-container-low); }\n\n    .provider-status-dot {\n        width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;\n        background: var(--mat-sys-outline);\n    }\n    .provider-status-dot.active { background: #1b873f; }\n\n    .provider-logo {\n        width: 36px; height: 36px;\n        border-radius: var(--mat-sys-corner-small, 8px);\n        background: var(--mat-sys-surface-container);\n        display: flex; align-items: center; justify-content: center;\n        font-size: 16px; flex-shrink: 0;\n    }\n    .provider-logo.sendgrid { color: #1A82E2; }\n    .provider-logo.twilio { color: #F22F46; }\n    .provider-logo.gmail { color: #EA4335; }\n    .provider-logo.msgraph { color: #0078D4; }\n\n    .provider-info { flex: 1; }\n    .provider-name { font-size: 13px; font-weight: 600; color: var(--mat-sys-on-surface); }\n    .provider-type { font-size: 11px; color: var(--mat-sys-on-surface-variant); }\n\n    .provider-health-bar {\n        width: 80px; height: 6px;\n        background: var(--mat-sys-surface-container-high);\n        border-radius: 3px; overflow: hidden;\n    }\n    .provider-health-fill {\n        height: 100%; border-radius: 3px;\n        transition: width 0.4s ease;\n    }\n    .provider-health-fill.excellent { background: #1b873f; }\n    .provider-health-fill.good { background: #66bb6a; }\n    .provider-health-fill.warning { background: #9a6700; }\n    .provider-health-fill.critical { background: #cf222e; }\n\n    .provider-rate {\n        font-size: 12px; font-weight: 700;\n        min-width: 44px; text-align: right;\n    }\n    .provider-rate.excellent { color: #1b873f; }\n    .provider-rate.good { color: #66bb6a; }\n    .provider-rate.warning { color: #9a6700; }\n    .provider-rate.critical { color: #cf222e; }\n\n    /* CHANNEL BREAKDOWN */\n    .channel-breakdown { display: flex; flex-direction: column; }\n    .channel-row {\n        display: flex; align-items: center; gap: 12px;\n        padding: 14px 20px;\n        border-bottom: 1px solid var(--mat-sys-surface-container);\n    }\n    .channel-row:last-child { border-bottom: none; }\n    .channel-icon {\n        width: 32px; height: 32px;\n        border-radius: var(--mat-sys-corner-small, 8px);\n        display: flex; align-items: center; justify-content: center;\n        font-size: 13px; flex-shrink: 0;\n    }\n    .channel-icon.email { background: var(--mat-sys-primary-container); color: var(--mat-sys-primary); }\n    .channel-icon.sms { background: #e8f5e9; color: #2e7d32; }\n\n    .channel-info { flex: 1; }\n    .channel-name { font-size: 12px; font-weight: 600; color: var(--mat-sys-on-surface); }\n    .channel-count { font-size: 11px; color: var(--mat-sys-on-surface-variant); }\n\n    .channel-bar-wrapper {\n        width: 100px; height: 6px;\n        background: var(--mat-sys-surface-container-high);\n        border-radius: 3px; overflow: hidden;\n    }\n    .channel-bar-fill { height: 100%; border-radius: 3px; }\n    .channel-pct {\n        font-size: 12px; font-weight: 700;\n        color: var(--mat-sys-on-surface);\n        min-width: 36px; text-align: right;\n    }\n\n    /* EMPTY STATE */\n    .empty-state {\n        display: flex; flex-direction: column;\n        align-items: center; justify-content: center;\n        padding: 40px 0; color: var(--mat-sys-on-surface-variant);\n    }\n    .empty-state i { font-size: 2rem; margin-bottom: 12px; opacity: 0.5; }\n    .empty-state p { margin: 0; font-size: 13px; }\n\n    @media (max-width: 1200px) {\n        .kpi-strip { grid-template-columns: repeat(2, 1fr); }\n        .content-grid { grid-template-columns: 1fr; }\n    }\n  "] }]
     }], () => [{ type: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CommunicationMonitorResourceComponent, { className: "CommunicationMonitorResourceComponent", filePath: "src/Communication/communication-monitor-resource.component.ts", lineNumber: 475 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CommunicationMonitorResourceComponent, { className: "CommunicationMonitorResourceComponent", filePath: "src/communication/communication-monitor-resource.component.ts", lineNumber: 479 }); })();
 //# sourceMappingURL=communication-monitor-resource.component.js.map