@memberjunction/ng-dashboards 5.34.1 → 5.36.0

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

@@ -11,18 +11,19 @@ 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_For_65_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 30)(1, "div", 38);
+import * as i3 from "@memberjunction/ng-ui-components";
+function CommunicationMonitorResourceComponent_For_70_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 32)(1, "div", 40);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 39)(4, "span", 40);
+    i0.ɵɵelementStart(3, "div", 41)(4, "span", 42);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 41);
+    i0.ɵɵelementStart(6, "span", 43);
     i0.ɵɵtext(7);
     i0.ɵɵpipe(8, "date");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "span", 42);
+    i0.ɵɵelementStart(9, "span", 44);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -41,29 +42,29 @@ function CommunicationMonitorResourceComponent_For_65_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", log_r1.Status, " ");
 } }
-function CommunicationMonitorResourceComponent_Conditional_66_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 31);
-    i0.ɵɵelement(1, "i", 43);
+function CommunicationMonitorResourceComponent_Conditional_71_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 33);
+    i0.ɵɵelement(1, "i", 45);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No recent activity");
     i0.ɵɵelementEnd()();
 } }
-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);
+function CommunicationMonitorResourceComponent_For_81_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 36);
+    i0.ɵɵelement(1, "div", 46);
+    i0.ɵɵelementStart(2, "div", 47);
     i0.ɵɵelement(3, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 46)(5, "div", 47);
+    i0.ɵɵelementStart(4, "div", 48)(5, "div", 49);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 48);
+    i0.ɵɵelementStart(7, "div", 50);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 49);
-    i0.ɵɵelement(10, "div", 50);
+    i0.ɵɵelementStart(9, "div", 51);
+    i0.ɵɵelement(10, "div", 52);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "span", 51);
+    i0.ɵɵelementStart(11, "span", 53);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -87,28 +88,28 @@ function CommunicationMonitorResourceComponent_For_76_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1("", provider_r3.SuccessRate, "%");
 } }
-function CommunicationMonitorResourceComponent_Conditional_77_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 31);
-    i0.ɵɵelement(1, "i", 52);
+function CommunicationMonitorResourceComponent_Conditional_82_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 33);
+    i0.ɵɵelement(1, "i", 54);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No providers configured");
     i0.ɵɵelementEnd()();
 } }
-function CommunicationMonitorResourceComponent_For_86_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 37)(1, "div", 53);
+function CommunicationMonitorResourceComponent_For_91_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 39)(1, "div", 55);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 54)(4, "div", 55);
+    i0.ɵɵelementStart(3, "div", 56)(4, "div", 57);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 56);
+    i0.ɵɵelementStart(6, "div", 58);
     i0.ɵɵtext(7);
     i0.ɵɵpipe(8, "number");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 57);
-    i0.ɵɵelement(10, "div", 58);
+    i0.ɵɵelementStart(9, "div", 59);
+    i0.ɵɵelement(10, "div", 60);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "span", 59);
+    i0.ɵɵelementStart(11, "span", 61);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -126,9 +127,9 @@ function CommunicationMonitorResourceComponent_For_86_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("", channel_r4.Percentage, "%");
 } }
-function CommunicationMonitorResourceComponent_Conditional_87_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 31);
-    i0.ɵɵelement(1, "i", 35);
+function CommunicationMonitorResourceComponent_Conditional_92_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 33);
+    i0.ɵɵelement(1, "i", 37);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No channel data available");
     i0.ɵɵelementEnd()();
