npm - @memberjunction/ng-dashboards - Versions diffs - 5.11.0 → 5.13.0 - Mend

@memberjunction/ng-dashboards 5.11.0 → 5.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (229) hide show

package/dist/Communication/communication-dashboard.component.js CHANGED Viewed

@@ -250,7 +250,7 @@ let CommunicationDashboardComponent = class CommunicationDashboardComponent exte
             i0.ɵɵclassProp("selected", ctx.activeTab === "settings");
             i0.ɵɵadvance(6);
             i0.ɵɵconditional((tmp_7_0 = ctx.activeTab) === "monitor" ? 47 : tmp_7_0 === "logs" ? 48 : tmp_7_0 === "providers" ? 49 : tmp_7_0 === "templates" ? 50 : tmp_7_0 === "runs" ? 51 : -1);
-        } }, dependencies: [i1.CommunicationMonitorResourceComponent, i2.CommunicationLogsResourceComponent, i3.CommunicationProvidersResourceComponent, i4.CommunicationRunsResourceComponent, i5.CommunicationTemplatesResourceComponent], styles: ["\n\n\n\n\n\n.communication-dashboard-container[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    width: 100%;\n    background: var(--mat-sys-surface-container);\n    color: var(--mat-sys-on-surface);\n    font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n    overflow: hidden;\n}\n\n\n\n\n\n\n\n.studio-toolbar[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 0 12px;\n    background: var(--mat-sys-surface-container-lowest);\n    border-bottom: 1px solid var(--mat-sys-outline-variant);\n    min-height: 48px;\n    gap: 8px;\n    flex-shrink: 0;\n}\n\n.toolbar-brand[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 0 8px;\n}\n\n.brand-icon[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    border-radius: var(--mat-sys-corner-small, 8px);\n    background: linear-gradient(135deg, var(--mat-sys-primary-container), color-mix(in srgb, var(--mat-sys-primary-container) 60%, var(--mat-sys-primary)));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mat-sys-primary);\n    font-size: 14px;\n}\n\n.brand-label[_ngcontent-%COMP%] {\n    font-weight: 700;\n    font-size: 14px;\n    color: var(--mat-sys-on-surface);\n    letter-spacing: -0.01em;\n}\n\n.toolbar-divider[_ngcontent-%COMP%] {\n    width: 1px;\n    height: 24px;\n    background: var(--mat-sys-outline-variant);\n    margin: 0 4px;\n}\n\n.toolbar-spacer[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.tb-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    border: 1px solid var(--mat-sys-outline-variant);\n    border-radius: var(--mat-sys-corner-extra-small, 4px);\n    background: var(--mat-sys-surface-container-lowest);\n    color: var(--mat-sys-on-surface-variant);\n    font-size: 12px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    font-family: inherit;\n}\n\n.tb-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mat-sys-surface-container-high);\n    border-color: var(--mat-sys-outline);\n    color: var(--mat-sys-on-surface);\n}\n\n.tb-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n}\n\n.spinning[_ngcontent-%COMP%] {\n    animation: _ngcontent-%COMP%_spin 1s linear infinite;\n}\n\n\n\n\n\n\n\n.dashboard-body[_ngcontent-%COMP%] {\n    display: flex;\n    flex: 1;\n    overflow: hidden;\n}\n\n\n\n\n\n\n\n.sidebar[_ngcontent-%COMP%] {\n    width: 220px;\n    background: var(--mat-sys-surface-container-lowest);\n    border-right: 1px solid var(--mat-sys-outline-variant);\n    padding: 12px 8px;\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    flex-shrink: 0;\n}\n\n.sidebar-section-label[_ngcontent-%COMP%] {\n    font-size: 10px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.8px;\n    color: var(--mat-sys-on-surface-variant);\n    padding: 12px 12px 6px;\n}\n\n.nav-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 12px;\n    border-radius: var(--mat-sys-corner-small, 8px);\n    cursor: pointer;\n    transition: all 0.15s ease;\n    color: var(--mat-sys-on-surface-variant);\n    font-size: 13px;\n    font-weight: 500;\n}\n\n.nav-item[_ngcontent-%COMP%]:hover {\n    background: var(--mat-sys-surface-container);\n    color: var(--mat-sys-on-surface);\n}\n\n.nav-item.selected[_ngcontent-%COMP%] {\n    background: var(--mat-sys-primary-container);\n    color: var(--mat-sys-on-primary-container);\n    font-weight: 600;\n}\n\n.nav-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    width: 18px;\n    text-align: center;\n    font-size: 13px;\n}\n\n.sidebar-footer[_ngcontent-%COMP%] {\n    margin-top: auto;\n    padding-top: 8px;\n    border-top: 1px solid var(--mat-sys-outline-variant);\n}\n\n\n\n\n\n\n\n.main-content[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n    background: var(--mat-sys-surface-container);\n}\n\n.tab-container[_ngcontent-%COMP%] {\n    height: 100%;\n}\n\n.tab-content[_ngcontent-%COMP%] {\n    height: 100%;\n}"], changeDetection: 0 });
+        } }, dependencies: [i1.CommunicationMonitorResourceComponent, i2.CommunicationLogsResourceComponent, i3.CommunicationProvidersResourceComponent, i4.CommunicationRunsResourceComponent, i5.CommunicationTemplatesResourceComponent], styles: [".communication-dashboard-container[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    width: 100%;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n    overflow: hidden;\n}\n\n\n\n.studio-toolbar[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 0 12px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n    min-height: 48px;\n    gap: 8px;\n    flex-shrink: 0;\n}\n\n.toolbar-brand[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 0 8px;\n}\n\n.brand-icon[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    border-radius: 8px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.brand-label[_ngcontent-%COMP%] {\n    font-weight: 700;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n    letter-spacing: -0.01em;\n}\n\n.toolbar-divider[_ngcontent-%COMP%] {\n    width: 1px;\n    height: 24px;\n    background: var(--mj-border-default);\n    margin: 0 4px;\n}\n\n.toolbar-spacer[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.tb-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 4px;\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-secondary);\n    font-size: 12px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    font-family: inherit;\n}\n\n.tb-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-border-strong);\n    color: var(--mj-text-primary);\n}\n\n.tb-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n}\n\n.spinning[_ngcontent-%COMP%] {\n    animation: _ngcontent-%COMP%_spin 1s linear infinite;\n}\n\n\n\n.dashboard-body[_ngcontent-%COMP%] {\n    display: flex;\n    flex: 1;\n    overflow: hidden;\n}\n\n\n\n.sidebar[_ngcontent-%COMP%] {\n    width: 220px;\n    background: var(--mj-bg-surface-card);\n    border-right: 1px solid var(--mj-border-default);\n    padding: 12px 8px;\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    flex-shrink: 0;\n}\n\n.sidebar-section-label[_ngcontent-%COMP%] {\n    font-size: 10px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.8px;\n    color: var(--mj-text-muted);\n    padding: 12px 12px 6px;\n}\n\n.nav-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 12px;\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n    font-weight: 500;\n}\n\n.nav-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-primary);\n}\n\n.nav-item.selected[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    font-weight: 600;\n}\n\n.nav-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    width: 18px;\n    text-align: center;\n    font-size: 13px;\n}\n\n.sidebar-footer[_ngcontent-%COMP%] {\n    margin-top: auto;\n    padding-top: 8px;\n    border-top: 1px solid var(--mj-border-default);\n}\n\n\n\n.main-content[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n    background: var(--mj-bg-surface);\n}\n\n.tab-container[_ngcontent-%COMP%] {\n    height: 100%;\n}\n\n.tab-content[_ngcontent-%COMP%] {\n    height: 100%;\n}"], changeDetection: 0 });
 };
 CommunicationDashboardComponent = __decorate([
     RegisterClass(BaseDashboard, 'CommunicationDashboard')
@@ -258,7 +258,7 @@ CommunicationDashboardComponent = __decorate([
 export { CommunicationDashboardComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CommunicationDashboardComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-communication-dashboard', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"communication-dashboard-container\">\n  <!-- TOOLBAR -->\n  <div class=\"studio-toolbar\">\n    <div class=\"toolbar-brand\">\n      <div class=\"brand-icon\"><i class=\"fa-solid fa-satellite-dish\"></i></div>\n      <span class=\"brand-label\">Communications</span>\n    </div>\n    <div class=\"toolbar-divider\"></div>\n    <div class=\"toolbar-spacer\"></div>\n    <button class=\"tb-btn\" (click)=\"onRefresh()\">\n      <i class=\"fa-solid fa-rotate\" [class.spinning]=\"isRefreshing\"></i> Refresh\n    </button>\n  </div>\n\n  <!-- BODY -->\n  <div class=\"dashboard-body\">\n    <!-- SIDEBAR -->\n    <div class=\"sidebar\">\n      <div class=\"sidebar-section-label\">Dashboard</div>\n      <div class=\"nav-item\" [class.selected]=\"activeTab === 'monitor'\"\n        (click)=\"onTabChange('monitor')\">\n        <i class=\"fa-solid fa-chart-line\"></i>\n        <span>Monitor</span>\n      </div>\n      <div class=\"nav-item\" [class.selected]=\"activeTab === 'logs'\"\n        (click)=\"onTabChange('logs')\">\n        <i class=\"fa-solid fa-list-ul\"></i>\n        <span>Message Logs</span>\n      </div>\n\n      <div class=\"sidebar-section-label\">Configuration</div>\n      <div class=\"nav-item\" [class.selected]=\"activeTab === 'providers'\"\n        (click)=\"onTabChange('providers')\">\n        <i class=\"fa-solid fa-server\"></i>\n        <span>Providers</span>\n      </div>\n      <div class=\"nav-item\" [class.selected]=\"activeTab === 'templates'\"\n        (click)=\"onTabChange('templates')\">\n        <i class=\"fa-solid fa-file-lines\"></i>\n        <span>Templates</span>\n      </div>\n\n      <div class=\"sidebar-section-label\">Operations</div>\n      <div class=\"nav-item\" [class.selected]=\"activeTab === 'runs'\"\n        (click)=\"onTabChange('runs')\">\n        <i class=\"fa-solid fa-play-circle\"></i>\n        <span>Bulk Runs</span>\n      </div>\n\n      <div class=\"sidebar-footer\">\n        <div class=\"nav-item\" [class.selected]=\"activeTab === 'settings'\"\n          (click)=\"onTabChange('settings')\">\n          <i class=\"fa-solid fa-gear\"></i>\n          <span>Settings</span>\n        </div>\n      </div>\n    </div>\n\n    <!-- MAIN CONTENT -->\n    <div class=\"main-content\">\n      <div class=\"tab-container\">\n        @switch (activeTab) {\n          @case ('monitor') {\n            <div class=\"tab-content\">\n              @if (hasVisited('monitor')) {\n                <mj-communication-monitor-resource></mj-communication-monitor-resource>\n              }\n            </div>\n          }\n          @case ('logs') {\n            <div class=\"tab-content\">\n              @if (hasVisited('logs')) {\n                <mj-communication-logs-resource></mj-communication-logs-resource>\n              }\n            </div>\n          }\n          @case ('providers') {\n            <div class=\"tab-content\">\n              @if (hasVisited('providers')) {\n                <mj-communication-providers-resource></mj-communication-providers-resource>\n              }\n            </div>\n          }\n          @case ('templates') {\n            <div class=\"tab-content\">\n              @if (hasVisited('templates')) {\n                <mj-communication-templates-resource></mj-communication-templates-resource>\n              }\n            </div>\n          }\n          @case ('runs') {\n            <div class=\"tab-content\">\n              @if (hasVisited('runs')) {\n                <mj-communication-runs-resource></mj-communication-runs-resource>\n              }\n            </div>\n          }\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["/* ============================================================ */\n/* MD3 COMMUNICATION DASHBOARD                                  */\n/* ============================================================ */\n.communication-dashboard-container {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    width: 100%;\n    background: var(--mat-sys-surface-container);\n    color: var(--mat-sys-on-surface);\n    font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n    overflow: hidden;\n}\n\n/* ============================================================ */\n/* TOOLBAR                                                      */\n/* ============================================================ */\n.studio-toolbar {\n    display: flex;\n    align-items: center;\n    padding: 0 12px;\n    background: var(--mat-sys-surface-container-lowest);\n    border-bottom: 1px solid var(--mat-sys-outline-variant);\n    min-height: 48px;\n    gap: 8px;\n    flex-shrink: 0;\n}\n\n.toolbar-brand {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 0 8px;\n}\n\n.brand-icon {\n    width: 32px;\n    height: 32px;\n    border-radius: var(--mat-sys-corner-small, 8px);\n    background: linear-gradient(135deg, var(--mat-sys-primary-container), color-mix(in srgb, var(--mat-sys-primary-container) 60%, var(--mat-sys-primary)));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mat-sys-primary);\n    font-size: 14px;\n}\n\n.brand-label {\n    font-weight: 700;\n    font-size: 14px;\n    color: var(--mat-sys-on-surface);\n    letter-spacing: -0.01em;\n}\n\n.toolbar-divider {\n    width: 1px;\n    height: 24px;\n    background: var(--mat-sys-outline-variant);\n    margin: 0 4px;\n}\n\n.toolbar-spacer {\n    flex: 1;\n}\n\n.tb-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    border: 1px solid var(--mat-sys-outline-variant);\n    border-radius: var(--mat-sys-corner-extra-small, 4px);\n    background: var(--mat-sys-surface-container-lowest);\n    color: var(--mat-sys-on-surface-variant);\n    font-size: 12px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    font-family: inherit;\n}\n\n.tb-btn:hover {\n    background: var(--mat-sys-surface-container-high);\n    border-color: var(--mat-sys-outline);\n    color: var(--mat-sys-on-surface);\n}\n\n.tb-btn i {\n    font-size: 12px;\n}\n\n@keyframes spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n}\n\n.spinning {\n    animation: spin 1s linear infinite;\n}\n\n/* ============================================================ */\n/* BODY LAYOUT                                                  */\n/* ============================================================ */\n.dashboard-body {\n    display: flex;\n    flex: 1;\n    overflow: hidden;\n}\n\n/* ============================================================ */\n/* SIDEBAR                                                      */\n/* ============================================================ */\n.sidebar {\n    width: 220px;\n    background: var(--mat-sys-surface-container-lowest);\n    border-right: 1px solid var(--mat-sys-outline-variant);\n    padding: 12px 8px;\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    flex-shrink: 0;\n}\n\n.sidebar-section-label {\n    font-size: 10px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.8px;\n    color: var(--mat-sys-on-surface-variant);\n    padding: 12px 12px 6px;\n}\n\n.nav-item {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 12px;\n    border-radius: var(--mat-sys-corner-small, 8px);\n    cursor: pointer;\n    transition: all 0.15s ease;\n    color: var(--mat-sys-on-surface-variant);\n    font-size: 13px;\n    font-weight: 500;\n}\n\n.nav-item:hover {\n    background: var(--mat-sys-surface-container);\n    color: var(--mat-sys-on-surface);\n}\n\n.nav-item.selected {\n    background: var(--mat-sys-primary-container);\n    color: var(--mat-sys-on-primary-container);\n    font-weight: 600;\n}\n\n.nav-item i {\n    width: 18px;\n    text-align: center;\n    font-size: 13px;\n}\n\n.sidebar-footer {\n    margin-top: auto;\n    padding-top: 8px;\n    border-top: 1px solid var(--mat-sys-outline-variant);\n}\n\n/* ============================================================ */\n/* MAIN CONTENT                                                 */\n/* ============================================================ */\n.main-content {\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n    background: var(--mat-sys-surface-container);\n}\n\n.tab-container {\n    height: 100%;\n}\n\n.tab-content {\n    height: 100%;\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-communication-dashboard', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"communication-dashboard-container\">\n  <!-- TOOLBAR -->\n  <div class=\"studio-toolbar\">\n    <div class=\"toolbar-brand\">\n      <div class=\"brand-icon\"><i class=\"fa-solid fa-satellite-dish\"></i></div>\n      <span class=\"brand-label\">Communications</span>\n    </div>\n    <div class=\"toolbar-divider\"></div>\n    <div class=\"toolbar-spacer\"></div>\n    <button class=\"tb-btn\" (click)=\"onRefresh()\">\n      <i class=\"fa-solid fa-rotate\" [class.spinning]=\"isRefreshing\"></i> Refresh\n    </button>\n  </div>\n\n  <!-- BODY -->\n  <div class=\"dashboard-body\">\n    <!-- SIDEBAR -->\n    <div class=\"sidebar\">\n      <div class=\"sidebar-section-label\">Dashboard</div>\n      <div class=\"nav-item\" [class.selected]=\"activeTab === 'monitor'\"\n        (click)=\"onTabChange('monitor')\">\n        <i class=\"fa-solid fa-chart-line\"></i>\n        <span>Monitor</span>\n      </div>\n      <div class=\"nav-item\" [class.selected]=\"activeTab === 'logs'\"\n        (click)=\"onTabChange('logs')\">\n        <i class=\"fa-solid fa-list-ul\"></i>\n        <span>Message Logs</span>\n      </div>\n\n      <div class=\"sidebar-section-label\">Configuration</div>\n      <div class=\"nav-item\" [class.selected]=\"activeTab === 'providers'\"\n        (click)=\"onTabChange('providers')\">\n        <i class=\"fa-solid fa-server\"></i>\n        <span>Providers</span>\n      </div>\n      <div class=\"nav-item\" [class.selected]=\"activeTab === 'templates'\"\n        (click)=\"onTabChange('templates')\">\n        <i class=\"fa-solid fa-file-lines\"></i>\n        <span>Templates</span>\n      </div>\n\n      <div class=\"sidebar-section-label\">Operations</div>\n      <div class=\"nav-item\" [class.selected]=\"activeTab === 'runs'\"\n        (click)=\"onTabChange('runs')\">\n        <i class=\"fa-solid fa-play-circle\"></i>\n        <span>Bulk Runs</span>\n      </div>\n\n      <div class=\"sidebar-footer\">\n        <div class=\"nav-item\" [class.selected]=\"activeTab === 'settings'\"\n          (click)=\"onTabChange('settings')\">\n          <i class=\"fa-solid fa-gear\"></i>\n          <span>Settings</span>\n        </div>\n      </div>\n    </div>\n\n    <!-- MAIN CONTENT -->\n    <div class=\"main-content\">\n      <div class=\"tab-container\">\n        @switch (activeTab) {\n          @case ('monitor') {\n            <div class=\"tab-content\">\n              @if (hasVisited('monitor')) {\n                <mj-communication-monitor-resource></mj-communication-monitor-resource>\n              }\n            </div>\n          }\n          @case ('logs') {\n            <div class=\"tab-content\">\n              @if (hasVisited('logs')) {\n                <mj-communication-logs-resource></mj-communication-logs-resource>\n              }\n            </div>\n          }\n          @case ('providers') {\n            <div class=\"tab-content\">\n              @if (hasVisited('providers')) {\n                <mj-communication-providers-resource></mj-communication-providers-resource>\n              }\n            </div>\n          }\n          @case ('templates') {\n            <div class=\"tab-content\">\n              @if (hasVisited('templates')) {\n                <mj-communication-templates-resource></mj-communication-templates-resource>\n              }\n            </div>\n          }\n          @case ('runs') {\n            <div class=\"tab-content\">\n              @if (hasVisited('runs')) {\n                <mj-communication-runs-resource></mj-communication-runs-resource>\n              }\n            </div>\n          }\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".communication-dashboard-container {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    width: 100%;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n    font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n    overflow: hidden;\n}\n\n/* TOOLBAR */\n.studio-toolbar {\n    display: flex;\n    align-items: center;\n    padding: 0 12px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n    min-height: 48px;\n    gap: 8px;\n    flex-shrink: 0;\n}\n\n.toolbar-brand {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 0 8px;\n}\n\n.brand-icon {\n    width: 32px;\n    height: 32px;\n    border-radius: 8px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.brand-label {\n    font-weight: 700;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n    letter-spacing: -0.01em;\n}\n\n.toolbar-divider {\n    width: 1px;\n    height: 24px;\n    background: var(--mj-border-default);\n    margin: 0 4px;\n}\n\n.toolbar-spacer {\n    flex: 1;\n}\n\n.tb-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 4px;\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-secondary);\n    font-size: 12px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    font-family: inherit;\n}\n\n.tb-btn:hover {\n    background: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-border-strong);\n    color: var(--mj-text-primary);\n}\n\n.tb-btn i {\n    font-size: 12px;\n}\n\n@keyframes spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n}\n\n.spinning {\n    animation: spin 1s linear infinite;\n}\n\n/* BODY LAYOUT */\n.dashboard-body {\n    display: flex;\n    flex: 1;\n    overflow: hidden;\n}\n\n/* SIDEBAR */\n.sidebar {\n    width: 220px;\n    background: var(--mj-bg-surface-card);\n    border-right: 1px solid var(--mj-border-default);\n    padding: 12px 8px;\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    flex-shrink: 0;\n}\n\n.sidebar-section-label {\n    font-size: 10px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.8px;\n    color: var(--mj-text-muted);\n    padding: 12px 12px 6px;\n}\n\n.nav-item {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 12px;\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    color: var(--mj-text-secondary);\n    font-size: 13px;\n    font-weight: 500;\n}\n\n.nav-item:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-primary);\n}\n\n.nav-item.selected {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    font-weight: 600;\n}\n\n.nav-item i {\n    width: 18px;\n    text-align: center;\n    font-size: 13px;\n}\n\n.sidebar-footer {\n    margin-top: auto;\n    padding-top: 8px;\n    border-top: 1px solid var(--mj-border-default);\n}\n\n/* MAIN CONTENT */\n.main-content {\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n    background: var(--mj-bg-surface);\n}\n\n.tab-container {\n    height: 100%;\n}\n\n.tab-content {\n    height: 100%;\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CommunicationDashboardComponent, { className: "CommunicationDashboardComponent", filePath: "src/Communication/communication-dashboard.component.ts", lineNumber: 21 }); })();
 //# sourceMappingURL=communication-dashboard.component.js.map