@@ -370,95 +371,104 @@ 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"]], 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);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CommunicationMonitorResourceComponent, selectors: [["mj-communication-monitor-resource"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 93, vars: 35, consts: [["Title", "Monitor", "Icon", "fa-solid fa-chart-line", "Subtitle", "Live delivery health, provider status, and channel breakdown"], ["actions", ""], ["mjButton", "", "variant", "secondary", "size", "sm", "title", "Refresh", 3, "click", "disabled"], [1, "fa-solid", "fa-rotate"], [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, "mj-page-layout")(1, "mj-page-header", 0)(2, "div", 1)(3, "button", 2);
+            i0.ɵɵlistener("click", function CommunicationMonitorResourceComponent_Template_button_click_3_listener() { return ctx.loadData(); });
+            i0.ɵɵelement(4, "i", 3);
+            i0.ɵɵtext(5, " Refresh ");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(6, "mj-page-body")(7, "div", 4)(8, "div", 5)(9, "div", 6);
+            i0.ɵɵelement(10, "i", 7);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(6, "div", 6)(7, "span", 7);
-            i0.ɵɵtext(8, "Total Sent");
+            i0.ɵɵelementStart(11, "div", 8)(12, "span", 9);
+            i0.ɵɵtext(13, "Total Sent");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(9, "span", 8);
-            i0.ɵɵtext(10);
-            i0.ɵɵpipe(11, "number");
+            i0.ɵɵelementStart(14, "span", 10);
+            i0.ɵɵtext(15);
+            i0.ɵɵpipe(16, "number");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(12, "span", 9);
-            i0.ɵɵelement(13, "i", 10);
-            i0.ɵɵtext(14, " Last 24 hours ");
+            i0.ɵɵelementStart(17, "span", 11);
+            i0.ɵɵelement(18, "i", 12);
+            i0.ɵɵtext(19, " Last 24 hours ");
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(15, "div", 11)(16, "div", 4);
-            i0.ɵɵelement(17, "i", 12);
+            i0.ɵɵelementStart(20, "div", 13)(21, "div", 6);
+            i0.ɵɵelement(22, "i", 14);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(18, "div", 6)(19, "span", 7);
-            i0.ɵɵtext(20, "Delivery Rate");
+            i0.ɵɵelementStart(23, "div", 8)(24, "span", 9);
+            i0.ɵɵtext(25, "Delivery Rate");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(21, "span", 8);
-            i0.ɵɵtext(22);
+            i0.ɵɵelementStart(26, "span", 10);
+            i0.ɵɵtext(27);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(23, "div", 13);
-            i0.ɵɵelement(24, "div", 14);
+            i0.ɵɵelementStart(28, "div", 15);
+            i0.ɵɵelement(29, "div", 16);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(25, "div", 15)(26, "div", 4);
-            i0.ɵɵelement(27, "i", 16);
+            i0.ɵɵelementStart(30, "div", 17)(31, "div", 6);
+            i0.ɵɵelement(32, "i", 18);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(28, "div", 6)(29, "span", 7);
-            i0.ɵɵtext(30, "Pending");
+            i0.ɵɵelementStart(33, "div", 8)(34, "span", 9);
+            i0.ɵɵtext(35, "Pending");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(31, "span", 8);
-            i0.ɵɵtext(32);
-            i0.ɵɵpipe(33, "number");
+            i0.ɵɵelementStart(36, "span", 10);
+            i0.ɵɵtext(37);
+            i0.ɵɵpipe(38, "number");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(34, "span", 17);
-            i0.ɵɵelement(35, "i", 18);
-            i0.ɵɵtext(36, " Awaiting provider ");
+            i0.ɵɵelementStart(39, "span", 19);
+            i0.ɵɵelement(40, "i", 20);
+            i0.ɵɵtext(41, " Awaiting provider ");
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(37, "div", 19)(38, "div", 4);
-            i0.ɵɵelement(39, "i", 20);
+            i0.ɵɵelementStart(42, "div", 21)(43, "div", 6);
+            i0.ɵɵelement(44, "i", 22);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(40, "div", 6)(41, "span", 7);
-            i0.ɵɵtext(42, "Failed");
+            i0.ɵɵelementStart(45, "div", 8)(46, "span", 9);
+            i0.ɵɵtext(47, "Failed");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(43, "span", 8);
-            i0.ɵɵtext(44);
-            i0.ɵɵpipe(45, "number");
+            i0.ɵɵelementStart(48, "span", 10);
+            i0.ɵɵtext(49);
+            i0.ɵɵpipe(50, "number");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(46, "span", 9);
-            i0.ɵɵelement(47, "i", 10);
-            i0.ɵɵtext(48);
+            i0.ɵɵelementStart(51, "span", 11);
+            i0.ɵɵelement(52, "i", 12);
+            i0.ɵɵtext(53);
             i0.ɵɵelementEnd()()()();