package/dist/Communication/communication-logs-resource.component.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"communication-logs-resource.component.d.ts","sourceRoot":"","sources":["../../src/Communication/communication-logs-resource.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAEvF,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;;AAElE,~~qBA2Qa~~,kCAAmC,SAAQ,qBAAsB,YAAW,MAAM,EAAE,SAAS;IAO1F,OAAO,CAAC,GAAG;IANhB,IAAI,EAAE,wBAAwB,EAAE,CAAM;IACtC,YAAY,EAAE,wBAAwB,EAAE,CAAM;IAC9C,SAAS,UAAS;IAClB,YAAY,SAAM;IACzB,OAAO,CAAC,UAAU,CAAM;gBAEJ,GAAG,EAAE,iBAAiB;IAIpC,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;IAK/B,WAAW,IAAI,IAAI;IAEN,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;IAyB/B,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAK5B,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAKpC,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IAStC,aAAa,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IASrC,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IAUrC,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IAU7C,OAAO,CAAC,WAAW;IAoBb,sBAAsB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC;IAI3D,oBAAoB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC;yCAnHtD,kCAAkC;2CAAlC,kCAAkC;CAsH9C"}
1	+ {"version":3,"file":"communication-logs-resource.component.d.ts","sourceRoot":"","sources":["../../src/Communication/communication-logs-resource.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAEvF,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;;AAElE,qBAuRa,kCAAmC,SAAQ,qBAAsB,YAAW,MAAM,EAAE,SAAS;IAO1F,OAAO,CAAC,GAAG;IANhB,IAAI,EAAE,wBAAwB,EAAE,CAAM;IACtC,YAAY,EAAE,wBAAwB,EAAE,CAAM;IAC9C,SAAS,UAAS;IAClB,YAAY,SAAM;IACzB,OAAO,CAAC,UAAU,CAAM;gBAEJ,GAAG,EAAE,iBAAiB;IAIpC,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;IAK/B,WAAW,IAAI,IAAI;IAEN,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;IAyB/B,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAK5B,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAKpC,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IAStC,aAAa,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;IASrC,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IAUrC,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IAU7C,OAAO,CAAC,WAAW;IAoBb,sBAAsB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC;IAI3D,oBAAoB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC;yCAnHtD,kCAAkC;2CAAlC,kCAAkC;CAsH9C"}

package/dist/Communication/communication-logs-resource.component.js CHANGED Viewed

@@ -275,7 +275,7 @@ let CommunicationLogsResourceComponent = class CommunicationLogsResourceComponen
             i0.ɵɵrepeater(ctx.filteredLogs);
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.filteredLogs.length === 0 && !ctx.isLoading ? 41 : -1);
-        } }, dependencies: [i1.NgClass, i1.DatePipe], styles: [".logs-wrapper[_ngcontent-%COMP%] {\n        height: 100%;\n        padding: 24px;\n        background: var(--mat-sys-surface-container);\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        display: flex;\n        flex-direction: column;\n        height: 100%;\n    }\n\n    \n\n    .logs-toolbar[_ngcontent-%COMP%] {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        padding: 12px 20px;\n        border-bottom: 1px solid var(--mat-sys-outline-variant);\n        background: var(--mat-sys-surface-container-low);\n        flex-shrink: 0;\n    }\n    .search-input-wrapper[_ngcontent-%COMP%] {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        flex: 1;\n        max-width: 400px;\n        padding: 6px 12px;\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: var(--mat-sys-corner-small, 8px);\n        background: var(--mat-sys-surface-container-lowest);\n        transition: border-color 0.15s, box-shadow 0.15s;\n    }\n    .search-input-wrapper[_ngcontent-%COMP%]:focus-within {\n        border-color: var(--mat-sys-primary);\n        box-shadow: 0 0 0 2px color-mix(in srgb, var(--mat-sys-primary) 15%, transparent);\n    }\n    .search-input-wrapper[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: var(--mat-sys-on-surface-variant); font-size: 12px; }\n    .search-input-wrapper[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n        flex: 1; border: none; outline: none;\n        background: transparent; font-size: 12px;\n        font-family: inherit; color: var(--mat-sys-on-surface);\n    }\n    .search-input-wrapper[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]::placeholder { color: var(--mat-sys-on-surface-variant); }\n\n    .filter-chip[_ngcontent-%COMP%] {\n        display: inline-flex; align-items: center;\n        gap: 4px; padding: 4px 10px;\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: 16px;\n        background: var(--mat-sys-surface-container-lowest);\n        font-size: 11px; font-weight: 500;\n        color: var(--mat-sys-on-surface-variant);\n        cursor: pointer; transition: all 0.15s;\n    }\n    .filter-chip[_ngcontent-%COMP%]:hover {\n        border-color: var(--mat-sys-outline);\n        background: var(--mat-sys-surface-container);\n    }\n    .filter-chip.active[_ngcontent-%COMP%] {\n        border-color: var(--mat-sys-primary);\n        background: var(--mat-sys-primary-container);\n        color: var(--mat-sys-on-primary-container);\n    }\n    .filter-chip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 10px; }\n\n    .toolbar-spacer[_ngcontent-%COMP%] { flex: 1; }\n\n    .tb-btn[_ngcontent-%COMP%] {\n        display: inline-flex; align-items: center;\n        gap: 6px; padding: 6px 12px;\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: var(--mat-sys-corner-extra-small, 4px);\n        background: var(--mat-sys-surface-container-lowest);\n        color: var(--mat-sys-on-surface-variant);\n        font-size: 12px; font-weight: 500;\n        cursor: pointer; transition: all 0.15s ease;\n        font-family: inherit;\n    }\n    .tb-btn[_ngcontent-%COMP%]:hover {\n        background: var(--mat-sys-surface-container-high);\n        border-color: var(--mat-sys-outline);\n        color: var(--mat-sys-on-surface);\n    }\n    .tb-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 12px; }\n\n    @keyframes _ngcontent-%COMP%_spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }\n    .spinning[_ngcontent-%COMP%] { animation: _ngcontent-%COMP%_spin 1s linear infinite; }\n\n    \n\n    .table-wrapper[_ngcontent-%COMP%] { flex: 1; overflow-y: auto; }\n\n    .log-table[_ngcontent-%COMP%] {\n        width: 100%;\n        border-collapse: collapse;\n        font-size: 12px;\n    }\n    .log-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%] {\n        background: var(--mat-sys-surface-container-low);\n        position: sticky; top: 0; z-index: 1;\n    }\n    .log-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n        padding: 10px 16px;\n        text-align: left;\n        font-weight: 700; font-size: 10px;\n        text-transform: uppercase; letter-spacing: 0.5px;\n        color: var(--mat-sys-on-surface-variant);\n        border-bottom: 1px solid var(--mat-sys-outline-variant);\n        white-space: nowrap;\n    }\n    .log-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n        padding: 12px 16px;\n        border-bottom: 1px solid var(--mat-sys-surface-container);\n        color: var(--mat-sys-on-surface);\n        vertical-align: middle;\n    }\n    .log-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] { transition: background 0.15s; }\n    .log-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover { background: var(--mat-sys-surface-container-low); }\n\n    .log-status-badge[_ngcontent-%COMP%] {\n        display: inline-flex; align-items: center;\n        gap: 4px; font-size: 11px; font-weight: 600;\n        padding: 3px 10px;\n        border-radius: var(--mat-sys-corner-extra-small, 4px);\n    }\n    .log-status-badge.complete[_ngcontent-%COMP%] { background: #d4f8e0; color: #1b873f; }\n    .log-status-badge.failed[_ngcontent-%COMP%] { background: #ffdce0; color: #cf222e; }\n    .log-status-badge.pending[_ngcontent-%COMP%] { background: #fff0c7; color: #9a6700; }\n    .log-status-badge.in-progress[_ngcontent-%COMP%] { background: #ddf4ff; color: #0969da; }\n\n    .log-direction[_ngcontent-%COMP%] {\n        display: flex; align-items: center;\n        gap: 4px; font-size: 11px;\n        color: var(--mat-sys-on-surface-variant);\n    }\n    .log-direction[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 10px; }\n    .log-direction.sending[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: var(--mat-sys-primary); }\n    .log-direction.receiving[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: #1b873f; }\n\n    .log-provider-badge[_ngcontent-%COMP%] {\n        display: inline-flex; align-items: center;\n        gap: 6px; padding: 3px 10px;\n        border-radius: var(--mat-sys-corner-extra-small, 4px);\n        background: var(--mat-sys-surface-container);\n        font-weight: 500;\n    }\n\n    .log-error-text[_ngcontent-%COMP%] {\n        color: #cf222e;\n        max-width: 200px;\n        overflow: hidden; text-overflow: ellipsis;\n        white-space: nowrap; font-size: 11px;\n        display: block;\n    }\n    .no-error[_ngcontent-%COMP%] { color: var(--mat-sys-on-surface-variant); }\n\n    .no-data[_ngcontent-%COMP%] { padding: 0 !important; }\n    .empty-state[_ngcontent-%COMP%] {\n        display: flex; flex-direction: column;\n        align-items: center; justify-content: center;\n        padding: 48px 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; }"] });
+        } }, dependencies: [i1.NgClass, i1.DatePipe], styles: [".logs-wrapper[_ngcontent-%COMP%] {\n        height: 100%;\n        padding: 24px;\n        background: var(--mj-bg-surface);\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        display: flex;\n        flex-direction: column;\n        height: 100%;\n    }\n\n    \n\n    .logs-toolbar[_ngcontent-%COMP%] {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        padding: 12px 20px;\n        border-bottom: 1px solid var(--mj-border-default);\n        background: var(--mj-bg-surface-sunken);\n        flex-shrink: 0;\n    }\n    .search-input-wrapper[_ngcontent-%COMP%] {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        flex: 1;\n        max-width: 400px;\n        padding: 6px 12px;\n        border: 1px solid var(--mj-border-default);\n        border-radius: 8px;\n        background: var(--mj-bg-surface);\n        transition: border-color 0.15s, box-shadow 0.15s;\n    }\n    .search-input-wrapper[_ngcontent-%COMP%]:focus-within {\n        border-color: var(--mj-brand-primary);\n        box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    }\n    .search-input-wrapper[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: var(--mj-text-muted); font-size: 12px; }\n    .search-input-wrapper[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n        flex: 1; border: none; outline: none;\n        background: transparent; font-size: 12px;\n        font-family: inherit; color: var(--mj-text-primary);\n    }\n    .search-input-wrapper[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]::placeholder { color: var(--mj-text-muted); }\n\n    .filter-chip[_ngcontent-%COMP%] {\n        display: inline-flex; align-items: center;\n        gap: 4px; padding: 4px 10px;\n        border: 1px solid var(--mj-border-default);\n        border-radius: 16px;\n        background: var(--mj-bg-surface-card);\n        font-size: 11px; font-weight: 500;\n        color: var(--mj-text-secondary);\n        cursor: pointer; transition: all 0.15s;\n    }\n    .filter-chip[_ngcontent-%COMP%]:hover {\n        border-color: var(--mj-border-strong);\n        background: var(--mj-bg-surface-sunken);\n    }\n    .filter-chip.active[_ngcontent-%COMP%] {\n        border-color: var(--mj-brand-primary);\n        background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n        color: var(--mj-brand-primary);\n    }\n    .filter-chip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 10px; }\n\n    .toolbar-spacer[_ngcontent-%COMP%] { flex: 1; }\n\n    .tb-btn[_ngcontent-%COMP%] {\n        display: inline-flex; align-items: center;\n        gap: 6px; padding: 6px 12px;\n        border: 1px solid var(--mj-border-default);\n        border-radius: 4px;\n        background: var(--mj-bg-surface-card);\n        color: var(--mj-text-secondary);\n        font-size: 12px; font-weight: 500;\n        cursor: pointer; transition: all 0.15s ease;\n        font-family: inherit;\n    }\n    .tb-btn[_ngcontent-%COMP%]:hover {\n        background: var(--mj-bg-surface-sunken);\n        border-color: var(--mj-border-strong);\n        color: var(--mj-text-primary);\n    }\n    .tb-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 12px; }\n\n    @keyframes _ngcontent-%COMP%_spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }\n    .spinning[_ngcontent-%COMP%] { animation: _ngcontent-%COMP%_spin 1s linear infinite; }\n\n    \n\n    .table-wrapper[_ngcontent-%COMP%] { flex: 1; overflow-y: auto; }\n\n    .log-table[_ngcontent-%COMP%] {\n        width: 100%;\n        border-collapse: collapse;\n        font-size: 12px;\n    }\n    .log-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%] {\n        background: var(--mj-bg-surface-sunken);\n        position: sticky; top: 0; z-index: 1;\n    }\n    .log-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n        padding: 10px 16px;\n        text-align: left;\n        font-weight: 700; font-size: 10px;\n        text-transform: uppercase; letter-spacing: 0.5px;\n        color: var(--mj-text-muted);\n        border-bottom: 1px solid var(--mj-border-default);\n        white-space: nowrap;\n    }\n    .log-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n        padding: 12px 16px;\n        border-bottom: 1px solid var(--mj-border-default);\n        color: var(--mj-text-primary);\n        vertical-align: middle;\n    }\n    .log-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] { transition: background 0.15s; }\n    .log-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-sunken); }\n\n    .log-status-badge[_ngcontent-%COMP%] {\n        display: inline-flex; align-items: center;\n        gap: 4px; font-size: 11px; font-weight: 600;\n        padding: 3px 10px;\n        border-radius: 4px;\n    }\n    .log-status-badge.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    .log-status-badge.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    .log-status-badge.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    .log-status-badge.in-progress[_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\n    .log-direction[_ngcontent-%COMP%] {\n        display: flex; align-items: center;\n        gap: 4px; font-size: 11px;\n        color: var(--mj-text-muted);\n    }\n    .log-direction[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 10px; }\n    .log-direction.sending[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n    .log-direction.receiving[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: var(--mj-status-success); }\n\n    .log-provider-badge[_ngcontent-%COMP%] {\n        display: inline-flex; align-items: center;\n        gap: 6px; padding: 3px 10px;\n        border-radius: 4px;\n        background: var(--mj-bg-surface-sunken);\n        font-weight: 500;\n    }\n\n    .log-error-text[_ngcontent-%COMP%] {\n        color: var(--mj-status-error);\n        max-width: 200px;\n        overflow: hidden; text-overflow: ellipsis;\n        white-space: nowrap; font-size: 11px;\n        display: block;\n    }\n    .no-error[_ngcontent-%COMP%] { color: var(--mj-text-muted); }\n\n    .no-data[_ngcontent-%COMP%] { padding: 0 !important; }\n    .empty-state[_ngcontent-%COMP%] {\n        display: flex; flex-direction: column;\n        align-items: center; justify-content: center;\n        padding: 48px 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; }"] });
 };
 CommunicationLogsResourceComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'CommunicationLogsResource')