-            i0.ɵɵelementStart(49, "div", 21)(50, "div", 22)(51, "div", 23)(52, "h3");
-            i0.ɵɵelement(53, "i", 24);
-            i0.ɵɵtext(54, " Delivery Volume");
+            i0.ɵɵelementStart(54, "div", 23)(55, "div", 24)(56, "div", 25)(57, "h3");
+            i0.ɵɵelement(58, "i", 26);
+            i0.ɵɵtext(59, " Delivery Volume");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(55, "div", 25);
-            i0.ɵɵelement(56, "app-time-series-chart", 26);
+            i0.ɵɵelementStart(60, "div", 27);
+            i0.ɵɵelement(61, "app-time-series-chart", 28);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(57, "div", 22)(58, "div", 23)(59, "h3");
-            i0.ɵɵelement(60, "i", 27);
-            i0.ɵɵtext(61, " Recent Activity");
+            i0.ɵɵelementStart(62, "div", 24)(63, "div", 25)(64, "h3");
+            i0.ɵɵelement(65, "i", 29);
+            i0.ɵɵtext(66, " Recent Activity");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(62, "div", 28)(63, "div", 29);
-            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.ɵɵelementStart(67, "div", 30)(68, "div", 31);
+            i0.ɵɵrepeaterCreate(69, CommunicationMonitorResourceComponent_For_70_Template, 11, 11, "div", 32, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵconditionalCreate(71, CommunicationMonitorResourceComponent_Conditional_71_Template, 4, 0, "div", 33);
             i0.ɵɵelementEnd()()()();
-            i0.ɵɵelementStart(67, "div", 21)(68, "div", 22)(69, "div", 23)(70, "h3");
-            i0.ɵɵelement(71, "i", 32);
-            i0.ɵɵtext(72, " Provider Health");
+            i0.ɵɵelementStart(72, "div", 23)(73, "div", 24)(74, "div", 25)(75, "h3");
+            i0.ɵɵelement(76, "i", 34);
+            i0.ɵɵtext(77, " Provider Health");
             i0.ɵɵelementEnd()();
-            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.ɵɵelementStart(78, "div", 30)(79, "div", 35);
+            i0.ɵɵrepeaterCreate(80, CommunicationMonitorResourceComponent_For_81_Template, 13, 13, "div", 36, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵconditionalCreate(82, CommunicationMonitorResourceComponent_Conditional_82_Template, 4, 0, "div", 33);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(78, "div", 22)(79, "div", 23)(80, "h3");
-            i0.ɵɵelement(81, "i", 35);
-            i0.ɵɵtext(82, " Channel Breakdown");
+            i0.ɵɵelementStart(83, "div", 24)(84, "div", 25)(85, "h3");
+            i0.ɵɵelement(86, "i", 37);
+            i0.ɵɵtext(87, " Channel Breakdown");
             i0.ɵɵelementEnd()();
-            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.ɵɵelementStart(88, "div", 30)(89, "div", 38);
+            i0.ɵɵrepeaterCreate(90, CommunicationMonitorResourceComponent_For_91_Template, 13, 12, "div", 39, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵconditionalCreate(92, CommunicationMonitorResourceComponent_Conditional_92_Template, 4, 0, "div", 33);
             i0.ɵɵelementEnd()()()()()();
         } if (rf & 2) {
-            i0.ɵɵadvance(10);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(11, 26, ctx.stats.totalSent));
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("disabled", ctx.isLoading);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("spinning", ctx.isLoading);
+            i0.ɵɵadvance(11);
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(16, 29, ctx.stats.totalSent));
             i0.ɵɵadvance(2);
             i0.ɵɵclassMap(ctx.stats.totalSent > 0 ? "up" : "neutral");
             i0.ɵɵadvance();
@@ -468,9 +478,9 @@ let CommunicationMonitorResourceComponent = class CommunicationMonitorResourceCo
             i0.ɵɵadvance(2);
             i0.ɵɵstyleProp("width", ctx.stats.deliveryRate, "%");
             i0.ɵɵadvance(8);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(33, 28, ctx.stats.pending));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(38, 31, ctx.stats.pending));
             i0.ɵɵadvance(12);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(45, 30, ctx.stats.failed));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(50, 33, ctx.stats.failed));
             i0.ɵɵadvance(2);
             i0.ɵɵclassMap(ctx.stats.failed > 0 ? "down" : "neutral");
             i0.ɵɵadvance();
@@ -482,16 +492,16 @@ let CommunicationMonitorResourceComponent = class CommunicationMonitorResourceCo
             i0.ɵɵadvance(8);
             i0.ɵɵrepeater(ctx.recentLogs);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.recentLogs.length === 0 ? 66 : -1);
+            i0.ɵɵconditional(ctx.recentLogs.length === 0 ? 71 : -1);
             i0.ɵɵadvance(9);
             i0.ɵɵrepeater(ctx.providerHealth);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.providerHealth.length === 0 ? 77 : -1);