@@ -374,7 +374,7 @@ export { CommunicationLogsResourceComponent };
         </div>
       </div>
     </div>
-    `, styles: ["\n    .logs-wrapper {\n        height: 100%;\n        padding: 24px;\n        background: var(--mat-sys-surface-container);\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        display: flex;\n        flex-direction: column;\n        height: 100%;\n    }\n\n    /* TOOLBAR */\n    .logs-toolbar {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        padding: 12px 20px;\n        border-bottom: 1px solid var(--mat-sys-outline-variant);\n        background: var(--mat-sys-surface-container-low);\n        flex-shrink: 0;\n    }\n    .search-input-wrapper {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        flex: 1;\n        max-width: 400px;\n        padding: 6px 12px;\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: var(--mat-sys-corner-small, 8px);\n        background: var(--mat-sys-surface-container-lowest);\n        transition: border-color 0.15s, box-shadow 0.15s;\n    }\n    .search-input-wrapper:focus-within {\n        border-color: var(--mat-sys-primary);\n        box-shadow: 0 0 0 2px color-mix(in srgb, var(--mat-sys-primary) 15%, transparent);\n    }\n    .search-input-wrapper i { color: var(--mat-sys-on-surface-variant); font-size: 12px; }\n    .search-input-wrapper input {\n        flex: 1; border: none; outline: none;\n        background: transparent; font-size: 12px;\n        font-family: inherit; color: var(--mat-sys-on-surface);\n    }\n    .search-input-wrapper input::placeholder { color: var(--mat-sys-on-surface-variant); }\n\n    .filter-chip {\n        display: inline-flex; align-items: center;\n        gap: 4px; padding: 4px 10px;\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: 16px;\n        background: var(--mat-sys-surface-container-lowest);\n        font-size: 11px; font-weight: 500;\n        color: var(--mat-sys-on-surface-variant);\n        cursor: pointer; transition: all 0.15s;\n    }\n    .filter-chip:hover {\n        border-color: var(--mat-sys-outline);\n        background: var(--mat-sys-surface-container);\n    }\n    .filter-chip.active {\n        border-color: var(--mat-sys-primary);\n        background: var(--mat-sys-primary-container);\n        color: var(--mat-sys-on-primary-container);\n    }\n    .filter-chip i { font-size: 10px; }\n\n    .toolbar-spacer { flex: 1; }\n\n    .tb-btn {\n        display: inline-flex; align-items: center;\n        gap: 6px; padding: 6px 12px;\n        border: 1px solid var(--mat-sys-outline-variant);\n        border-radius: var(--mat-sys-corner-extra-small, 4px);\n        background: var(--mat-sys-surface-container-lowest);\n        color: var(--mat-sys-on-surface-variant);\n        font-size: 12px; font-weight: 500;\n        cursor: pointer; transition: all 0.15s ease;\n        font-family: inherit;\n    }\n    .tb-btn:hover {\n        background: var(--mat-sys-surface-container-high);\n        border-color: var(--mat-sys-outline);\n        color: var(--mat-sys-on-surface);\n    }\n    .tb-btn i { font-size: 12px; }\n\n    @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }\n    .spinning { animation: spin 1s linear infinite; }\n\n    /* TABLE */\n    .table-wrapper { flex: 1; overflow-y: auto; }\n\n    .log-table {\n        width: 100%;\n        border-collapse: collapse;\n        font-size: 12px;\n    }\n    .log-table thead {\n        background: var(--mat-sys-surface-container-low);\n        position: sticky; top: 0; z-index: 1;\n    }\n    .log-table th {\n        padding: 10px 16px;\n        text-align: left;\n        font-weight: 700; font-size: 10px;\n        text-transform: uppercase; letter-spacing: 0.5px;\n        color: var(--mat-sys-on-surface-variant);\n        border-bottom: 1px solid var(--mat-sys-outline-variant);\n        white-space: nowrap;\n    }\n    .log-table td {\n        padding: 12px 16px;\n        border-bottom: 1px solid var(--mat-sys-surface-container);\n        color: var(--mat-sys-on-surface);\n        vertical-align: middle;\n    }\n    .log-table tbody tr { transition: background 0.15s; }\n    .log-table tbody tr:hover { background: var(--mat-sys-surface-container-low); }\n\n    .log-status-badge {\n        display: inline-flex; align-items: center;\n        gap: 4px; font-size: 11px; font-weight: 600;\n        padding: 3px 10px;\n        border-radius: var(--mat-sys-corner-extra-small, 4px);\n    }\n    .log-status-badge.complete { background: #d4f8e0; color: #1b873f; }\n    .log-status-badge.failed { background: #ffdce0; color: #cf222e; }\n    .log-status-badge.pending { background: #fff0c7; color: #9a6700; }\n    .log-status-badge.in-progress { background: #ddf4ff; color: #0969da; }\n\n    .log-direction {\n        display: flex; align-items: center;\n        gap: 4px; font-size: 11px;\n        color: var(--mat-sys-on-surface-variant);\n    }\n    .log-direction i { font-size: 10px; }\n    .log-direction.sending i { color: var(--mat-sys-primary); }\n    .log-direction.receiving i { color: #1b873f; }\n\n    .log-provider-badge {\n        display: inline-flex; align-items: center;\n        gap: 6px; padding: 3px 10px;\n        border-radius: var(--mat-sys-corner-extra-small, 4px);\n        background: var(--mat-sys-surface-container);\n        font-weight: 500;\n    }\n\n    .log-error-text {\n        color: #cf222e;\n        max-width: 200px;\n        overflow: hidden; text-overflow: ellipsis;\n        white-space: nowrap; font-size: 11px;\n        display: block;\n    }\n    .no-error { color: var(--mat-sys-on-surface-variant); }\n\n    .no-data { padding: 0 !important; }\n    .empty-state {\n        display: flex; flex-direction: column;\n        align-items: center; justify-content: center;\n        padding: 48px 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  "] }]
+    `, styles: ["\n    .logs-wrapper {\n        height: 100%;\n        padding: 24px;\n        background: var(--mj-bg-surface);\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        display: flex;\n        flex-direction: column;\n        height: 100%;\n    }\n\n    /* TOOLBAR */\n    .logs-toolbar {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        padding: 12px 20px;\n        border-bottom: 1px solid var(--mj-border-default);\n        background: var(--mj-bg-surface-sunken);\n        flex-shrink: 0;\n    }\n    .search-input-wrapper {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        flex: 1;\n        max-width: 400px;\n        padding: 6px 12px;\n        border: 1px solid var(--mj-border-default);\n        border-radius: 8px;\n        background: var(--mj-bg-surface);\n        transition: border-color 0.15s, box-shadow 0.15s;\n    }\n    .search-input-wrapper:focus-within {\n        border-color: var(--mj-brand-primary);\n        box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    }\n    .search-input-wrapper i { color: var(--mj-text-muted); font-size: 12px; }\n    .search-input-wrapper input {\n        flex: 1; border: none; outline: none;\n        background: transparent; font-size: 12px;\n        font-family: inherit; color: var(--mj-text-primary);\n    }\n    .search-input-wrapper input::placeholder { color: var(--mj-text-muted); }\n\n    .filter-chip {\n        display: inline-flex; align-items: center;\n        gap: 4px; padding: 4px 10px;\n        border: 1px solid var(--mj-border-default);\n        border-radius: 16px;\n        background: var(--mj-bg-surface-card);\n        font-size: 11px; font-weight: 500;\n        color: var(--mj-text-secondary);\n        cursor: pointer; transition: all 0.15s;\n    }\n    .filter-chip:hover {\n        border-color: var(--mj-border-strong);\n        background: var(--mj-bg-surface-sunken);\n    }\n    .filter-chip.active {\n        border-color: var(--mj-brand-primary);\n        background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n        color: var(--mj-brand-primary);\n    }\n    .filter-chip i { font-size: 10px; }\n\n    .toolbar-spacer { flex: 1; }\n\n    .tb-btn {\n        display: inline-flex; align-items: center;\n        gap: 6px; padding: 6px 12px;\n        border: 1px solid var(--mj-border-default);\n        border-radius: 4px;\n        background: var(--mj-bg-surface-card);\n        color: var(--mj-text-secondary);\n        font-size: 12px; font-weight: 500;\n        cursor: pointer; transition: all 0.15s ease;\n        font-family: inherit;\n    }\n    .tb-btn:hover {\n        background: var(--mj-bg-surface-sunken);\n        border-color: var(--mj-border-strong);\n        color: var(--mj-text-primary);\n    }\n    .tb-btn i { font-size: 12px; }\n\n    @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }\n    .spinning { animation: spin 1s linear infinite; }\n\n    /* TABLE */\n    .table-wrapper { flex: 1; overflow-y: auto; }\n\n    .log-table {\n        width: 100%;\n        border-collapse: collapse;\n        font-size: 12px;\n    }\n    .log-table thead {\n        background: var(--mj-bg-surface-sunken);\n        position: sticky; top: 0; z-index: 1;\n    }\n    .log-table th {\n        padding: 10px 16px;\n        text-align: left;\n        font-weight: 700; font-size: 10px;\n        text-transform: uppercase; letter-spacing: 0.5px;\n        color: var(--mj-text-muted);\n        border-bottom: 1px solid var(--mj-border-default);\n        white-space: nowrap;\n    }\n    .log-table td {\n        padding: 12px 16px;\n        border-bottom: 1px solid var(--mj-border-default);\n        color: var(--mj-text-primary);\n        vertical-align: middle;\n    }\n    .log-table tbody tr { transition: background 0.15s; }\n    .log-table tbody tr:hover { background: var(--mj-bg-surface-sunken); }\n\n    .log-status-badge {\n        display: inline-flex; align-items: center;\n        gap: 4px; font-size: 11px; font-weight: 600;\n        padding: 3px 10px;\n        border-radius: 4px;\n    }\n    .log-status-badge.complete {\n        background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-success);\n    }\n    .log-status-badge.failed {\n        background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-error);\n    }\n    .log-status-badge.pending {\n        background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-warning);\n    }\n    .log-status-badge.in-progress {\n        background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n        color: var(--mj-brand-primary);\n    }\n\n    .log-direction {\n        display: flex; align-items: center;\n        gap: 4px; font-size: 11px;\n        color: var(--mj-text-muted);\n    }\n    .log-direction i { font-size: 10px; }\n    .log-direction.sending i { color: var(--mj-brand-primary); }\n    .log-direction.receiving i { color: var(--mj-status-success); }\n\n    .log-provider-badge {\n        display: inline-flex; align-items: center;\n        gap: 6px; padding: 3px 10px;\n        border-radius: 4px;\n        background: var(--mj-bg-surface-sunken);\n        font-weight: 500;\n    }\n\n    .log-error-text {\n        color: var(--mj-status-error);\n        max-width: 200px;\n        overflow: hidden; text-overflow: ellipsis;\n        white-space: nowrap; font-size: 11px;\n        display: block;\n    }\n    .no-error { color: var(--mj-text-muted); }\n\n    .no-data { padding: 0 !important; }\n    .empty-state {\n        display: flex; flex-direction: column;\n        align-items: center; justify-content: center;\n        padding: 48px 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  "] }]
     }], () => [{ type: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CommunicationLogsResourceComponent, { className: "CommunicationLogsResourceComponent", filePath: "src/Communication/communication-logs-resource.component.ts", lineNumber: 273 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CommunicationLogsResourceComponent, { className: "CommunicationLogsResourceComponent", filePath: "src/Communication/communication-logs-resource.component.ts", lineNumber: 285 }); })();
 //# sourceMappingURL=communication-logs-resource.component.js.map

package/dist/Communication/communication-logs-resource.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"communication-logs-resource.component.js","sourceRoot":"","sources":["../../src/Communication/communication-logs-resource.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';\nimport { ResourceData, MJCommunicationLogEntity } from '@memberjunction/core-entities';\nimport { RegisterClass } from '@memberjunction/global';\nimport { BaseResourceComponent } from '@memberjunction/ng-shared';\nimport { RunView } from '@memberjunction/core';\n@RegisterClass(BaseResourceComponent, 'CommunicationLogsResource')\n@Component({\n standalone: false,\n selector: 'mj-communication-logs-resource',\n template: `\n <div class=\"logs-wrapper\">\n <div class=\"card\">\n <div class=\"logs-toolbar\">\n <div class=\"search-input-wrapper\">\n <i class=\"fa-solid fa-search\"></i>\n <input type=\"text\" placeholder=\"Search messages, providers, recipients...\" (input)=\"onSearch($event)\">\n </div>\n <div class=\"filter-chip\" [class.active]=\"statusFilter === ''\"\n (click)=\"onStatusFilter('')\">\n <i class=\"fa-solid fa-filter\"></i> All\n </div>\n <div class=\"filter-chip\" [class.active]=\"statusFilter === 'Complete'\"\n (click)=\"onStatusFilter('Complete')\">\n <i class=\"fa-solid fa-check-circle\"></i> Sent\n </div>\n <div class=\"filter-chip\" [class.active]=\"statusFilter === 'Failed'\"\n (click)=\"onStatusFilter('Failed')\">\n <i class=\"fa-solid fa-times-circle\"></i> Failed\n </div>\n <div class=\"filter-chip\" [class.active]=\"statusFilter === 'Pending'\"\n (click)=\"onStatusFilter('Pending')\">\n <i class=\"fa-solid fa-clock\"></i> Pending\n </div>\n <div class=\"toolbar-spacer\"></div>\n <button class=\"tb-btn\" (click)=\"loadData()\">\n <i class=\"fa-solid fa-rotate\" [class.spinning]=\"isLoading\"></i> Refresh\n </button>\n </div>\n <div class=\"table-wrapper\">\n <table class=\"log-table\">\n <thead>\n <tr>\n <th>Status</th>\n <th>Direction</th>\n <th>Provider</th>\n <th>Type</th>\n <th>Date</th>\n <th>Error</th>\n </tr>\n </thead>\n <tbody>\n @for (log of filteredLogs; track log) {\n <tr>\n <td>\n <span class=\"log-status-badge\" [ngClass]=\"getStatusClass(log.Status)\">\n <i [class]=\"getStatusIcon(log.Status)\"></i>\n {{log.Status}}\n </span>\n </td>\n <td>\n <span class=\"log-direction\" [ngClass]=\"log.Direction.toLowerCase()\">\n <i [class]=\"log.Direction === 'Sending' ? 'fa-solid fa-arrow-up-right' : 'fa-solid fa-arrow-down-left'\"></i>\n {{log.Direction}}\n </span>\n </td>\n <td>\n <span class=\"log-provider-badge\">\n <i [class]=\"getProviderIcon(log.CommunicationProvider)\" [style.color]=\"getProviderColor(log.CommunicationProvider)\"></i>\n {{log.CommunicationProvider}}\n </span>\n </td>\n <td>{{log.CommunicationProviderMessageType}}</td>\n <td>{{log.MessageDate \| date:'medium'}}</td>\n <td>\n @if (log.ErrorMessage) {\n <span class=\"log-error-text\" [title]=\"log.ErrorMessage\">\n {{log.ErrorMessage}}\n </span>\n }\n @if (!log.ErrorMessage) {\n <span class=\"no-error\">—</span>\n }\n </td>\n </tr>\n }\n @if (filteredLogs.length === 0 && !isLoading) {\n <tr>\n <td colspan=\"6\" class=\"no-data\">\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-inbox\"></i>\n <p>No logs found matching your criteria</p>\n </div>\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n </div>\n </div>\n `,\n styles: [`\n .logs-wrapper {\n height: 100%;\n padding: 24px;\n background: var(--mat-sys-surface-container);\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 display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n /* TOOLBAR /\n .logs-toolbar {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 20px;\n border-bottom: 1px solid var(--mat-sys-outline-variant);\n background: var(--mat-sys-surface-container-low);\n flex-shrink: 0;\n }\n .search-input-wrapper {\n display: flex;\n align-items: center;\n gap: 8px;\n flex: 1;\n max-width: 400px;\n padding: 6px 12px;\n border: 1px solid var(--mat-sys-outline-variant);\n border-radius: var(--mat-sys-corner-small, 8px);\n background: var(--mat-sys-surface-container-lowest);\n transition: border-color 0.15s, box-shadow 0.15s;\n }\n .search-input-wrapper:focus-within {\n border-color: var(--mat-sys-primary);\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--mat-sys-primary) 15%, transparent);\n }\n .search-input-wrapper i { color: var(--mat-sys-on-surface-variant); font-size: 12px; }\n .search-input-wrapper input {\n flex: 1; border: none; outline: none;\n background: transparent; font-size: 12px;\n font-family: inherit; color: var(--mat-sys-on-surface);\n }\n .search-input-wrapper input::placeholder { color: var(--mat-sys-on-surface-variant); }\n\n .filter-chip {\n display: inline-flex; align-items: center;\n gap: 4px; padding: 4px 10px;\n border: 1px solid var(--mat-sys-outline-variant);\n border-radius: 16px;\n background: var(--mat-sys-surface-container-lowest);\n font-size: 11px; font-weight: 500;\n color: var(--mat-sys-on-surface-variant);\n cursor: pointer; transition: all 0.15s;\n }\n .filter-chip:hover {\n border-color: var(--mat-sys-outline);\n background: var(--mat-sys-surface-container);\n }\n .filter-chip.active {\n border-color: var(--mat-sys-primary);\n background: var(--mat-sys-primary-container);\n color: var(--mat-sys-on-primary-container);\n }\n .filter-chip i { font-size: 10px; }\n\n .toolbar-spacer { flex: 1; }\n\n .tb-btn {\n display: inline-flex; align-items: center;\n gap: 6px; padding: 6px 12px;\n border: 1px solid var(--mat-sys-outline-variant);\n border-radius: var(--mat-sys-corner-extra-small, 4px);\n background: var(--mat-sys-surface-container-lowest);\n color: var(--mat-sys-on-surface-variant);\n font-size: 12px; font-weight: 500;\n cursor: pointer; transition: all 0.15s ease;\n font-family: inherit;\n }\n .tb-btn:hover {\n background: var(--mat-sys-surface-container-high);\n border-color: var(--mat-sys-outline);\n color: var(--mat-sys-on-surface);\n }\n .tb-btn i { font-size: 12px; }\n\n @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }\n .spinning { animation: spin 1s linear infinite; }\n\n / TABLE */\n .table-wrapper { flex: 1; overflow-y: auto; }\n\n .log-table {\n width: 100%;\n border-collapse: collapse;\n font-size: 12px;\n }\n .log-table thead {\n background: var(--mat-sys-surface-container-low);\n position: sticky; top: 0; z-index: 1;\n }\n .log-table th {\n padding: 10px 16px;\n text-align: left;\n font-weight: 700; font-size: 10px;\n text-transform: uppercase; letter-spacing: 0.5px;\n color: var(--mat-sys-on-surface-variant);\n border-bottom: 1px solid var(--mat-sys-outline-variant);\n white-space: nowrap;\n }\n .log-table td {\n padding: 12px 16px;\n border-bottom: 1px solid var(--mat-sys-surface-container);\n color: var(--mat-sys-on-surface);\n vertical-align: middle;\n }\n .log-table tbody tr { transition: background 0.15s; }\n .log-table tbody tr:hover { background: var(--mat-sys-surface-container-low); }\n\n .log-status-badge {\n display: inline-flex; align-items: center;\n gap: 4px; font-size: 11px; font-weight: 600;\n padding: 3px 10px;\n border-radius: var(--mat-sys-corner-extra-small, 4px);\n }\n .log-status-badge.complete { background: #d4f8e0; color: #1b873f; }\n .log-status-badge.failed { background: #ffdce0; color: #cf222e; }\n .log-status-badge.pending { background: #fff0c7; color: #9a6700; }\n .log-status-badge.in-progress { background: #ddf4ff; color: #0969da; }\n\n .log-direction {\n display: flex; align-items: center;\n gap: 4px; font-size: 11px;\n color: var(--mat-sys-on-surface-variant);\n }\n .log-direction i { font-size: 10px; }\n .log-direction.sending i { color: var(--mat-sys-primary); }\n .log-direction.receiving i { color: #1b873f; }\n\n .log-provider-badge {\n display: inline-flex; align-items: center;\n gap: 6px; padding: 3px 10px;\n border-radius: var(--mat-sys-corner-extra-small, 4px);\n background: var(--mat-sys-surface-container);\n font-weight: 500;\n }\n\n .log-error-text {\n color: #cf222e;\n max-width: 200px;\n overflow: hidden; text-overflow: ellipsis;\n white-space: nowrap; font-size: 11px;\n display: block;\n }\n .no-error { color: var(--mat-sys-on-surface-variant); }\n\n .no-data { padding: 0 !important; }\n .empty-state {\n display: flex; flex-direction: column;\n align-items: center; justify-content: center;\n padding: 48px 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})\nexport class CommunicationLogsResourceComponent extends BaseResourceComponent implements OnInit, OnDestroy {\n public logs: MJCommunicationLogEntity[] = [];\n public filteredLogs: MJCommunicationLogEntity[] = [];\n public isLoading = false;\n public statusFilter = '';\n private searchTerm = '';\n\n constructor(private cdr: ChangeDetectorRef) {\n super();\n }\n\n async ngOnInit(): Promise<void> {\n await this.loadData();\n this.NotifyLoadComplete();\n }\n\n ngOnDestroy(): void { }\n\n public async loadData(): Promise<void> {\n try {\n this.isLoading = true;\n this.cdr.detectChanges();\n\n const rv = new RunView();\n const result = await rv.RunView<MJCommunicationLogEntity>({\n EntityName: 'MJ: Communication Logs',\n OrderBy: 'MessageDate DESC',\n MaxRows: 200,\n ResultType: 'entity_object'\n });\n\n if (result.Success) {\n this.logs = result.Results;\n this.applyFilter();\n }\n } catch (error) {\n console.error('Error loading logs:', error);\n } finally {\n this.isLoading = false;\n this.cdr.detectChanges();\n }\n }\n\n public onSearch(event: Event): void {\n this.searchTerm = (event.target as HTMLInputElement).value.toLowerCase();\n this.applyFilter();\n }\n\n public onStatusFilter(status: string): void {\n this.statusFilter = status;\n this.applyFilter();\n }\n\n public getStatusClass(status: string): string {\n const s = (status \|\| '').toLowerCase();\n if (s === 'complete') return 'complete';\n if (s === 'failed') return 'failed';\n if (s === 'pending') return 'pending';\n if (s === 'in-progress') return 'in-progress';\n return '';\n }\n\n public getStatusIcon(status: string): string {\n const s = (status \|\| '').toLowerCase();\n if (s === 'complete') return 'fa-solid fa-check';\n if (s === 'failed') return 'fa-solid fa-xmark';\n if (s === 'pending') return 'fa-solid fa-clock';\n if (s === 'in-progress') return 'fa-solid fa-spinner';\n return 'fa-solid fa-circle';\n }\n\n public getProviderIcon(name: string): string {\n if (!name) return 'fa-solid fa-server';\n const n = name.toLowerCase();\n if (n.includes('sendgrid')) return 'fa-solid fa-envelope';\n if (n.includes('twilio')) return 'fa-solid fa-comment-sms';\n if (n.includes('gmail') \|\| n.includes('google')) return 'fa-brands fa-google';\n if (n.includes('microsoft') \|\| n.includes('graph')) return 'fa-brands fa-microsoft';\n return 'fa-solid fa-server';\n }\n\n public getProviderColor(name: string): string {\n if (!name) return 'inherit';\n const n = name.toLowerCase();\n if (n.includes('sendgrid')) return '#1A82E2';\n if (n.includes('twilio')) return '#F22F46';\n if (n.includes('gmail') \|\| n.includes('google')) return '#EA4335';\n if (n.includes('microsoft') \|\| n.includes('graph')) return '#0078D4';\n return 'inherit';\n }\n\n private applyFilter(): void {\n let filtered = this.logs;\n\n if (this.statusFilter) {\n filtered = filtered.filter(l => l.Status === this.statusFilter);\n }\n\n if (this.searchTerm) {\n filtered = filtered.filter(l =>\n l.CommunicationProvider?.toLowerCase().includes(this.searchTerm) \|\|\n l.CommunicationProviderMessageType?.toLowerCase().includes(this.searchTerm) \|\|\n l.Status?.toLowerCase().includes(this.searchTerm) \|\|\n l.ErrorMessage?.toLowerCase().includes(this.searchTerm)\n );\n }\n\n this.filteredLogs = filtered;\n this.cdr.detectChanges();\n }\n\n async GetResourceDisplayName(data: ResourceData): Promise<string> {\n return 'Message Logs';\n }\n\n async GetResourceIconClass(data: ResourceData): Promise<string> {\n return 'fa-solid fa-list-ul';\n }\n}\n"]}
1	+ {"version":3,"file":"communication-logs-resource.component.js","sourceRoot":"","sources":["../../src/Communication/communication-logs-resource.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';\nimport { ResourceData, MJCommunicationLogEntity } from '@memberjunction/core-entities';\nimport { RegisterClass } from '@memberjunction/global';\nimport { BaseResourceComponent } from '@memberjunction/ng-shared';\nimport { RunView } from '@memberjunction/core';\n@RegisterClass(BaseResourceComponent, 'CommunicationLogsResource')\n@Component({\n standalone: false,\n selector: 'mj-communication-logs-resource',\n template: `\n <div class=\"logs-wrapper\">\n <div class=\"card\">\n <div class=\"logs-toolbar\">\n <div class=\"search-input-wrapper\">\n <i class=\"fa-solid fa-search\"></i>\n <input type=\"text\" placeholder=\"Search messages, providers, recipients...\" (input)=\"onSearch($event)\">\n </div>\n <div class=\"filter-chip\" [class.active]=\"statusFilter === ''\"\n (click)=\"onStatusFilter('')\">\n <i class=\"fa-solid fa-filter\"></i> All\n </div>\n <div class=\"filter-chip\" [class.active]=\"statusFilter === 'Complete'\"\n (click)=\"onStatusFilter('Complete')\">\n <i class=\"fa-solid fa-check-circle\"></i> Sent\n </div>\n <div class=\"filter-chip\" [class.active]=\"statusFilter === 'Failed'\"\n (click)=\"onStatusFilter('Failed')\">\n <i class=\"fa-solid fa-times-circle\"></i> Failed\n </div>\n <div class=\"filter-chip\" [class.active]=\"statusFilter === 'Pending'\"\n (click)=\"onStatusFilter('Pending')\">\n <i class=\"fa-solid fa-clock\"></i> Pending\n </div>\n <div class=\"toolbar-spacer\"></div>\n <button class=\"tb-btn\" (click)=\"loadData()\">\n <i class=\"fa-solid fa-rotate\" [class.spinning]=\"isLoading\"></i> Refresh\n </button>\n </div>\n <div class=\"table-wrapper\">\n <table class=\"log-table\">\n <thead>\n <tr>\n <th>Status</th>\n <th>Direction</th>\n <th>Provider</th>\n <th>Type</th>\n <th>Date</th>\n <th>Error</th>\n </tr>\n </thead>\n <tbody>\n @for (log of filteredLogs; track log) {\n <tr>\n <td>\n <span class=\"log-status-badge\" [ngClass]=\"getStatusClass(log.Status)\">\n <i [class]=\"getStatusIcon(log.Status)\"></i>\n {{log.Status}}\n </span>\n </td>\n <td>\n <span class=\"log-direction\" [ngClass]=\"log.Direction.toLowerCase()\">\n <i [class]=\"log.Direction === 'Sending' ? 'fa-solid fa-arrow-up-right' : 'fa-solid fa-arrow-down-left'\"></i>\n {{log.Direction}}\n </span>\n </td>\n <td>\n <span class=\"log-provider-badge\">\n <i [class]=\"getProviderIcon(log.CommunicationProvider)\" [style.color]=\"getProviderColor(log.CommunicationProvider)\"></i>\n {{log.CommunicationProvider}}\n </span>\n </td>\n <td>{{log.CommunicationProviderMessageType}}</td>\n <td>{{log.MessageDate \| date:'medium'}}</td>\n <td>\n @if (log.ErrorMessage) {\n <span class=\"log-error-text\" [title]=\"log.ErrorMessage\">\n {{log.ErrorMessage}}\n </span>\n }\n @if (!log.ErrorMessage) {\n <span class=\"no-error\">—</span>\n }\n </td>\n </tr>\n }\n @if (filteredLogs.length === 0 && !isLoading) {\n <tr>\n <td colspan=\"6\" class=\"no-data\">\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-inbox\"></i>\n <p>No logs found matching your criteria</p>\n </div>\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n </div>\n </div>\n `,\n styles: [`\n .logs-wrapper {\n height: 100%;\n padding: 24px;\n background: var(--mj-bg-surface);\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 display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n /* TOOLBAR /\n .logs-toolbar {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-sunken);\n flex-shrink: 0;\n }\n .search-input-wrapper {\n display: flex;\n align-items: center;\n gap: 8px;\n flex: 1;\n max-width: 400px;\n padding: 6px 12px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n background: var(--mj-bg-surface);\n transition: border-color 0.15s, box-shadow 0.15s;\n }\n .search-input-wrapper:focus-within {\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n }\n .search-input-wrapper i { color: var(--mj-text-muted); font-size: 12px; }\n .search-input-wrapper input {\n flex: 1; border: none; outline: none;\n background: transparent; font-size: 12px;\n font-family: inherit; color: var(--mj-text-primary);\n }\n .search-input-wrapper input::placeholder { color: var(--mj-text-muted); }\n\n .filter-chip {\n display: inline-flex; align-items: center;\n gap: 4px; padding: 4px 10px;\n border: 1px solid var(--mj-border-default);\n border-radius: 16px;\n background: var(--mj-bg-surface-card);\n font-size: 11px; font-weight: 500;\n color: var(--mj-text-secondary);\n cursor: pointer; transition: all 0.15s;\n }\n .filter-chip:hover {\n border-color: var(--mj-border-strong);\n background: var(--mj-bg-surface-sunken);\n }\n .filter-chip.active {\n border-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n }\n .filter-chip i { font-size: 10px; }\n\n .toolbar-spacer { flex: 1; }\n\n .tb-btn {\n display: inline-flex; align-items: center;\n gap: 6px; padding: 6px 12px;\n border: 1px solid var(--mj-border-default);\n border-radius: 4px;\n background: var(--mj-bg-surface-card);\n color: var(--mj-text-secondary);\n font-size: 12px; font-weight: 500;\n cursor: pointer; transition: all 0.15s ease;\n font-family: inherit;\n }\n .tb-btn:hover {\n background: var(--mj-bg-surface-sunken);\n border-color: var(--mj-border-strong);\n color: var(--mj-text-primary);\n }\n .tb-btn i { font-size: 12px; }\n\n @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }\n .spinning { animation: spin 1s linear infinite; }\n\n / TABLE */\n .table-wrapper { flex: 1; overflow-y: auto; }\n\n .log-table {\n width: 100%;\n border-collapse: collapse;\n font-size: 12px;\n }\n .log-table thead {\n background: var(--mj-bg-surface-sunken);\n position: sticky; top: 0; z-index: 1;\n }\n .log-table th {\n padding: 10px 16px;\n text-align: left;\n font-weight: 700; font-size: 10px;\n text-transform: uppercase; letter-spacing: 0.5px;\n color: var(--mj-text-muted);\n border-bottom: 1px solid var(--mj-border-default);\n white-space: nowrap;\n }\n .log-table td {\n padding: 12px 16px;\n border-bottom: 1px solid var(--mj-border-default);\n color: var(--mj-text-primary);\n vertical-align: middle;\n }\n .log-table tbody tr { transition: background 0.15s; }\n .log-table tbody tr:hover { background: var(--mj-bg-surface-sunken); }\n\n .log-status-badge {\n display: inline-flex; align-items: center;\n gap: 4px; font-size: 11px; font-weight: 600;\n padding: 3px 10px;\n border-radius: 4px;\n }\n .log-status-badge.complete {\n background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n color: var(--mj-status-success);\n }\n .log-status-badge.failed {\n background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n color: var(--mj-status-error);\n }\n .log-status-badge.pending {\n background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n color: var(--mj-status-warning);\n }\n .log-status-badge.in-progress {\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n }\n\n .log-direction {\n display: flex; align-items: center;\n gap: 4px; font-size: 11px;\n color: var(--mj-text-muted);\n }\n .log-direction i { font-size: 10px; }\n .log-direction.sending i { color: var(--mj-brand-primary); }\n .log-direction.receiving i { color: var(--mj-status-success); }\n\n .log-provider-badge {\n display: inline-flex; align-items: center;\n gap: 6px; padding: 3px 10px;\n border-radius: 4px;\n background: var(--mj-bg-surface-sunken);\n font-weight: 500;\n }\n\n .log-error-text {\n color: var(--mj-status-error);\n max-width: 200px;\n overflow: hidden; text-overflow: ellipsis;\n white-space: nowrap; font-size: 11px;\n display: block;\n }\n .no-error { color: var(--mj-text-muted); }\n\n .no-data { padding: 0 !important; }\n .empty-state {\n display: flex; flex-direction: column;\n align-items: center; justify-content: center;\n padding: 48px 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})\nexport class CommunicationLogsResourceComponent extends BaseResourceComponent implements OnInit, OnDestroy {\n public logs: MJCommunicationLogEntity[] = [];\n public filteredLogs: MJCommunicationLogEntity[] = [];\n public isLoading = false;\n public statusFilter = '';\n private searchTerm = '';\n\n constructor(private cdr: ChangeDetectorRef) {\n super();\n }\n\n async ngOnInit(): Promise<void> {\n await this.loadData();\n this.NotifyLoadComplete();\n }\n\n ngOnDestroy(): void { }\n\n public async loadData(): Promise<void> {\n try {\n this.isLoading = true;\n this.cdr.detectChanges();\n\n const rv = new RunView();\n const result = await rv.RunView<MJCommunicationLogEntity>({\n EntityName: 'MJ: Communication Logs',\n OrderBy: 'MessageDate DESC',\n MaxRows: 200,\n ResultType: 'entity_object'\n });\n\n if (result.Success) {\n this.logs = result.Results;\n this.applyFilter();\n }\n } catch (error) {\n console.error('Error loading logs:', error);\n } finally {\n this.isLoading = false;\n this.cdr.detectChanges();\n }\n }\n\n public onSearch(event: Event): void {\n this.searchTerm = (event.target as HTMLInputElement).value.toLowerCase();\n this.applyFilter();\n }\n\n public onStatusFilter(status: string): void {\n this.statusFilter = status;\n this.applyFilter();\n }\n\n public getStatusClass(status: string): string {\n const s = (status \|\| '').toLowerCase();\n if (s === 'complete') return 'complete';\n if (s === 'failed') return 'failed';\n if (s === 'pending') return 'pending';\n if (s === 'in-progress') return 'in-progress';\n return '';\n }\n\n public getStatusIcon(status: string): string {\n const s = (status \|\| '').toLowerCase();\n if (s === 'complete') return 'fa-solid fa-check';\n if (s === 'failed') return 'fa-solid fa-xmark';\n if (s === 'pending') return 'fa-solid fa-clock';\n if (s === 'in-progress') return 'fa-solid fa-spinner';\n return 'fa-solid fa-circle';\n }\n\n public getProviderIcon(name: string): string {\n if (!name) return 'fa-solid fa-server';\n const n = name.toLowerCase();\n if (n.includes('sendgrid')) return 'fa-solid fa-envelope';\n if (n.includes('twilio')) return 'fa-solid fa-comment-sms';\n if (n.includes('gmail') \|\| n.includes('google')) return 'fa-brands fa-google';\n if (n.includes('microsoft') \|\| n.includes('graph')) return 'fa-brands fa-microsoft';\n return 'fa-solid fa-server';\n }\n\n public getProviderColor(name: string): string {\n if (!name) return 'inherit';\n const n = name.toLowerCase();\n if (n.includes('sendgrid')) return '#1A82E2';\n if (n.includes('twilio')) return '#F22F46';\n if (n.includes('gmail') \|\| n.includes('google')) return '#EA4335';\n if (n.includes('microsoft') \|\| n.includes('graph')) return '#0078D4';\n return 'inherit';\n }\n\n private applyFilter(): void {\n let filtered = this.logs;\n\n if (this.statusFilter) {\n filtered = filtered.filter(l => l.Status === this.statusFilter);\n }\n\n if (this.searchTerm) {\n filtered = filtered.filter(l =>\n l.CommunicationProvider?.toLowerCase().includes(this.searchTerm) \|\|\n l.CommunicationProviderMessageType?.toLowerCase().includes(this.searchTerm) \|\|\n l.Status?.toLowerCase().includes(this.searchTerm) \|\|\n l.ErrorMessage?.toLowerCase().includes(this.searchTerm)\n );\n }\n\n this.filteredLogs = filtered;\n this.cdr.detectChanges();\n }\n\n async GetResourceDisplayName(data: ResourceData): Promise<string> {\n return 'Message Logs';\n }\n\n async GetResourceIconClass(data: ResourceData): Promise<string> {\n return 'fa-solid fa-list-ul';\n }\n}\n"]}