+            i0.ɵɵconditional(ctx.providerHealth.length === 0 ? 82 : -1);
             i0.ɵɵadvance(8);
             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: [".monitor-wrapper[_ngcontent-%COMP%] {\n        height: 100%;\n        overflow-y: auto;\n        background: var(--mj-bg-surface);\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(--mj-bg-surface-card);\n        border: 1px solid var(--mj-border-default);\n        border-radius: 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: 0 2px 8px var(--mj-shadow-md);\n        border-color: var(--mj-border-strong);\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(--mj-brand-primary); }\n    .kpi-card.delivered[_ngcontent-%COMP%]::before { background: var(--mj-status-success); }\n    .kpi-card.pending[_ngcontent-%COMP%]::before { background: var(--mj-status-warning); }\n    .kpi-card.failed[_ngcontent-%COMP%]::before { background: var(--mj-status-error); }\n\n    .kpi-icon[_ngcontent-%COMP%] {\n        width: 44px; height: 44px;\n        border-radius: 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%] {\n        background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n        color: var(--mj-brand-primary);\n    }\n    .kpi-card.delivered[_ngcontent-%COMP%]   .kpi-icon[_ngcontent-%COMP%] {\n        background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-success);\n    }\n    .kpi-card.pending[_ngcontent-%COMP%]   .kpi-icon[_ngcontent-%COMP%] {\n        background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-warning);\n    }\n    .kpi-card.failed[_ngcontent-%COMP%]   .kpi-icon[_ngcontent-%COMP%] {\n        background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-error);\n    }\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(--mj-text-muted);\n    }\n    .kpi-value[_ngcontent-%COMP%] {\n        font-size: 28px; font-weight: 800;\n        color: var(--mj-text-primary);\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%] {\n        background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-success);\n    }\n    .kpi-delta.down[_ngcontent-%COMP%] {\n        background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-error);\n    }\n    .kpi-delta.neutral[_ngcontent-%COMP%] {\n        background: var(--mj-bg-surface-sunken);\n        color: var(--mj-text-muted);\n    }\n\n    .delivery-bar[_ngcontent-%COMP%] {\n        height: 6px; margin-top: 10px;\n        background: var(--mj-bg-surface-sunken);\n        border-radius: 3px; overflow: hidden;\n    }\n    .delivery-fill[_ngcontent-%COMP%] {\n        height: 100%; border-radius: 3px;\n        background: var(--mj-status-success); 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(--mj-bg-surface-card);\n        border: 1px solid var(--mj-border-default);\n        border-radius: 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(--mj-border-default);\n    }\n    .card-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n        font-size: 13px; font-weight: 700;\n        color: var(--mj-text-primary);\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(--mj-text-muted);\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(--mj-border-default);\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(--mj-bg-surface-sunken); }\n\n    .activity-icon[_ngcontent-%COMP%] {\n        width: 34px; height: 34px;\n        border-radius: 8px;\n        display: flex; align-items: center; justify-content: center;\n        font-size: 12px; flex-shrink: 0;\n    }\n    .activity-icon.email[_ngcontent-%COMP%] {\n        background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n        color: var(--mj-brand-primary);\n    }\n    .activity-icon.sms[_ngcontent-%COMP%] {\n        background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-success);\n    }\n    .activity-icon.error[_ngcontent-%COMP%] {\n        background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-error);\n    }\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(--mj-text-primary);\n        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n        display: block;\n    }\n    .activity-meta[_ngcontent-%COMP%] {\n        font-size: 11px; color: var(--mj-text-muted); 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: 4px;\n        flex-shrink: 0;\n    }\n    .activity-status.complete[_ngcontent-%COMP%] {\n        background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-success);\n    }\n    .activity-status.failed[_ngcontent-%COMP%] {\n        background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-error);\n    }\n    .activity-status.pending[_ngcontent-%COMP%] {\n        background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-warning);\n    }\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(--mj-border-default);\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(--mj-bg-surface-sunken); }\n\n    .provider-status-dot[_ngcontent-%COMP%] {\n        width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;\n        background: var(--mj-border-strong);\n    }\n    .provider-status-dot.active[_ngcontent-%COMP%] { background: var(--mj-status-success); }\n\n    .provider-logo[_ngcontent-%COMP%] {\n        width: 36px; height: 36px;\n        border-radius: 8px;\n        background: var(--mj-bg-surface-sunken);\n        display: flex; align-items: center; justify-content: center;\n        font-size: 16px; flex-shrink: 0;\n    }\n    .provider-logo.sendgrid[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n    .provider-logo.twilio[_ngcontent-%COMP%] { color: var(--mj-status-error); }\n    .provider-logo.gmail[_ngcontent-%COMP%] { color: var(--mj-status-error); }\n    .provider-logo.msgraph[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n\n    .provider-info[_ngcontent-%COMP%] { flex: 1; }\n    .provider-name[_ngcontent-%COMP%] { font-size: 13px; font-weight: 600; color: var(--mj-text-primary); }\n    .provider-type[_ngcontent-%COMP%] { font-size: 11px; color: var(--mj-text-muted); }\n\n    .provider-health-bar[_ngcontent-%COMP%] {\n        width: 80px; height: 6px;\n        background: var(--mj-bg-surface-sunken);\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: var(--mj-status-success); }\n    .provider-health-fill.good[_ngcontent-%COMP%] { background: var(--mj-status-success); }\n    .provider-health-fill.warning[_ngcontent-%COMP%] { background: var(--mj-status-warning); }\n    .provider-health-fill.critical[_ngcontent-%COMP%] { background: var(--mj-status-error); }\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: var(--mj-status-success); }\n    .provider-rate.good[_ngcontent-%COMP%] { color: var(--mj-status-success); }\n    .provider-rate.warning[_ngcontent-%COMP%] { color: var(--mj-status-warning); }\n    .provider-rate.critical[_ngcontent-%COMP%] { color: var(--mj-status-error); }\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(--mj-border-default);\n    }\n    .channel-row[_ngcontent-%COMP%]:last-child { border-bottom: none; }\n    .channel-icon[_ngcontent-%COMP%] {\n        width: 32px; height: 32px;\n        border-radius: 8px;\n        display: flex; align-items: center; justify-content: center;\n        font-size: 13px; flex-shrink: 0;\n    }\n    .channel-icon.email[_ngcontent-%COMP%] {\n        background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n        color: var(--mj-brand-primary);\n    }\n    .channel-icon.sms[_ngcontent-%COMP%] {\n        background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-success);\n    }\n\n    .channel-info[_ngcontent-%COMP%] { flex: 1; }\n    .channel-name[_ngcontent-%COMP%] { font-size: 12px; font-weight: 600; color: var(--mj-text-primary); }\n    .channel-count[_ngcontent-%COMP%] { font-size: 11px; color: var(--mj-text-muted); }\n\n    .channel-bar-wrapper[_ngcontent-%COMP%] {\n        width: 100px; height: 6px;\n        background: var(--mj-bg-surface-sunken);\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(--mj-text-primary);\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(--mj-text-muted);\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.ɵɵconditional(ctx.channelBreakdown.length === 0 ? 92 : -1);
+        } }, dependencies: [i1.NgClass, i2.TimeSeriesChartComponent, i3.MJButtonDirective, i3.MJPageHeaderComponent, i3.MJPageLayoutComponent, i3.MJPageBodyComponent, i1.DecimalPipe, i1.DatePipe], styles: ["\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(--mj-bg-surface-card);\n        border: 1px solid var(--mj-border-default);\n        border-radius: 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: 0 2px 8px var(--mj-shadow-md);\n        border-color: var(--mj-border-strong);\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(--mj-brand-primary); }\n    .kpi-card.delivered[_ngcontent-%COMP%]::before { background: var(--mj-status-success); }\n    .kpi-card.pending[_ngcontent-%COMP%]::before { background: var(--mj-status-warning); }\n    .kpi-card.failed[_ngcontent-%COMP%]::before { background: var(--mj-status-error); }\n\n    .kpi-icon[_ngcontent-%COMP%] {\n        width: 44px; height: 44px;\n        border-radius: 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%] {\n        background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n        color: var(--mj-brand-primary);\n    }\n    .kpi-card.delivered[_ngcontent-%COMP%]   .kpi-icon[_ngcontent-%COMP%] {\n        background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-success);\n    }\n    .kpi-card.pending[_ngcontent-%COMP%]   .kpi-icon[_ngcontent-%COMP%] {\n        background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-warning);\n    }\n    .kpi-card.failed[_ngcontent-%COMP%]   .kpi-icon[_ngcontent-%COMP%] {\n        background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-error);\n    }\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(--mj-text-muted);\n    }\n    .kpi-value[_ngcontent-%COMP%] {\n        font-size: 28px; font-weight: 800;\n        color: var(--mj-text-primary);\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%] {\n        background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-success);\n    }\n    .kpi-delta.down[_ngcontent-%COMP%] {\n        background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-error);\n    }\n    .kpi-delta.neutral[_ngcontent-%COMP%] {\n        background: var(--mj-bg-surface-sunken);\n        color: var(--mj-text-muted);\n    }\n\n    .delivery-bar[_ngcontent-%COMP%] {\n        height: 6px; margin-top: 10px;\n        background: var(--mj-bg-surface-sunken);\n        border-radius: 3px; overflow: hidden;\n    }\n    .delivery-fill[_ngcontent-%COMP%] {\n        height: 100%; border-radius: 3px;\n        background: var(--mj-status-success); 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(--mj-bg-surface-card);\n        border: 1px solid var(--mj-border-default);\n        border-radius: 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(--mj-border-default);\n    }\n    .card-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n        font-size: 13px; font-weight: 700;\n        color: var(--mj-text-primary);\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(--mj-text-muted);\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(--mj-border-default);\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(--mj-bg-surface-sunken); }\n\n    .activity-icon[_ngcontent-%COMP%] {\n        width: 34px; height: 34px;\n        border-radius: 8px;\n        display: flex; align-items: center; justify-content: center;\n        font-size: 12px; flex-shrink: 0;\n    }\n    .activity-icon.email[_ngcontent-%COMP%] {\n        background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n        color: var(--mj-brand-primary);\n    }\n    .activity-icon.sms[_ngcontent-%COMP%] {\n        background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-success);\n    }\n    .activity-icon.error[_ngcontent-%COMP%] {\n        background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-error);\n    }\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(--mj-text-primary);\n        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n        display: block;\n    }\n    .activity-meta[_ngcontent-%COMP%] {\n        font-size: 11px; color: var(--mj-text-muted); 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: 4px;\n        flex-shrink: 0;\n    }\n    .activity-status.complete[_ngcontent-%COMP%] {\n        background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-success);\n    }\n    .activity-status.failed[_ngcontent-%COMP%] {\n        background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-error);\n    }\n    .activity-status.pending[_ngcontent-%COMP%] {\n        background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-warning);\n    }\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(--mj-border-default);\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(--mj-bg-surface-sunken); }\n\n    .provider-status-dot[_ngcontent-%COMP%] {\n        width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;\n        background: var(--mj-border-strong);\n    }\n    .provider-status-dot.active[_ngcontent-%COMP%] { background: var(--mj-status-success); }\n\n    .provider-logo[_ngcontent-%COMP%] {\n        width: 36px; height: 36px;\n        border-radius: 8px;\n        background: var(--mj-bg-surface-sunken);\n        display: flex; align-items: center; justify-content: center;\n        font-size: 16px; flex-shrink: 0;\n    }\n    .provider-logo.sendgrid[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n    .provider-logo.twilio[_ngcontent-%COMP%] { color: var(--mj-status-error); }\n    .provider-logo.gmail[_ngcontent-%COMP%] { color: var(--mj-status-error); }\n    .provider-logo.msgraph[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n\n    .provider-info[_ngcontent-%COMP%] { flex: 1; }\n    .provider-name[_ngcontent-%COMP%] { font-size: 13px; font-weight: 600; color: var(--mj-text-primary); }\n    .provider-type[_ngcontent-%COMP%] { font-size: 11px; color: var(--mj-text-muted); }\n\n    .provider-health-bar[_ngcontent-%COMP%] {\n        width: 80px; height: 6px;\n        background: var(--mj-bg-surface-sunken);\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: var(--mj-status-success); }\n    .provider-health-fill.good[_ngcontent-%COMP%] { background: var(--mj-status-success); }\n    .provider-health-fill.warning[_ngcontent-%COMP%] { background: var(--mj-status-warning); }\n    .provider-health-fill.critical[_ngcontent-%COMP%] { background: var(--mj-status-error); }\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: var(--mj-status-success); }\n    .provider-rate.good[_ngcontent-%COMP%] { color: var(--mj-status-success); }\n    .provider-rate.warning[_ngcontent-%COMP%] { color: var(--mj-status-warning); }\n    .provider-rate.critical[_ngcontent-%COMP%] { color: var(--mj-status-error); }\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(--mj-border-default);\n    }\n    .channel-row[_ngcontent-%COMP%]:last-child { border-bottom: none; }\n    .channel-icon[_ngcontent-%COMP%] {\n        width: 32px; height: 32px;\n        border-radius: 8px;\n        display: flex; align-items: center; justify-content: center;\n        font-size: 13px; flex-shrink: 0;\n    }\n    .channel-icon.email[_ngcontent-%COMP%] {\n        background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n        color: var(--mj-brand-primary);\n    }\n    .channel-icon.sms[_ngcontent-%COMP%] {\n        background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-success);\n    }\n\n    .channel-info[_ngcontent-%COMP%] { flex: 1; }\n    .channel-name[_ngcontent-%COMP%] { font-size: 12px; font-weight: 600; color: var(--mj-text-primary); }\n    .channel-count[_ngcontent-%COMP%] { font-size: 11px; color: var(--mj-text-muted); }\n\n    .channel-bar-wrapper[_ngcontent-%COMP%] {\n        width: 100px; height: 6px;\n        background: var(--mj-bg-surface-sunken);\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(--mj-text-primary);\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(--mj-text-muted);\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')
@@ -500,8 +510,19 @@ export { CommunicationMonitorResourceComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CommunicationMonitorResourceComponent, [{
         type: Component,
         args: [{ standalone: false, selector: 'mj-communication-monitor-resource', template: `
-    <div class="monitor-wrapper">
-      <div class="monitor-container">
+    <mj-page-layout>
+      <mj-page-header
+        Title="Monitor"
+        Icon="fa-solid fa-chart-line"
+        Subtitle="Live delivery health, provider status, and channel breakdown">
+        <div actions>
+          <button mjButton variant="secondary" size="sm" (click)="loadData()" [disabled]="isLoading" title="Refresh">
+            <i class="fa-solid fa-rotate" [class.spinning]="isLoading"></i> Refresh
+          </button>
+        </div>
+      </mj-page-header>
+
+      <mj-page-body>
         <!-- KPI STRIP -->
         <div class="kpi-strip">
           <div class="kpi-card sent">
@@ -660,9 +681,9 @@ export { CommunicationMonitorResourceComponent };
             </div>
           </div>
         </div>
-      </div>
-    </div>
-    `, styles: ["\n    .monitor-wrapper {\n        height: 100%;\n        overflow-y: auto;\n        background: var(--mj-bg-surface);\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(--mj-bg-surface-card);\n        border: 1px solid var(--mj-border-default);\n        border-radius: 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: 0 2px 8px var(--mj-shadow-md);\n        border-color: var(--mj-border-strong);\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(--mj-brand-primary); }\n    .kpi-card.delivered::before { background: var(--mj-status-success); }\n    .kpi-card.pending::before { background: var(--mj-status-warning); }\n    .kpi-card.failed::before { background: var(--mj-status-error); }\n\n    .kpi-icon {\n        width: 44px; height: 44px;\n        border-radius: 12px;\n        display: flex; align-items: center; justify-content: center;\n        font-size: 16px; flex-shrink: 0;\n    }\n    .kpi-card.sent .kpi-icon {\n        background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n        color: var(--mj-brand-primary);\n    }\n    .kpi-card.delivered .kpi-icon {\n        background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-success);\n    }\n    .kpi-card.pending .kpi-icon {\n        background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-warning);\n    }\n    .kpi-card.failed .kpi-icon {\n        background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-error);\n    }\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(--mj-text-muted);\n    }\n    .kpi-value {\n        font-size: 28px; font-weight: 800;\n        color: var(--mj-text-primary);\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 {\n        background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-success);\n    }\n    .kpi-delta.down {\n        background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-error);\n    }\n    .kpi-delta.neutral {\n        background: var(--mj-bg-surface-sunken);\n        color: var(--mj-text-muted);\n    }\n\n    .delivery-bar {\n        height: 6px; margin-top: 10px;\n        background: var(--mj-bg-surface-sunken);\n        border-radius: 3px; overflow: hidden;\n    }\n    .delivery-fill {\n        height: 100%; border-radius: 3px;\n        background: var(--mj-status-success); 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(--mj-bg-surface-card);\n        border: 1px solid var(--mj-border-default);\n        border-radius: 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(--mj-border-default);\n    }\n    .card-header h3 {\n        font-size: 13px; font-weight: 700;\n        color: var(--mj-text-primary);\n        display: flex; align-items: center; gap: 8px;\n        margin: 0;\n    }\n    .card-header h3 i {\n        color: var(--mj-text-muted);\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(--mj-border-default);\n        transition: background 0.15s ease; cursor: pointer;\n    }\n    .activity-item:last-child { border-bottom: none; }\n    .activity-item:hover { background: var(--mj-bg-surface-sunken); }\n\n    .activity-icon {\n        width: 34px; height: 34px;\n        border-radius: 8px;\n        display: flex; align-items: center; justify-content: center;\n        font-size: 12px; flex-shrink: 0;\n    }\n    .activity-icon.email {\n        background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n        color: var(--mj-brand-primary);\n    }\n    .activity-icon.sms {\n        background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-success);\n    }\n    .activity-icon.error {\n        background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-error);\n    }\n\n    .activity-body { flex: 1; min-width: 0; }\n    .activity-title {\n        font-size: 12px; font-weight: 600;\n        color: var(--mj-text-primary);\n        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n        display: block;\n    }\n    .activity-meta {\n        font-size: 11px; color: var(--mj-text-muted); 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: 4px;\n        flex-shrink: 0;\n    }\n    .activity-status.complete {\n        background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-success);\n    }\n    .activity-status.failed {\n        background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-error);\n    }\n    .activity-status.pending {\n        background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-warning);\n    }\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(--mj-border-default);\n        transition: background 0.15s ease;\n    }\n    .provider-row:last-child { border-bottom: none; }\n    .provider-row:hover { background: var(--mj-bg-surface-sunken); }\n\n    .provider-status-dot {\n        width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;\n        background: var(--mj-border-strong);\n    }\n    .provider-status-dot.active { background: var(--mj-status-success); }\n\n    .provider-logo {\n        width: 36px; height: 36px;\n        border-radius: 8px;\n        background: var(--mj-bg-surface-sunken);\n        display: flex; align-items: center; justify-content: center;\n        font-size: 16px; flex-shrink: 0;\n    }\n    .provider-logo.sendgrid { color: var(--mj-brand-primary); }\n    .provider-logo.twilio { color: var(--mj-status-error); }\n    .provider-logo.gmail { color: var(--mj-status-error); }\n    .provider-logo.msgraph { color: var(--mj-brand-primary); }\n\n    .provider-info { flex: 1; }\n    .provider-name { font-size: 13px; font-weight: 600; color: var(--mj-text-primary); }\n    .provider-type { font-size: 11px; color: var(--mj-text-muted); }\n\n    .provider-health-bar {\n        width: 80px; height: 6px;\n        background: var(--mj-bg-surface-sunken);\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: var(--mj-status-success); }\n    .provider-health-fill.good { background: var(--mj-status-success); }\n    .provider-health-fill.warning { background: var(--mj-status-warning); }\n    .provider-health-fill.critical { background: var(--mj-status-error); }\n\n    .provider-rate {\n        font-size: 12px; font-weight: 700;\n        min-width: 44px; text-align: right;\n    }\n    .provider-rate.excellent { color: var(--mj-status-success); }\n    .provider-rate.good { color: var(--mj-status-success); }\n    .provider-rate.warning { color: var(--mj-status-warning); }\n    .provider-rate.critical { color: var(--mj-status-error); }\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(--mj-border-default);\n    }\n    .channel-row:last-child { border-bottom: none; }\n    .channel-icon {\n        width: 32px; height: 32px;\n        border-radius: 8px;\n        display: flex; align-items: center; justify-content: center;\n        font-size: 13px; flex-shrink: 0;\n    }\n    .channel-icon.email {\n        background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n        color: var(--mj-brand-primary);\n    }\n    .channel-icon.sms {\n        background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-success);\n    }\n\n    .channel-info { flex: 1; }\n    .channel-name { font-size: 12px; font-weight: 600; color: var(--mj-text-primary); }\n    .channel-count { font-size: 11px; color: var(--mj-text-muted); }\n\n    .channel-bar-wrapper {\n        width: 100px; height: 6px;\n        background: var(--mj-bg-surface-sunken);\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(--mj-text-primary);\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(--mj-text-muted);\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  "] }]
+      </mj-page-body>
+    </mj-page-layout>
+    `, styles: ["\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(--mj-bg-surface-card);\n        border: 1px solid var(--mj-border-default);\n        border-radius: 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: 0 2px 8px var(--mj-shadow-md);\n        border-color: var(--mj-border-strong);\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(--mj-brand-primary); }\n    .kpi-card.delivered::before { background: var(--mj-status-success); }\n    .kpi-card.pending::before { background: var(--mj-status-warning); }\n    .kpi-card.failed::before { background: var(--mj-status-error); }\n\n    .kpi-icon {\n        width: 44px; height: 44px;\n        border-radius: 12px;\n        display: flex; align-items: center; justify-content: center;\n        font-size: 16px; flex-shrink: 0;\n    }\n    .kpi-card.sent .kpi-icon {\n        background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n        color: var(--mj-brand-primary);\n    }\n    .kpi-card.delivered .kpi-icon {\n        background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-success);\n    }\n    .kpi-card.pending .kpi-icon {\n        background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-warning);\n    }\n    .kpi-card.failed .kpi-icon {\n        background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-error);\n    }\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(--mj-text-muted);\n    }\n    .kpi-value {\n        font-size: 28px; font-weight: 800;\n        color: var(--mj-text-primary);\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 {\n        background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-success);\n    }\n    .kpi-delta.down {\n        background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-error);\n    }\n    .kpi-delta.neutral {\n        background: var(--mj-bg-surface-sunken);\n        color: var(--mj-text-muted);\n    }\n\n    .delivery-bar {\n        height: 6px; margin-top: 10px;\n        background: var(--mj-bg-surface-sunken);\n        border-radius: 3px; overflow: hidden;\n    }\n    .delivery-fill {\n        height: 100%; border-radius: 3px;\n        background: var(--mj-status-success); 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(--mj-bg-surface-card);\n        border: 1px solid var(--mj-border-default);\n        border-radius: 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(--mj-border-default);\n    }\n    .card-header h3 {\n        font-size: 13px; font-weight: 700;\n        color: var(--mj-text-primary);\n        display: flex; align-items: center; gap: 8px;\n        margin: 0;\n    }\n    .card-header h3 i {\n        color: var(--mj-text-muted);\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(--mj-border-default);\n        transition: background 0.15s ease; cursor: pointer;\n    }\n    .activity-item:last-child { border-bottom: none; }\n    .activity-item:hover { background: var(--mj-bg-surface-sunken); }\n\n    .activity-icon {\n        width: 34px; height: 34px;\n        border-radius: 8px;\n        display: flex; align-items: center; justify-content: center;\n        font-size: 12px; flex-shrink: 0;\n    }\n    .activity-icon.email {\n        background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n        color: var(--mj-brand-primary);\n    }\n    .activity-icon.sms {\n        background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-success);\n    }\n    .activity-icon.error {\n        background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-error);\n    }\n\n    .activity-body { flex: 1; min-width: 0; }\n    .activity-title {\n        font-size: 12px; font-weight: 600;\n        color: var(--mj-text-primary);\n        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n        display: block;\n    }\n    .activity-meta {\n        font-size: 11px; color: var(--mj-text-muted); 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: 4px;\n        flex-shrink: 0;\n    }\n    .activity-status.complete {\n        background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-success);\n    }\n    .activity-status.failed {\n        background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-error);\n    }\n    .activity-status.pending {\n        background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-warning);\n    }\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(--mj-border-default);\n        transition: background 0.15s ease;\n    }\n    .provider-row:last-child { border-bottom: none; }\n    .provider-row:hover { background: var(--mj-bg-surface-sunken); }\n\n    .provider-status-dot {\n        width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;\n        background: var(--mj-border-strong);\n    }\n    .provider-status-dot.active { background: var(--mj-status-success); }\n\n    .provider-logo {\n        width: 36px; height: 36px;\n        border-radius: 8px;\n        background: var(--mj-bg-surface-sunken);\n        display: flex; align-items: center; justify-content: center;\n        font-size: 16px; flex-shrink: 0;\n    }\n    .provider-logo.sendgrid { color: var(--mj-brand-primary); }\n    .provider-logo.twilio { color: var(--mj-status-error); }\n    .provider-logo.gmail { color: var(--mj-status-error); }\n    .provider-logo.msgraph { color: var(--mj-brand-primary); }\n\n    .provider-info { flex: 1; }\n    .provider-name { font-size: 13px; font-weight: 600; color: var(--mj-text-primary); }\n    .provider-type { font-size: 11px; color: var(--mj-text-muted); }\n\n    .provider-health-bar {\n        width: 80px; height: 6px;\n        background: var(--mj-bg-surface-sunken);\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: var(--mj-status-success); }\n    .provider-health-fill.good { background: var(--mj-status-success); }\n    .provider-health-fill.warning { background: var(--mj-status-warning); }\n    .provider-health-fill.critical { background: var(--mj-status-error); }\n\n    .provider-rate {\n        font-size: 12px; font-weight: 700;\n        min-width: 44px; text-align: right;\n    }\n    .provider-rate.excellent { color: var(--mj-status-success); }\n    .provider-rate.good { color: var(--mj-status-success); }\n    .provider-rate.warning { color: var(--mj-status-warning); }\n    .provider-rate.critical { color: var(--mj-status-error); }\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(--mj-border-default);\n    }\n    .channel-row:last-child { border-bottom: none; }\n    .channel-icon {\n        width: 32px; height: 32px;\n        border-radius: 8px;\n        display: flex; align-items: center; justify-content: center;\n        font-size: 13px; flex-shrink: 0;\n    }\n    .channel-icon.email {\n        background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n        color: var(--mj-brand-primary);\n    }\n    .channel-icon.sms {\n        background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-success);\n    }\n\n    .channel-info { flex: 1; }\n    .channel-name { font-size: 12px; font-weight: 600; color: var(--mj-text-primary); }\n    .channel-count { font-size: 11px; color: var(--mj-text-muted); }\n\n    .channel-bar-wrapper {\n        width: 100px; height: 6px;\n        background: var(--mj-bg-surface-sunken);\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(--mj-text-primary);\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(--mj-text-muted);\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: 521 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CommunicationMonitorResourceComponent, { className: "CommunicationMonitorResourceComponent", filePath: "src/Communication/communication-monitor-resource.component.ts", lineNumber: 520 }); })();
 //# sourceMappingURL=communication-monitor-resource.component.js.map