package/dist/Communication/communication-monitor-resource.component.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"communication-monitor-resource.component.d.ts","sourceRoot":"","sources":["../../src/Communication/communication-monitor-resource.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,wBAAwB,EAAiC,MAAM,+BAA+B,CAAC;AAEtH,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;;AAGlE,UAAU,cAAc;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,gBAAgB;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,YAAY;IAClB,SAAS,EAAE,IAAI,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CACnB;AACD,~~qBA8ba~~,qCAAsC,SAAQ,qBAAsB,YAAW,MAAM,EAAE,SAAS;IAmB7F,OAAO,CAAC,GAAG;IAlBhB,SAAS,UAAS;IAClB,KAAK;;;;;MAKV;IACK,UAAU,EAAE,wBAAwB,EAAE,CAAM;IAC5C,SAAS,EAAE,YAAY,EAAE,CAAM;IAC/B,WAAW;;;;;MAKhB;IACK,cAAc,EAAE,cAAc,EAAE,CAAM;IACtC,gBAAgB,EAAE,gBAAgB,EAAE,CAAM;gBAE7B,GAAG,EAAE,iBAAiB;IAIpC,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;IAK/B,WAAW,IAAI,IAAI;IAEN,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;IA0E/B,oBAAoB,CAAC,GAAG,EAAE,wBAAwB,GAAG,MAAM;IAO3D,eAAe,CAAC,GAAG,EAAE,wBAAwB,GAAG,MAAM;IAOtD,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IAO3C,OAAO,CAAC,gBAAgB;IA2BxB,OAAO,CAAC,mBAAmB;IAmB3B,OAAO,CAAC,qBAAqB;IAmC7B,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,oBAAoB;IAS5B,OAAO,CAAC,qBAAqB;IASvB,sBAAsB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC;IAI3D,oBAAoB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC;yCA1OtD,qCAAqC;2CAArC,qCAAqC;CA6OjD"}
1	+ {"version":3,"file":"communication-monitor-resource.component.d.ts","sourceRoot":"","sources":["../../src/Communication/communication-monitor-resource.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,wBAAwB,EAAiC,MAAM,+BAA+B,CAAC;AAEtH,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;;AAGlE,UAAU,cAAc;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,gBAAgB;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,YAAY;IAClB,SAAS,EAAE,IAAI,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CACnB;AACD,qBAwea,qCAAsC,SAAQ,qBAAsB,YAAW,MAAM,EAAE,SAAS;IAmB7F,OAAO,CAAC,GAAG;IAlBhB,SAAS,UAAS;IAClB,KAAK;;;;;MAKV;IACK,UAAU,EAAE,wBAAwB,EAAE,CAAM;IAC5C,SAAS,EAAE,YAAY,EAAE,CAAM;IAC/B,WAAW;;;;;MAKhB;IACK,cAAc,EAAE,cAAc,EAAE,CAAM;IACtC,gBAAgB,EAAE,gBAAgB,EAAE,CAAM;gBAE7B,GAAG,EAAE,iBAAiB;IAIpC,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;IAK/B,WAAW,IAAI,IAAI;IAEN,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;IA0E/B,oBAAoB,CAAC,GAAG,EAAE,wBAAwB,GAAG,MAAM;IAO3D,eAAe,CAAC,GAAG,EAAE,wBAAwB,GAAG,MAAM;IAOtD,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IAO3C,OAAO,CAAC,gBAAgB;IA2BxB,OAAO,CAAC,mBAAmB;IAmB3B,OAAO,CAAC,qBAAqB;IAmC7B,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,oBAAoB;IAS5B,OAAO,CAAC,qBAAqB;IASvB,sBAAsB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC;IAI3D,oBAAoB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC;yCA1OtD,qCAAqC;2CAArC,qCAAqC;CA6OjD"}

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

@@ -122,7 +122,7 @@ function CommunicationMonitorResourceComponent_For_86_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(8, 10, channel_r4.Count), " messages");
     i0.ɵɵadvance(3);
-    i0.ɵɵstyleProp("width", channel_r4.Percentage, "%")("background", channel_r4.ColorClass === "email" ? "var(--mat-sys-primary)" : "#2e7d32");
+    i0.ɵɵstyleProp("width", channel_r4.Percentage, "%")("background", channel_r4.ColorClass === "email" ? "var(--mj-brand-primary)" : "var(--mj-status-success)");
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("", channel_r4.Percentage, "%");
 } }
@@ -488,7 +488,7 @@ let CommunicationMonitorResourceComponent = class CommunicationMonitorResourceCo
             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    }"] });
+        } }, 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    }"] });
 };
 CommunicationMonitorResourceComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'CommunicationMonitorResource')
@@ -642,7 +642,7 @@ export { CommunicationMonitorResourceComponent };
                       <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 class="channel-bar-fill" [style.width.%]="channel.Percentage" [style.background]="channel.ColorClass === 'email' ? 'var(--mj-brand-primary)' : 'var(--mj-status-success)'"></div>
                     </div>
                     <span class="channel-pct">{{channel.Percentage}}%</span>
                   </div>
@@ -659,7 +659,7 @@ export { CommunicationMonitorResourceComponent };
         </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    .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  "] }]
     }], () => [{ type: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CommunicationMonitorResourceComponent, { className: "CommunicationMonitorResourceComponent", filePath: "src/Communication/communication-monitor-resource.component.ts", lineNumber: 479 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CommunicationMonitorResourceComponent, { className: "CommunicationMonitorResourceComponent", filePath: "src/Communication/communication-monitor-resource.component.ts", lineNumber: 521 }); })();
 //# sourceMappingURL=communication-monitor-resource.component.js.map