@memberjunction/ng-dashboards 5.34.0 → 5.35.0

package/dist/Integration/components/overview/overview.component.js

@@ -10,43 +10,53 @@ import { RunView } from '@memberjunction/core';
 import { BaseResourceComponent } from '@memberjunction/ng-shared';
 import { IntegrationDataService, ResolveIntegrationIcon } from '../../services/integration-data.service';
 import * as i0 from "@angular/core";
-import * as i1 from "@memberjunction/ng-shared-generic";
-import * as i2 from "@angular/common";
+import * as i1 from "@memberjunction/ng-ui-components";
+import * as i2 from "@memberjunction/ng-shared-generic";
+import * as i3 from "@angular/common";
 const _forTrack0 = ($index, $item) => $item.Integration.ID;
 const _forTrack1 = ($index, $item) => $item.ID;
 const _forTrack2 = ($index, $item) => $item.Date;
 const _forTrack3 = ($index, $item) => $item.RunID;
-function OverviewComponent_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 5);
+function OverviewComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 1);
+    i0.ɵɵelement(1, "mj-stat-badge", 8);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("Count", ctx_r0.KPIs.TotalIntegrations);
 } }
-function OverviewComponent_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 6);
+function OverviewComponent_Conditional_7_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 10);
 } }
-function OverviewComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 4);
-    i0.ɵɵconditionalCreate(1, OverviewComponent_Conditional_1_Conditional_1_Template, 1, 0, "i", 5)(2, OverviewComponent_Conditional_1_Conditional_2_Template, 1, 0, "i", 6);
-    i0.ɵɵelementStart(3, "span", 7);
+function OverviewComponent_Conditional_7_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 11);
+} }
+function OverviewComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 9);
+    i0.ɵɵconditionalCreate(1, OverviewComponent_Conditional_7_Conditional_1_Template, 1, 0, "i", 10)(2, OverviewComponent_Conditional_7_Conditional_2_Template, 1, 0, "i", 11);
+    i0.ɵɵelementStart(3, "span", 12);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 8);
-    i0.ɵɵlistener("click", function OverviewComponent_Conditional_1_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.DismissNotification()); });
-    i0.ɵɵelement(6, "i", 9);
+    i0.ɵɵelementStart(5, "button", 13);
+    i0.ɵɵlistener("click", function OverviewComponent_Conditional_7_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.DismissNotification()); });
+    i0.ɵɵelement(6, "i", 14);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("notification-success", ctx_r1.Notification.Type === "success")("notification-error", ctx_r1.Notification.Type === "error");
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("notification-success", ctx_r0.Notification.Type === "success")("notification-error", ctx_r0.Notification.Type === "error");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.Notification.Type === "success" ? 1 : 2);
+    i0.ɵɵconditional(ctx_r0.Notification.Type === "success" ? 1 : 2);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r1.Notification.Message);
+    i0.ɵɵtextInterpolate(ctx_r0.Notification.Message);
 } }
-function OverviewComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 2);
+function OverviewComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-loading", 6);
 } }
-function OverviewComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 3);
-    i0.ɵɵelement(1, "i", 10);
+function OverviewComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 7);
+    i0.ɵɵelement(1, "i", 15);
     i0.ɵɵelementStart(2, "h3");
     i0.ɵɵtext(3, "No Integrations Configured");
     i0.ɵɵelementEnd();
@@ -54,128 +64,128 @@ function OverviewComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(5, "Set up your first integration using the Connection Studio to start syncing data.");
     i0.ɵɵelementEnd()();
 } }
-function OverviewComponent_Conditional_4_Conditional_30_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 26);
+function OverviewComponent_Conditional_10_Conditional_30_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 31);
 } }
-function OverviewComponent_Conditional_4_For_53_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 51);
+function OverviewComponent_Conditional_10_For_53_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 56);
 } }
-function OverviewComponent_Conditional_4_For_53_For_48_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 50);
+function OverviewComponent_Conditional_10_For_53_For_48_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 55);
 } if (rf & 2) {
     const run_r4 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵclassMap(ctx_r1.GetSparklineDotClass(run_r4));
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassMap(ctx_r0.GetSparklineDotClass(run_r4));
     i0.ɵɵproperty("title", run_r4.Status + " - " + (run_r4.StartedAt ?? "N/A"));
 } }
-function OverviewComponent_Conditional_4_For_53_Conditional_49_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 67);
+function OverviewComponent_Conditional_10_For_53_Conditional_49_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 72);
     i0.ɵɵtext(1, "No runs");
     i0.ɵɵelementEnd();
 } }
-function OverviewComponent_Conditional_4_For_53_Conditional_51_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 69);
-    i0.ɵɵelement(1, "i", 71);
+function OverviewComponent_Conditional_10_For_53_Conditional_51_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "button", 74);
+    i0.ɵɵelement(1, "i", 76);
     i0.ɵɵtext(2, " Running... ");
     i0.ɵɵelementEnd();
 } }
-function OverviewComponent_Conditional_4_For_53_Conditional_52_Template(rf, ctx) { if (rf & 1) {
+function OverviewComponent_Conditional_10_For_53_Conditional_52_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 72);
-    i0.ɵɵlistener("click", function OverviewComponent_Conditional_4_For_53_Conditional_52_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const summary_r6 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.RunSync(summary_r6.Integration.ID)); });
-    i0.ɵɵelement(1, "i", 73);
+    i0.ɵɵelementStart(0, "button", 77);
+    i0.ɵɵlistener("click", function OverviewComponent_Conditional_10_For_53_Conditional_52_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const summary_r6 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.RunSync(summary_r6.Integration.ID)); });
+    i0.ɵɵelement(1, "i", 78);
     i0.ɵɵtext(2, " Sync Now ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const summary_r6 = i0.ɵɵnextContext().$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("disabled", !summary_r6.Integration.IsActive || ctx_r1.RunningIntegrationID !== null);
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("disabled", !summary_r6.Integration.IsActive || ctx_r0.RunningIntegrationID !== null);
 } }
-function OverviewComponent_Conditional_4_For_53_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div")(1, "div", 44)(2, "div", 45)(3, "div", 46);
+function OverviewComponent_Conditional_10_For_53_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div")(1, "div", 49)(2, "div", 50)(3, "div", 51);
     i0.ɵɵelement(4, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 47)(6, "span", 48);
+    i0.ɵɵelementStart(5, "div", 52)(6, "span", 53);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "span", 49);
+    i0.ɵɵelementStart(8, "span", 54);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(10, "div", 50);
-    i0.ɵɵconditionalCreate(11, OverviewComponent_Conditional_4_For_53_Conditional_11_Template, 1, 0, "span", 51);
+    i0.ɵɵelementStart(10, "div", 55);
+    i0.ɵɵconditionalCreate(11, OverviewComponent_Conditional_10_For_53_Conditional_11_Template, 1, 0, "span", 56);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "div", 52)(13, "div", 53);
+    i0.ɵɵelementStart(12, "div", 57)(13, "div", 58);
     i0.ɵɵelement(14, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "div", 54);
-    i0.ɵɵelement(16, "div", 55);
-    i0.ɵɵelementStart(17, "span", 56);
+    i0.ɵɵelementStart(15, "div", 59);
+    i0.ɵɵelement(16, "div", 60);
+    i0.ɵɵelementStart(17, "span", 61);
     i0.ɵɵtext(18);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(19, "div", 55);
+    i0.ɵɵelement(19, "div", 60);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "div", 57);
-    i0.ɵɵelement(21, "i", 58);
+    i0.ɵɵelementStart(20, "div", 62);
+    i0.ɵɵelement(21, "i", 63);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(22, "div", 59)(23, "div", 60)(24, "span", 61);
+    i0.ɵɵelementStart(22, "div", 64)(23, "div", 65)(24, "span", 66);
     i0.ɵɵtext(25, "Last sync");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(26, "span", 62);
+    i0.ɵɵelementStart(26, "span", 67);
     i0.ɵɵtext(27);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(28, "div", 60)(29, "span", 61);
+    i0.ɵɵelementStart(28, "div", 65)(29, "span", 66);
     i0.ɵɵtext(30, "Records");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(31, "span", 62);
+    i0.ɵɵelementStart(31, "span", 67);
     i0.ɵɵtext(32);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(33, "div", 60)(34, "span", 61);
+    i0.ɵɵelementStart(33, "div", 65)(34, "span", 66);
     i0.ɵɵtext(35, "Duration");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(36, "span", 62);
+    i0.ɵɵelementStart(36, "span", 67);
     i0.ɵɵtext(37);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(38, "div", 60)(39, "span", 61);
+    i0.ɵɵelementStart(38, "div", 65)(39, "span", 66);
     i0.ɵɵtext(40, "Errors");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(41, "span", 62);
+    i0.ɵɵelementStart(41, "span", 67);
     i0.ɵɵtext(42);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(43, "div", 63)(44, "span", 64);
+    i0.ɵɵelementStart(43, "div", 68)(44, "span", 69);
     i0.ɵɵtext(45, "Recent runs");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(46, "div", 65);
-    i0.ɵɵrepeaterCreate(47, OverviewComponent_Conditional_4_For_53_For_48_Template, 1, 3, "span", 66, _forTrack1);
-    i0.ɵɵconditionalCreate(49, OverviewComponent_Conditional_4_For_53_Conditional_49_Template, 2, 0, "span", 67);
+    i0.ɵɵelementStart(46, "div", 70);
+    i0.ɵɵrepeaterCreate(47, OverviewComponent_Conditional_10_For_53_For_48_Template, 1, 3, "span", 71, _forTrack1);
+    i0.ɵɵconditionalCreate(49, OverviewComponent_Conditional_10_For_53_Conditional_49_Template, 2, 0, "span", 72);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(50, "div", 68);
-    i0.ɵɵconditionalCreate(51, OverviewComponent_Conditional_4_For_53_Conditional_51_Template, 3, 0, "button", 69)(52, OverviewComponent_Conditional_4_For_53_Conditional_52_Template, 3, 1, "button", 70);
+    i0.ɵɵelementStart(50, "div", 73);
+    i0.ɵɵconditionalCreate(51, OverviewComponent_Conditional_10_For_53_Conditional_51_Template, 3, 0, "button", 74)(52, OverviewComponent_Conditional_10_For_53_Conditional_52_Template, 3, 1, "button", 75);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const summary_r6 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassMap(ctx_r1.GetCardBorderClass(summary_r6.StatusColor));
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassMap(ctx_r0.GetCardBorderClass(summary_r6.StatusColor));
     i0.ɵɵadvance(4);
-    i0.ɵɵclassMap(ctx_r1.GetIntegrationIcon(summary_r6));
+    i0.ɵɵclassMap(ctx_r0.GetIntegrationIcon(summary_r6));
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(summary_r6.Integration.Name);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate((summary_r6.SourceType == null ? null : summary_r6.SourceType.Name) ?? "Custom");
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r1.GetStatusDotClass(summary_r6.StatusColor));
-    i0.ɵɵproperty("title", ctx_r1.GetStatusLabel(summary_r6.StatusColor));
+    i0.ɵɵclassMap(ctx_r0.GetStatusDotClass(summary_r6.StatusColor));
+    i0.ɵɵproperty("title", ctx_r0.GetStatusLabel(summary_r6.StatusColor));
     i0.ɵɵadvance();
     i0.ɵɵconditional((summary_r6.LatestRun == null ? null : summary_r6.LatestRun.Status) === "In Progress" ? 11 : -1);
     i0.ɵɵadvance(3);
-    i0.ɵɵclassMap(ctx_r1.GetIntegrationIcon(summary_r6));
+    i0.ɵɵclassMap(ctx_r0.GetIntegrationIcon(summary_r6));
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1("", ctx_r1.GetEntityMapCount(summary_r6.Integration.ID), " maps");
+    i0.ɵɵtextInterpolate1("", ctx_r0.GetEntityMapCount(summary_r6.Integration.ID), " maps");
     i0.ɵɵadvance(9);
     i0.ɵɵtextInterpolate(summary_r6.RelativeTime);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r1.FormatNumber((summary_r6.LatestRun == null ? null : summary_r6.LatestRun.TotalRecords) ?? 0));
+    i0.ɵɵtextInterpolate(ctx_r0.FormatNumber((summary_r6.LatestRun == null ? null : summary_r6.LatestRun.TotalRecords) ?? 0));
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r1.FormatDuration(summary_r6.DurationMs));
+    i0.ɵɵtextInterpolate(ctx_r0.FormatDuration(summary_r6.DurationMs));
     i0.ɵɵadvance(4);
     i0.ɵɵclassProp("stat-error", summary_r6.TotalErrors > 0);
     i0.ɵɵadvance();
@@ -185,63 +195,63 @@ function OverviewComponent_Conditional_4_For_53_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(summary_r6.RecentRuns.length === 0 ? 49 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.IsRunning(summary_r6.Integration.ID) ? 51 : 52);
+    i0.ɵɵconditional(ctx_r0.IsRunning(summary_r6.Integration.ID) ? 51 : 52);
 } }
-function OverviewComponent_Conditional_4_Conditional_59_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 39);
+function OverviewComponent_Conditional_10_Conditional_59_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 44);
     i0.ɵɵtext(1, "No data available.");
     i0.ɵɵelementEnd();
 } }
-function OverviewComponent_Conditional_4_Conditional_60_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 74)(1, "div", 75);
+function OverviewComponent_Conditional_10_Conditional_60_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 79)(1, "div", 80);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(3, "div", 76);
-    i0.ɵɵelementStart(4, "div", 77);
+    i0.ɵɵelement(3, "div", 81);
+    i0.ɵɵelementStart(4, "div", 82);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const day_r7 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(3);
+    const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r1.FormatNumber(day_r7.Records));
+    i0.ɵɵtextInterpolate(ctx_r0.FormatNumber(day_r7.Records));
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("height", ctx_r1.BarHeight(day_r7.Records), "%");
+    i0.ɵɵstyleProp("height", ctx_r0.BarHeight(day_r7.Records), "%");
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(day_r7.Label);
 } }
-function OverviewComponent_Conditional_4_Conditional_60_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 40);
-    i0.ɵɵrepeaterCreate(1, OverviewComponent_Conditional_4_Conditional_60_For_2_Template, 6, 4, "div", 74, _forTrack2);
+function OverviewComponent_Conditional_10_Conditional_60_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 45);
+    i0.ɵɵrepeaterCreate(1, OverviewComponent_Conditional_10_Conditional_60_For_2_Template, 6, 4, "div", 79, _forTrack2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r1.DailyCounts);
+    i0.ɵɵrepeater(ctx_r0.DailyCounts);
 } }
-function OverviewComponent_Conditional_4_Conditional_65_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 39);
+function OverviewComponent_Conditional_10_Conditional_65_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 44);
     i0.ɵɵtext(1, "No recent activity.");
     i0.ɵɵelementEnd();
 } }
-function OverviewComponent_Conditional_4_Conditional_66_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 78);
+function OverviewComponent_Conditional_10_Conditional_66_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 83);
     i0.ɵɵelement(1, "i");
-    i0.ɵɵelementStart(2, "div", 79)(3, "span", 80);
+    i0.ɵɵelementStart(2, "div", 84)(3, "span", 85);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 81);
+    i0.ɵɵelementStart(5, "span", 86);
     i0.ɵɵtext(6);
     i0.ɵɵpipe(7, "number");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "span", 82);
+    i0.ɵɵelementStart(8, "span", 87);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const item_r8 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(3);
+    const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r1.ActivityStatusIcon(item_r8.Status));
+    i0.ɵɵclassMap(ctx_r0.ActivityStatusIcon(item_r8.Status));
     i0.ɵɵclassProp("feed-icon-green", item_r8.StatusColor === "green")("feed-icon-red", item_r8.StatusColor === "red")("feed-icon-amber", item_r8.StatusColor === "amber");
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(item_r8.IntegrationName);
@@ -252,111 +262,111 @@ function OverviewComponent_Conditional_4_Conditional_66_For_2_Template(rf, ctx)
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", item_r8.Status, " ");
 } }
-function OverviewComponent_Conditional_4_Conditional_66_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 43);
-    i0.ɵɵrepeaterCreate(1, OverviewComponent_Conditional_4_Conditional_66_For_2_Template, 10, 16, "div", 78, _forTrack3);
+function OverviewComponent_Conditional_10_Conditional_66_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 48);
+    i0.ɵɵrepeaterCreate(1, OverviewComponent_Conditional_10_Conditional_66_For_2_Template, 10, 16, "div", 83, _forTrack3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r1.ActivityFeed);
+    i0.ɵɵrepeater(ctx_r0.ActivityFeed);
 } }
-function OverviewComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function OverviewComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 11)(1, "div", 12)(2, "div", 13);
-    i0.ɵɵelement(3, "i", 14);
+    i0.ɵɵelementStart(0, "div", 16)(1, "div", 17)(2, "div", 18);
+    i0.ɵɵelement(3, "i", 19);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 15)(5, "span", 16);
+    i0.ɵɵelementStart(4, "div", 20)(5, "span", 21);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "span", 17);
+    i0.ɵɵelementStart(7, "span", 22);
     i0.ɵɵtext(8, "Total Pipelines");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(9, "div", 12)(10, "div", 18);
-    i0.ɵɵelement(11, "i", 19);
+    i0.ɵɵelementStart(9, "div", 17)(10, "div", 23);
+    i0.ɵɵelement(11, "i", 24);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "div", 15)(13, "span", 16);
+    i0.ɵɵelementStart(12, "div", 20)(13, "span", 21);
     i0.ɵɵtext(14);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "span", 17);
+    i0.ɵɵelementStart(15, "span", 22);
     i0.ɵɵtext(16, "Records Today");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(17, "div", 12)(18, "div", 20)(19, "div", 21)(20, "span", 22);
+    i0.ɵɵelementStart(17, "div", 17)(18, "div", 25)(19, "div", 26)(20, "span", 27);
     i0.ɵɵtext(21);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(22, "div", 15)(23, "span", 23);
+    i0.ɵɵelementStart(22, "div", 20)(23, "span", 28);
     i0.ɵɵtext(24);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(25, "span", 17);
+    i0.ɵɵelementStart(25, "span", 22);
     i0.ɵɵtext(26, "Success Rate");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(27, "div", 12)(28, "div", 24);
-    i0.ɵɵelement(29, "i", 25);
-    i0.ɵɵconditionalCreate(30, OverviewComponent_Conditional_4_Conditional_30_Template, 1, 0, "span", 26);
+    i0.ɵɵelementStart(27, "div", 17)(28, "div", 29);
+    i0.ɵɵelement(29, "i", 30);
+    i0.ɵɵconditionalCreate(30, OverviewComponent_Conditional_10_Conditional_30_Template, 1, 0, "span", 31);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(31, "div", 15)(32, "span", 16);
+    i0.ɵɵelementStart(31, "div", 20)(32, "span", 21);
     i0.ɵɵtext(33);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(34, "span", 17);
+    i0.ɵɵelementStart(34, "span", 22);
     i0.ɵɵtext(35, "Active Now");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(36, "div", 12)(37, "div", 27);
-    i0.ɵɵelement(38, "i", 28);
+    i0.ɵɵelementStart(36, "div", 17)(37, "div", 32);
+    i0.ɵɵelement(38, "i", 33);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(39, "div", 15)(40, "span", 16);
+    i0.ɵɵelementStart(39, "div", 20)(40, "span", 21);
     i0.ɵɵtext(41);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(42, "span", 17);
+    i0.ɵɵelementStart(42, "span", 22);
     i0.ɵɵtext(43, "Avg Duration");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(44, "div", 29)(45, "h3");
-    i0.ɵɵelement(46, "i", 30);
+    i0.ɵɵelementStart(44, "div", 34)(45, "h3");
+    i0.ɵɵelement(46, "i", 35);
     i0.ɵɵtext(47, " Pipeline Health");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(48, "button", 31);
-    i0.ɵɵlistener("click", function OverviewComponent_Conditional_4_Template_button_click_48_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.Refresh()); });
-    i0.ɵɵelement(49, "i", 32);
+    i0.ɵɵelementStart(48, "button", 36);
+    i0.ɵɵlistener("click", function OverviewComponent_Conditional_10_Template_button_click_48_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.Refresh()); });
+    i0.ɵɵelement(49, "i", 37);
     i0.ɵɵtext(50, " Refresh ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(51, "div", 33);
-    i0.ɵɵrepeaterCreate(52, OverviewComponent_Conditional_4_For_53_Template, 53, 21, "div", 34, _forTrack0);
+    i0.ɵɵelementStart(51, "div", 38);
+    i0.ɵɵrepeaterCreate(52, OverviewComponent_Conditional_10_For_53_Template, 53, 21, "div", 39, _forTrack0);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(54, "div", 35)(55, "div", 36)(56, "h3", 37);
-    i0.ɵɵelement(57, "i", 38);
+    i0.ɵɵelementStart(54, "div", 40)(55, "div", 41)(56, "h3", 42);
+    i0.ɵɵelement(57, "i", 43);
     i0.ɵɵtext(58, " Records Synced (7 days)");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(59, OverviewComponent_Conditional_4_Conditional_59_Template, 2, 0, "p", 39)(60, OverviewComponent_Conditional_4_Conditional_60_Template, 3, 0, "div", 40);
+    i0.ɵɵconditionalCreate(59, OverviewComponent_Conditional_10_Conditional_59_Template, 2, 0, "p", 44)(60, OverviewComponent_Conditional_10_Conditional_60_Template, 3, 0, "div", 45);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(61, "div", 41)(62, "h3", 37);
-    i0.ɵɵelement(63, "i", 42);
+    i0.ɵɵelementStart(61, "div", 46)(62, "h3", 42);
+    i0.ɵɵelement(63, "i", 47);
     i0.ɵɵtext(64, " Recent Activity");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(65, OverviewComponent_Conditional_4_Conditional_65_Template, 2, 0, "p", 39)(66, OverviewComponent_Conditional_4_Conditional_66_Template, 3, 0, "div", 43);
+    i0.ɵɵconditionalCreate(65, OverviewComponent_Conditional_10_Conditional_65_Template, 2, 0, "p", 44)(66, OverviewComponent_Conditional_10_Conditional_66_Template, 3, 0, "div", 48);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate(ctx_r1.KPIs.TotalIntegrations);
+    i0.ɵɵtextInterpolate(ctx_r0.KPIs.TotalIntegrations);
     i0.ɵɵadvance(8);
-    i0.ɵɵtextInterpolate(ctx_r1.FormatNumber(ctx_r1.KPIs.RecordsSyncedToday));
+    i0.ɵɵtextInterpolate(ctx_r0.FormatNumber(ctx_r0.KPIs.RecordsSyncedToday));
     i0.ɵɵadvance(4);
-    i0.ɵɵstyleProp("background", ctx_r1.SuccessRateGradient);
+    i0.ɵɵstyleProp("background", ctx_r0.SuccessRateGradient);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1("", ctx_r1.SuccessRate, "%");
+    i0.ɵɵtextInterpolate1("", ctx_r0.SuccessRate, "%");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1("", ctx_r1.SuccessRate, "%");
+    i0.ɵɵtextInterpolate1("", ctx_r0.SuccessRate, "%");
     i0.ɵɵadvance(6);
-    i0.ɵɵconditional(ctx_r1.ActiveCount > 0 ? 30 : -1);
+    i0.ɵɵconditional(ctx_r0.ActiveCount > 0 ? 30 : -1);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r1.ActiveCount);
+    i0.ɵɵtextInterpolate(ctx_r0.ActiveCount);
     i0.ɵɵadvance(8);
-    i0.ɵɵtextInterpolate(ctx_r1.FormatDuration(ctx_r1.KPIs.AverageSyncDurationMs));
+    i0.ɵɵtextInterpolate(ctx_r0.FormatDuration(ctx_r0.KPIs.AverageSyncDurationMs));
     i0.ɵɵadvance(11);
-    i0.ɵɵrepeater(ctx_r1.Summaries);
+    i0.ɵɵrepeater(ctx_r0.Summaries);
     i0.ɵɵadvance(7);
-    i0.ɵɵconditional(ctx_r1.DailyCounts.length === 0 ? 59 : 60);
+    i0.ɵɵconditional(ctx_r0.DailyCounts.length === 0 ? 59 : 60);
     i0.ɵɵadvance(6);
-    i0.ɵɵconditional(ctx_r1.ActivityFeed.length === 0 ? 65 : 66);
+    i0.ɵɵconditional(ctx_r0.ActivityFeed.length === 0 ? 65 : 66);
 } }
 let OverviewComponent = class OverviewComponent extends BaseResourceComponent {
     Summaries = [];
@@ -601,17 +611,26 @@ let OverviewComponent = class OverviewComponent extends BaseResourceComponent {
         }
     }
     static ɵfac = /*@__PURE__*/ (() => { let ɵOverviewComponent_BaseFactory; return function OverviewComponent_Factory(__ngFactoryType__) { return (ɵOverviewComponent_BaseFactory || (ɵOverviewComponent_BaseFactory = i0.ɵɵgetInheritedFactory(OverviewComponent)))(__ngFactoryType__ || OverviewComponent); }; })();
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: OverviewComponent, selectors: [["app-integration-overview"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 2, consts: [[1, "overview"], [1, "notification", 3, "notification-success", "notification-error"], ["text", "Loading integrations...", "size", "medium"], [1, "empty-state"], [1, "notification"], [1, "fa-solid", "fa-circle-check"], [1, "fa-solid", "fa-circle-xmark"], [1, "notification-message"], [1, "notification-dismiss", 3, "click"], [1, "fa-solid", "fa-times"], [1, "fa-solid", "fa-plug-circle-xmark"], [1, "metric-strip"], [1, "metric-card"], [1, "metric-icon", "metric-icon-blue"], [1, "fa-solid", "fa-diagram-project"], [1, "metric-body"], [1, "metric-value"], [1, "metric-label"], [1, "metric-icon", "metric-icon-green"], [1, "fa-solid", "fa-database"], [1, "metric-ring"], [1, "metric-ring-inner"], [1, "metric-ring-value"], [1, "metric-value", "metric-value-indigo"], [1, "metric-icon", "metric-icon-emerald"], [1, "fa-solid", "fa-bolt"], [1, "pulse-dot"], [1, "metric-icon", "metric-icon-orange"], [1, "fa-solid", "fa-clock"], [1, "section-heading"], [1, "fa-solid", "fa-heart-pulse"], [1, "refresh-btn", 3, "click"], [1, "fa-solid", "fa-arrows-rotate"], [1, "pipeline-grid"], [3, "class"], [1, "bottom-split"], [1, "chart-panel"], [1, "panel-title"], [1, "fa-solid", "fa-chart-bar"], [1, "empty-hint"], [1, "bar-chart"], [1, "feed-panel"], [1, "fa-solid", "fa-stream"], [1, "feed-list"], [1, "card-header"], [1, "card-header-left"], [1, "card-icon-wrap"], [1, "card-title-wrap"], [1, "card-title"], [1, "card-subtitle"], [3, "title"], [1, "dot-pulse"], [1, "pipeline-flow"], [1, "flow-node"], [1, "flow-arrow"], [1, "flow-line"], [1, "flow-count"], [1, "flow-node", "flow-node-mj"], [1, "fa-solid", "fa-layer-group"], [1, "card-stats"], [1, "stat-item"], [1, "stat-label"], [1, "stat-value"], [1, "sparkline-row"], [1, "sparkline-label"], [1, "sparkline-dots"], [3, "class", "title"], [1, "sparkline-none"], [1, "card-footer"], ["disabled", "", 1, "btn-sync", "btn-sync-disabled"], [1, "btn-sync", 3, "disabled"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "btn-sync", 3, "click", "disabled"], [1, "fa-solid", "fa-play"], [1, "bar-column"], [1, "bar-count"], [1, "bar-fill"], [1, "bar-day"], [1, "feed-item"], [1, "feed-details"], [1, "feed-name"], [1, "feed-meta"], [1, "feed-badge"]], template: function OverviewComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵconditionalCreate(1, OverviewComponent_Conditional_1_Template, 7, 6, "div", 1);
-            i0.ɵɵconditionalCreate(2, OverviewComponent_Conditional_2_Template, 1, 0, "mj-loading", 2)(3, OverviewComponent_Conditional_3_Template, 6, 0, "div", 3)(4, OverviewComponent_Conditional_4_Template, 67, 11);
-            i0.ɵɵelementEnd();
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: OverviewComponent, selectors: [["app-integration-overview"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 11, vars: 4, consts: [["Title", "Integration Overview", "Icon", "fa-solid fa-gauge-high", "Subtitle", "Health, throughput, and activity across all integrations"], ["meta", ""], ["actions", ""], [3, "Clicked", "Loading"], [1, "overview"], [1, "notification", 3, "notification-success", "notification-error"], ["text", "Loading integrations...", "size", "medium"], [1, "empty-state"], ["Label", "integrations", 3, "Count"], [1, "notification"], [1, "fa-solid", "fa-circle-check"], [1, "fa-solid", "fa-circle-xmark"], [1, "notification-message"], [1, "notification-dismiss", 3, "click"], [1, "fa-solid", "fa-times"], [1, "fa-solid", "fa-plug-circle-xmark"], [1, "metric-strip"], [1, "metric-card"], [1, "metric-icon", "metric-icon-blue"], [1, "fa-solid", "fa-diagram-project"], [1, "metric-body"], [1, "metric-value"], [1, "metric-label"], [1, "metric-icon", "metric-icon-green"], [1, "fa-solid", "fa-database"], [1, "metric-ring"], [1, "metric-ring-inner"], [1, "metric-ring-value"], [1, "metric-value", "metric-value-indigo"], [1, "metric-icon", "metric-icon-emerald"], [1, "fa-solid", "fa-bolt"], [1, "pulse-dot"], [1, "metric-icon", "metric-icon-orange"], [1, "fa-solid", "fa-clock"], [1, "section-heading"], [1, "fa-solid", "fa-heart-pulse"], [1, "refresh-btn", 3, "click"], [1, "fa-solid", "fa-arrows-rotate"], [1, "pipeline-grid"], [3, "class"], [1, "bottom-split"], [1, "chart-panel"], [1, "panel-title"], [1, "fa-solid", "fa-chart-bar"], [1, "empty-hint"], [1, "bar-chart"], [1, "feed-panel"], [1, "fa-solid", "fa-stream"], [1, "feed-list"], [1, "card-header"], [1, "card-header-left"], [1, "card-icon-wrap"], [1, "card-title-wrap"], [1, "card-title"], [1, "card-subtitle"], [3, "title"], [1, "dot-pulse"], [1, "pipeline-flow"], [1, "flow-node"], [1, "flow-arrow"], [1, "flow-line"], [1, "flow-count"], [1, "flow-node", "flow-node-mj"], [1, "fa-solid", "fa-layer-group"], [1, "card-stats"], [1, "stat-item"], [1, "stat-label"], [1, "stat-value"], [1, "sparkline-row"], [1, "sparkline-label"], [1, "sparkline-dots"], [3, "class", "title"], [1, "sparkline-none"], [1, "card-footer"], ["disabled", "", 1, "btn-sync", "btn-sync-disabled"], [1, "btn-sync", 3, "disabled"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "btn-sync", 3, "click", "disabled"], [1, "fa-solid", "fa-play"], [1, "bar-column"], [1, "bar-count"], [1, "bar-fill"], [1, "bar-day"], [1, "feed-item"], [1, "feed-details"], [1, "feed-name"], [1, "feed-meta"], [1, "feed-badge"]], template: function OverviewComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "mj-page-layout")(1, "mj-page-header", 0);
+            i0.ɵɵconditionalCreate(2, OverviewComponent_Conditional_2_Template, 2, 1, "div", 1);
+            i0.ɵɵelementStart(3, "div", 2)(4, "mj-refresh-button", 3);
+            i0.ɵɵlistener("Clicked", function OverviewComponent_Template_mj_refresh_button_Clicked_4_listener() { return ctx.Refresh(); });
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(5, "mj-page-body")(6, "div", 4);
+            i0.ɵɵconditionalCreate(7, OverviewComponent_Conditional_7_Template, 7, 6, "div", 5);
+            i0.ɵɵconditionalCreate(8, OverviewComponent_Conditional_8_Template, 1, 0, "mj-loading", 6)(9, OverviewComponent_Conditional_9_Template, 6, 0, "div", 7)(10, OverviewComponent_Conditional_10_Template, 67, 11);
+            i0.ɵɵelementEnd()()();
         } if (rf & 2) {
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.Summaries.length > 0 ? 2 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("Loading", ctx.IsLoading);
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.Notification ? 7 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.Notification ? 1 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.IsLoading ? 2 : ctx.Summaries.length === 0 ? 3 : 4);
-        } }, dependencies: [i1.LoadingComponent, i2.DecimalPipe], styles: ["\n\n\n\n.overview[_ngcontent-%COMP%] {\n  padding: 28px;\n  max-width: 1440px;\n  margin: 0 auto;\n  background: var(--mj-bg-page);\n  min-height: 100%;\n}\n\n\n\n\n\n.notification[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 12px 16px;\n  border-radius: 10px;\n  margin-bottom: 20px;\n  font-size: 13px;\n  font-weight: 500;\n  animation: _ngcontent-%COMP%_slideDown 0.25s ease-out;\n}\n.notification[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:first-child { font-size: 16px; }\n.notification-message[_ngcontent-%COMP%] { flex: 1; }\n.notification-success[_ngcontent-%COMP%] {\n  background: var(--mj-status-success-bg);\n  color: var(--mj-color-success-800);\n  border: 1px solid var(--mj-color-success-200);\n}\n.notification-error[_ngcontent-%COMP%] {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error);\n  border: 1px solid var(--mj-color-error-200);\n}\n.notification-dismiss[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: inherit;\n  opacity: 0.5;\n  font-size: 14px;\n  padding: 4px;\n  line-height: 1;\n}\n.notification-dismiss[_ngcontent-%COMP%]:hover { opacity: 1; }\n\n@keyframes _ngcontent-%COMP%_slideDown {\n  from { opacity: 0; transform: translateY(-8px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 100px 20px;\n  color: var(--mj-text-disabled);\n}\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 64px;\n  margin-bottom: 20px;\n  display: block;\n  color: var(--mj-color-neutral-300);\n}\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 8px 0;\n  font-size: 20px;\n  color: var(--mj-text-secondary);\n}\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  max-width: 400px;\n  margin-inline: auto;\n}\n\n\n\n\n\n.metric-strip[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  gap: 16px;\n  margin-bottom: 32px;\n}\n\n.metric-card[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 18px 16px;\n  border-radius: 12px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n  transition: box-shadow 0.2s, transform 0.2s;\n}\n.metric-card[_ngcontent-%COMP%]:hover {\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  transform: translateY(-1px);\n}\n\n.metric-icon[_ngcontent-%COMP%] {\n  position: relative;\n  width: 44px;\n  height: 44px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 18px;\n  flex-shrink: 0;\n}\n.metric-icon-blue[_ngcontent-%COMP%]   { background: var(--mj-status-info-bg); color: var(--mj-brand-primary); }\n.metric-icon-green[_ngcontent-%COMP%]  { background: var(--mj-status-success-bg); color: var(--mj-color-success-600); }\n.metric-icon-emerald[_ngcontent-%COMP%] { background: var(--mj-status-success-bg); color: var(--mj-color-success-600); }\n.metric-icon-orange[_ngcontent-%COMP%] { background: var(--mj-color-warning-50); color: var(--mj-color-warning-600); }\n\n.metric-body[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.metric-value[_ngcontent-%COMP%] {\n  font-size: 22px;\n  font-weight: 700;\n  line-height: 1.2;\n  color: var(--mj-text-primary);\n}\n.metric-value-indigo[_ngcontent-%COMP%] { color: var(--mj-color-indigo-500); }\n\n.metric-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.4px;\n  font-weight: 500;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n\n\n.metric-ring[_ngcontent-%COMP%] {\n  width: 44px;\n  height: 44px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n.metric-ring-inner[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: var(--mj-bg-surface);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.metric-ring-value[_ngcontent-%COMP%] {\n  font-size: 8px;\n  font-weight: 700;\n  color: var(--mj-color-indigo-500);\n}\n\n\n\n.pulse-dot[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 2px;\n  right: 2px;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: var(--mj-color-success-600);\n  animation: _ngcontent-%COMP%_pulse 1.5s ease-in-out infinite;\n}\n\n@keyframes _ngcontent-%COMP%_pulse {\n  0%, 100% { opacity: 1; transform: scale(1); }\n  50%      { opacity: 0.5; transform: scale(1.4); }\n}\n\n\n\n\n\n.section-heading[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 16px;\n}\n.section-heading[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n.section-heading[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 8px;\n  color: var(--mj-text-muted);\n}\n\n.refresh-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.15s, border-color 0.15s;\n}\n.refresh-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-status-info-bg);\n  border-color: var(--mj-color-info-200);\n}\n\n.pipeline-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 20px;\n  margin-bottom: 32px;\n}\n\n.pipeline-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  padding: 20px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n  transition: box-shadow 0.2s, transform 0.2s;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n.pipeline-card[_ngcontent-%COMP%]:hover {\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);\n  transform: translateY(-2px);\n}\n\n.pipeline-card-error[_ngcontent-%COMP%] {\n  border-left: 3px solid var(--mj-status-error);\n}\n\n\n\n.card-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n}\n.card-header-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  min-width: 0;\n}\n.card-icon-wrap[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  border-radius: 10px;\n  background: var(--mj-status-info-bg);\n  color: var(--mj-brand-primary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  flex-shrink: 0;\n}\n.card-title-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n.card-title[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.card-subtitle[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n}\n\n\n\n.status-dot[_ngcontent-%COMP%] {\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  margin-top: 4px;\n  position: relative;\n}\n.status-dot-green[_ngcontent-%COMP%]  { background: var(--mj-color-success-600); }\n.status-dot-amber[_ngcontent-%COMP%]  { background: var(--mj-status-warning); }\n.status-dot-red[_ngcontent-%COMP%]    { background: var(--mj-status-error); }\n.status-dot-gray[_ngcontent-%COMP%]   { background: var(--mj-color-neutral-300); }\n\n.dot-pulse[_ngcontent-%COMP%] {\n  position: absolute;\n  inset: -3px;\n  border-radius: 50%;\n  border: 2px solid var(--mj-status-warning);\n  animation: _ngcontent-%COMP%_dotPulse 1.5s ease-in-out infinite;\n}\n@keyframes _ngcontent-%COMP%_dotPulse {\n  0%, 100% { opacity: 0.3; transform: scale(1); }\n  50%      { opacity: 0; transform: scale(1.6); }\n}\n\n\n\n.pipeline-flow[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0;\n  padding: 8px 0;\n}\n.flow-node[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  flex-shrink: 0;\n}\n.flow-node-mj[_ngcontent-%COMP%] {\n  background: var(--mj-status-info-bg);\n  color: var(--mj-brand-primary);\n}\n.flow-arrow[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: 0;\n  padding: 0 4px;\n}\n.flow-line[_ngcontent-%COMP%] {\n  flex: 1;\n  height: 2px;\n  background: var(--mj-border-default);\n}\n.flow-count[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n  padding: 2px 8px;\n  background: var(--mj-bg-page);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  font-weight: 500;\n}\n\n\n\n.card-stats[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 8px;\n}\n.stat-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n}\n.stat-label[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  margin-bottom: 2px;\n}\n.stat-value[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n.stat-error[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n\n\n.sparkline-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n.sparkline-label[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  white-space: nowrap;\n}\n.sparkline-dots[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n.spark-dot[_ngcontent-%COMP%] {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  display: inline-block;\n}\n.spark-green[_ngcontent-%COMP%] { background: var(--mj-color-success-600); }\n.spark-red[_ngcontent-%COMP%]   { background: var(--mj-status-error); }\n.spark-amber[_ngcontent-%COMP%] { background: var(--mj-status-warning); }\n.spark-gray[_ngcontent-%COMP%]  { background: var(--mj-color-neutral-300); }\n.sparkline-none[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-color-neutral-300);\n  font-style: italic;\n}\n\n\n\n.card-footer[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n  padding-top: 4px;\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n.btn-sync[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 5px 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s, border-color 0.15s;\n}\n.btn-sync[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-status-info-bg);\n  border-color: var(--mj-color-info-200);\n}\n.btn-sync[_ngcontent-%COMP%]:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n.btn-sync-disabled[_ngcontent-%COMP%] {\n  color: var(--mj-text-disabled);\n  border-color: var(--mj-border-default);\n}\n\n\n\n\n\n.bottom-split[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 20px;\n}\n\n.panel-title[_ngcontent-%COMP%] {\n  margin: 0 0 16px 0;\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n.panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 8px;\n  color: var(--mj-text-muted);\n}\n\n\n\n.chart-panel[_ngcontent-%COMP%] {\n  flex: 6;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  padding: 20px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.bar-chart[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: 12px;\n  height: 200px;\n  padding-top: 24px;\n}\n.bar-column[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-end;\n  height: 100%;\n  position: relative;\n}\n.bar-count[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  margin-bottom: 4px;\n}\n.bar-fill[_ngcontent-%COMP%] {\n  width: 100%;\n  max-width: 40px;\n  background: linear-gradient(180deg, var(--mj-brand-primary) 0%, var(--mj-color-accent-400) 100%);\n  border-radius: 4px 4px 0 0;\n  min-height: 2px;\n  transition: height 0.3s ease;\n}\n.bar-day[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  margin-top: 6px;\n  text-align: center;\n}\n\n\n\n.feed-panel[_ngcontent-%COMP%] {\n  flex: 4;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  padding: 20px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n  max-height: 340px;\n  overflow-y: auto;\n}\n\n.feed-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n.feed-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 10px;\n  border-radius: 6px;\n  transition: background 0.15s;\n}\n.feed-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-page);\n}\n\n.feed-icon-green[_ngcontent-%COMP%] { color: var(--mj-color-success-600); }\n.feed-icon-red[_ngcontent-%COMP%]   { color: var(--mj-color-error-600); }\n.feed-icon-amber[_ngcontent-%COMP%] { color: var(--mj-color-warning-600); }\n\n.feed-details[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n.feed-name[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.feed-meta[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n}\n\n.feed-badge[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: 600;\n  padding: 2px 8px;\n  border-radius: 10px;\n  text-transform: uppercase;\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n.feed-badge-green[_ngcontent-%COMP%] { background: var(--mj-status-success-bg); color: var(--mj-color-success-800); }\n.feed-badge-amber[_ngcontent-%COMP%] { background: var(--mj-color-warning-50); color: var(--mj-color-warning-800); }\n.feed-badge-red[_ngcontent-%COMP%]   { background: var(--mj-status-error-bg); color: var(--mj-status-error); }\n\n.empty-hint[_ngcontent-%COMP%] {\n  color: var(--mj-text-disabled);\n  font-size: 13px;\n  font-style: italic;\n}\n\n\n\n\n\n@media (max-width: 1200px) {\n  .pipeline-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(2, 1fr);\n  }\n  .metric-strip[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(3, 1fr);\n  }\n}\n\n@media (max-width: 900px) {\n  .pipeline-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n  .metric-strip[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(2, 1fr);\n  }\n  .bottom-split[_ngcontent-%COMP%] {\n    flex-direction: column;\n  }\n  .card-stats[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n\n@media (max-width: 600px) {\n  .overview[_ngcontent-%COMP%] {\n    padding: 16px;\n  }\n  .metric-strip[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n}"] });
+            i0.ɵɵconditional(ctx.IsLoading ? 8 : ctx.Summaries.length === 0 ? 9 : 10);
+        } }, dependencies: [i1.MJPageLayoutComponent, i1.MJPageHeaderComponent, i1.MJPageBodyComponent, i1.MJStatBadgeComponent, i1.MJRefreshButtonComponent, i2.LoadingComponent, i3.DecimalPipe], styles: ["\n\n\n\n.overview[_ngcontent-%COMP%] {\n  \n\n\n  max-width: 1440px;\n  margin: 0 auto;\n}\n\n\n\n\n\n\n\n\n.notification[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 12px 16px;\n  border-radius: 10px;\n  margin-bottom: 20px;\n  font-size: 13px;\n  font-weight: 500;\n  animation: _ngcontent-%COMP%_slideDown 0.25s ease-out;\n}\n.notification[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:first-child { font-size: 16px; }\n.notification-message[_ngcontent-%COMP%] { flex: 1; }\n.notification-success[_ngcontent-%COMP%] {\n  background: var(--mj-status-success-bg);\n  color: var(--mj-color-success-800);\n  border: 1px solid var(--mj-color-success-200);\n}\n.notification-error[_ngcontent-%COMP%] {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error);\n  border: 1px solid var(--mj-color-error-200);\n}\n.notification-dismiss[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: inherit;\n  opacity: 0.5;\n  font-size: 14px;\n  padding: 4px;\n  line-height: 1;\n}\n.notification-dismiss[_ngcontent-%COMP%]:hover { opacity: 1; }\n\n@keyframes _ngcontent-%COMP%_slideDown {\n  from { opacity: 0; transform: translateY(-8px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 100px 20px;\n  color: var(--mj-text-disabled);\n}\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 64px;\n  margin-bottom: 20px;\n  display: block;\n  color: var(--mj-color-neutral-300);\n}\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 8px 0;\n  font-size: 20px;\n  color: var(--mj-text-secondary);\n}\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  max-width: 400px;\n  margin-inline: auto;\n}\n\n\n\n\n\n.metric-strip[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  gap: 16px;\n  margin-bottom: 32px;\n}\n\n.metric-card[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 18px 16px;\n  border-radius: 12px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n  transition: box-shadow 0.2s, transform 0.2s;\n}\n.metric-card[_ngcontent-%COMP%]:hover {\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  transform: translateY(-1px);\n}\n\n.metric-icon[_ngcontent-%COMP%] {\n  position: relative;\n  width: 44px;\n  height: 44px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 18px;\n  flex-shrink: 0;\n}\n.metric-icon-blue[_ngcontent-%COMP%]   { background: var(--mj-status-info-bg); color: var(--mj-brand-primary); }\n.metric-icon-green[_ngcontent-%COMP%]  { background: var(--mj-status-success-bg); color: var(--mj-color-success-600); }\n.metric-icon-emerald[_ngcontent-%COMP%] { background: var(--mj-status-success-bg); color: var(--mj-color-success-600); }\n.metric-icon-orange[_ngcontent-%COMP%] { background: var(--mj-color-warning-50); color: var(--mj-color-warning-600); }\n\n.metric-body[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.metric-value[_ngcontent-%COMP%] {\n  font-size: 22px;\n  font-weight: 700;\n  line-height: 1.2;\n  color: var(--mj-text-primary);\n}\n.metric-value-indigo[_ngcontent-%COMP%] { color: var(--mj-color-indigo-500); }\n\n.metric-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.4px;\n  font-weight: 500;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n\n\n.metric-ring[_ngcontent-%COMP%] {\n  width: 44px;\n  height: 44px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n.metric-ring-inner[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: var(--mj-bg-surface);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.metric-ring-value[_ngcontent-%COMP%] {\n  font-size: 8px;\n  font-weight: 700;\n  color: var(--mj-color-indigo-500);\n}\n\n\n\n.pulse-dot[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 2px;\n  right: 2px;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: var(--mj-color-success-600);\n  animation: _ngcontent-%COMP%_pulse 1.5s ease-in-out infinite;\n}\n\n@keyframes _ngcontent-%COMP%_pulse {\n  0%, 100% { opacity: 1; transform: scale(1); }\n  50%      { opacity: 0.5; transform: scale(1.4); }\n}\n\n\n\n\n\n.section-heading[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 16px;\n}\n.section-heading[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n.section-heading[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 8px;\n  color: var(--mj-text-muted);\n}\n\n.refresh-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.15s, border-color 0.15s;\n}\n.refresh-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-status-info-bg);\n  border-color: var(--mj-color-info-200);\n}\n\n.pipeline-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 20px;\n  margin-bottom: 32px;\n}\n\n.pipeline-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  padding: 20px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n  transition: box-shadow 0.2s, transform 0.2s;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n.pipeline-card[_ngcontent-%COMP%]:hover {\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);\n  transform: translateY(-2px);\n}\n\n.pipeline-card-error[_ngcontent-%COMP%] {\n  border-left: 3px solid var(--mj-status-error);\n}\n\n\n\n.card-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n}\n.card-header-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  min-width: 0;\n}\n.card-icon-wrap[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  border-radius: 10px;\n  background: var(--mj-status-info-bg);\n  color: var(--mj-brand-primary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  flex-shrink: 0;\n}\n.card-title-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n.card-title[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.card-subtitle[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n}\n\n\n\n.status-dot[_ngcontent-%COMP%] {\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  margin-top: 4px;\n  position: relative;\n}\n.status-dot-green[_ngcontent-%COMP%]  { background: var(--mj-color-success-600); }\n.status-dot-amber[_ngcontent-%COMP%]  { background: var(--mj-status-warning); }\n.status-dot-red[_ngcontent-%COMP%]    { background: var(--mj-status-error); }\n.status-dot-gray[_ngcontent-%COMP%]   { background: var(--mj-color-neutral-300); }\n\n.dot-pulse[_ngcontent-%COMP%] {\n  position: absolute;\n  inset: -3px;\n  border-radius: 50%;\n  border: 2px solid var(--mj-status-warning);\n  animation: _ngcontent-%COMP%_dotPulse 1.5s ease-in-out infinite;\n}\n@keyframes _ngcontent-%COMP%_dotPulse {\n  0%, 100% { opacity: 0.3; transform: scale(1); }\n  50%      { opacity: 0; transform: scale(1.6); }\n}\n\n\n\n.pipeline-flow[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0;\n  padding: 8px 0;\n}\n.flow-node[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  flex-shrink: 0;\n}\n.flow-node-mj[_ngcontent-%COMP%] {\n  background: var(--mj-status-info-bg);\n  color: var(--mj-brand-primary);\n}\n.flow-arrow[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: 0;\n  padding: 0 4px;\n}\n.flow-line[_ngcontent-%COMP%] {\n  flex: 1;\n  height: 2px;\n  background: var(--mj-border-default);\n}\n.flow-count[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n  padding: 2px 8px;\n  background: var(--mj-bg-page);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  font-weight: 500;\n}\n\n\n\n.card-stats[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 8px;\n}\n.stat-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n}\n.stat-label[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  margin-bottom: 2px;\n}\n.stat-value[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n.stat-error[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n\n\n.sparkline-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n.sparkline-label[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  white-space: nowrap;\n}\n.sparkline-dots[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n.spark-dot[_ngcontent-%COMP%] {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  display: inline-block;\n}\n.spark-green[_ngcontent-%COMP%] { background: var(--mj-color-success-600); }\n.spark-red[_ngcontent-%COMP%]   { background: var(--mj-status-error); }\n.spark-amber[_ngcontent-%COMP%] { background: var(--mj-status-warning); }\n.spark-gray[_ngcontent-%COMP%]  { background: var(--mj-color-neutral-300); }\n.sparkline-none[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-color-neutral-300);\n  font-style: italic;\n}\n\n\n\n.card-footer[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n  padding-top: 4px;\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n.btn-sync[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 5px 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s, border-color 0.15s;\n}\n.btn-sync[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-status-info-bg);\n  border-color: var(--mj-color-info-200);\n}\n.btn-sync[_ngcontent-%COMP%]:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n.btn-sync-disabled[_ngcontent-%COMP%] {\n  color: var(--mj-text-disabled);\n  border-color: var(--mj-border-default);\n}\n\n\n\n\n\n.bottom-split[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 20px;\n}\n\n.panel-title[_ngcontent-%COMP%] {\n  margin: 0 0 16px 0;\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n.panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 8px;\n  color: var(--mj-text-muted);\n}\n\n\n\n.chart-panel[_ngcontent-%COMP%] {\n  flex: 6;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  padding: 20px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.bar-chart[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: 12px;\n  height: 200px;\n  padding-top: 24px;\n}\n.bar-column[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-end;\n  height: 100%;\n  position: relative;\n}\n.bar-count[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  margin-bottom: 4px;\n}\n.bar-fill[_ngcontent-%COMP%] {\n  width: 100%;\n  max-width: 40px;\n  background: linear-gradient(180deg, var(--mj-brand-primary) 0%, var(--mj-color-accent-400) 100%);\n  border-radius: 4px 4px 0 0;\n  min-height: 2px;\n  transition: height 0.3s ease;\n}\n.bar-day[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  margin-top: 6px;\n  text-align: center;\n}\n\n\n\n.feed-panel[_ngcontent-%COMP%] {\n  flex: 4;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  padding: 20px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n  max-height: 340px;\n  overflow-y: auto;\n}\n\n.feed-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n.feed-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 10px;\n  border-radius: 6px;\n  transition: background 0.15s;\n}\n.feed-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-page);\n}\n\n.feed-icon-green[_ngcontent-%COMP%] { color: var(--mj-color-success-600); }\n.feed-icon-red[_ngcontent-%COMP%]   { color: var(--mj-color-error-600); }\n.feed-icon-amber[_ngcontent-%COMP%] { color: var(--mj-color-warning-600); }\n\n.feed-details[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n.feed-name[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.feed-meta[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n}\n\n.feed-badge[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: 600;\n  padding: 2px 8px;\n  border-radius: 10px;\n  text-transform: uppercase;\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n.feed-badge-green[_ngcontent-%COMP%] { background: var(--mj-status-success-bg); color: var(--mj-color-success-800); }\n.feed-badge-amber[_ngcontent-%COMP%] { background: var(--mj-color-warning-50); color: var(--mj-color-warning-800); }\n.feed-badge-red[_ngcontent-%COMP%]   { background: var(--mj-status-error-bg); color: var(--mj-status-error); }\n\n.empty-hint[_ngcontent-%COMP%] {\n  color: var(--mj-text-disabled);\n  font-size: 13px;\n  font-style: italic;\n}\n\n\n\n\n\n@media (max-width: 1200px) {\n  .pipeline-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(2, 1fr);\n  }\n  .metric-strip[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(3, 1fr);\n  }\n}\n\n@media (max-width: 900px) {\n  .pipeline-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n  .metric-strip[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(2, 1fr);\n  }\n  .bottom-split[_ngcontent-%COMP%] {\n    flex-direction: column;\n  }\n  .card-stats[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n\n@media (max-width: 600px) {\n  .overview[_ngcontent-%COMP%] {\n    padding: 16px;\n  }\n  .metric-strip[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n}"] });
 };
 OverviewComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'IntegrationOverview')
@@ -619,7 +638,7 @@ OverviewComponent = __decorate([
 export { OverviewComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OverviewComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'app-integration-overview', template: "<div class=\"overview\">\n  <!-- Notification Banner -->\n  @if (Notification) {\n    <div class=\"notification\" [class.notification-success]=\"Notification.Type === 'success'\"\n         [class.notification-error]=\"Notification.Type === 'error'\">\n      @if (Notification.Type === 'success') {\n        <i class=\"fa-solid fa-circle-check\"></i>\n      } @else {\n        <i class=\"fa-solid fa-circle-xmark\"></i>\n      }\n      <span class=\"notification-message\">{{ Notification.Message }}</span>\n      <button class=\"notification-dismiss\" (click)=\"DismissNotification()\">\n        <i class=\"fa-solid fa-times\"></i>\n      </button>\n    </div>\n  }\n\n  @if (IsLoading) {\n    <mj-loading text=\"Loading integrations...\" size=\"medium\"></mj-loading>\n  } @else if (Summaries.length === 0) {\n    <div class=\"empty-state\">\n      <i class=\"fa-solid fa-plug-circle-xmark\"></i>\n      <h3>No Integrations Configured</h3>\n      <p>Set up your first integration using the Connection Studio to start syncing data.</p>\n    </div>\n  } @else {\n    <!-- ====================================================================\n         SECTION 1: Metric Strip\n         ==================================================================== -->\n    <div class=\"metric-strip\">\n      <!-- Total Pipelines -->\n      <div class=\"metric-card\">\n        <div class=\"metric-icon metric-icon-blue\">\n          <i class=\"fa-solid fa-diagram-project\"></i>\n        </div>\n        <div class=\"metric-body\">\n          <span class=\"metric-value\">{{ KPIs.TotalIntegrations }}</span>\n          <span class=\"metric-label\">Total Pipelines</span>\n        </div>\n      </div>\n\n      <!-- Records Today -->\n      <div class=\"metric-card\">\n        <div class=\"metric-icon metric-icon-green\">\n          <i class=\"fa-solid fa-database\"></i>\n        </div>\n        <div class=\"metric-body\">\n          <span class=\"metric-value\">{{ FormatNumber(KPIs.RecordsSyncedToday) }}</span>\n          <span class=\"metric-label\">Records Today</span>\n        </div>\n      </div>\n\n      <!-- Success Rate (with conic gradient ring) -->\n      <div class=\"metric-card\">\n        <div class=\"metric-ring\" [style.background]=\"SuccessRateGradient\">\n          <div class=\"metric-ring-inner\">\n            <span class=\"metric-ring-value\">{{ SuccessRate }}%</span>\n          </div>\n        </div>\n        <div class=\"metric-body\">\n          <span class=\"metric-value metric-value-indigo\">{{ SuccessRate }}%</span>\n          <span class=\"metric-label\">Success Rate</span>\n        </div>\n      </div>\n\n      <!-- Active Now -->\n      <div class=\"metric-card\">\n        <div class=\"metric-icon metric-icon-emerald\">\n          <i class=\"fa-solid fa-bolt\"></i>\n          @if (ActiveCount > 0) {\n            <span class=\"pulse-dot\"></span>\n          }\n        </div>\n        <div class=\"metric-body\">\n          <span class=\"metric-value\">{{ ActiveCount }}</span>\n          <span class=\"metric-label\">Active Now</span>\n        </div>\n      </div>\n\n      <!-- Avg Duration -->\n      <div class=\"metric-card\">\n        <div class=\"metric-icon metric-icon-orange\">\n          <i class=\"fa-solid fa-clock\"></i>\n        </div>\n        <div class=\"metric-body\">\n          <span class=\"metric-value\">{{ FormatDuration(KPIs.AverageSyncDurationMs) }}</span>\n          <span class=\"metric-label\">Avg Duration</span>\n        </div>\n      </div>\n    </div>\n\n    <!-- ====================================================================\n         SECTION 2: Pipeline Health Grid\n         ==================================================================== -->\n    <div class=\"section-heading\">\n      <h3><i class=\"fa-solid fa-heart-pulse\"></i> Pipeline Health</h3>\n      <button class=\"refresh-btn\" (click)=\"Refresh()\">\n        <i class=\"fa-solid fa-arrows-rotate\"></i> Refresh\n      </button>\n    </div>\n\n    <div class=\"pipeline-grid\">\n      @for (summary of Summaries; track summary.Integration.ID) {\n        <div [class]=\"GetCardBorderClass(summary.StatusColor)\">\n          <!-- Card Header -->\n          <div class=\"card-header\">\n            <div class=\"card-header-left\">\n              <div class=\"card-icon-wrap\">\n                <i [class]=\"GetIntegrationIcon(summary)\"></i>\n              </div>\n              <div class=\"card-title-wrap\">\n                <span class=\"card-title\">{{ summary.Integration.Name }}</span>\n                <span class=\"card-subtitle\">{{ summary.SourceType?.Name ?? 'Custom' }}</span>\n              </div>\n            </div>\n            <div [class]=\"GetStatusDotClass(summary.StatusColor)\"\n                 [title]=\"GetStatusLabel(summary.StatusColor)\">\n              @if (summary.LatestRun?.Status === 'In Progress') {\n                <span class=\"dot-pulse\"></span>\n              }\n            </div>\n          </div>\n\n          <!-- Pipeline Flow Visual -->\n          <div class=\"pipeline-flow\">\n            <div class=\"flow-node\">\n              <i [class]=\"GetIntegrationIcon(summary)\"></i>\n            </div>\n            <div class=\"flow-arrow\">\n              <div class=\"flow-line\"></div>\n              <span class=\"flow-count\">{{ GetEntityMapCount(summary.Integration.ID) }} maps</span>\n              <div class=\"flow-line\"></div>\n            </div>\n            <div class=\"flow-node flow-node-mj\">\n              <i class=\"fa-solid fa-layer-group\"></i>\n            </div>\n          </div>\n\n          <!-- Stats Row -->\n          <div class=\"card-stats\">\n            <div class=\"stat-item\">\n              <span class=\"stat-label\">Last sync</span>\n              <span class=\"stat-value\">{{ summary.RelativeTime }}</span>\n            </div>\n            <div class=\"stat-item\">\n              <span class=\"stat-label\">Records</span>\n              <span class=\"stat-value\">{{ FormatNumber(summary.LatestRun?.TotalRecords ?? 0) }}</span>\n            </div>\n            <div class=\"stat-item\">\n              <span class=\"stat-label\">Duration</span>\n              <span class=\"stat-value\">{{ FormatDuration(summary.DurationMs) }}</span>\n            </div>\n            <div class=\"stat-item\">\n              <span class=\"stat-label\">Errors</span>\n              <span class=\"stat-value\" [class.stat-error]=\"summary.TotalErrors > 0\">\n                {{ summary.TotalErrors }}\n              </span>\n            </div>\n          </div>\n\n          <!-- Sparkline (last 5 runs) -->\n          <div class=\"sparkline-row\">\n            <span class=\"sparkline-label\">Recent runs</span>\n            <div class=\"sparkline-dots\">\n              @for (run of summary.RecentRuns; track run.ID) {\n                <span [class]=\"GetSparklineDotClass(run)\"\n                      [title]=\"run.Status + ' - ' + (run.StartedAt ?? 'N/A')\"></span>\n              }\n              @if (summary.RecentRuns.length === 0) {\n                <span class=\"sparkline-none\">No runs</span>\n              }\n            </div>\n          </div>\n\n          <!-- Card Footer -->\n          <div class=\"card-footer\">\n            @if (IsRunning(summary.Integration.ID)) {\n              <button class=\"btn-sync btn-sync-disabled\" disabled>\n                <i class=\"fa-solid fa-spinner fa-spin\"></i> Running...\n              </button>\n            } @else {\n              <button class=\"btn-sync\"\n                      (click)=\"RunSync(summary.Integration.ID)\"\n                      [disabled]=\"!summary.Integration.IsActive || RunningIntegrationID !== null\">\n                <i class=\"fa-solid fa-play\"></i> Sync Now\n              </button>\n            }\n          </div>\n        </div>\n      }\n    </div>\n\n    <!-- ====================================================================\n         SECTION 3: Bottom - Bar Chart & Activity Feed\n         ==================================================================== -->\n    <div class=\"bottom-split\">\n      <!-- Bar Chart (left, 60%) -->\n      <div class=\"chart-panel\">\n        <h3 class=\"panel-title\"><i class=\"fa-solid fa-chart-bar\"></i> Records Synced (7 days)</h3>\n        @if (DailyCounts.length === 0) {\n          <p class=\"empty-hint\">No data available.</p>\n        } @else {\n          <div class=\"bar-chart\">\n            @for (day of DailyCounts; track day.Date) {\n              <div class=\"bar-column\">\n                <div class=\"bar-count\">{{ FormatNumber(day.Records) }}</div>\n                <div class=\"bar-fill\" [style.height.%]=\"BarHeight(day.Records)\"></div>\n                <div class=\"bar-day\">{{ day.Label }}</div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n\n      <!-- Activity Feed (right, 40%) -->\n      <div class=\"feed-panel\">\n        <h3 class=\"panel-title\"><i class=\"fa-solid fa-stream\"></i> Recent Activity</h3>\n        @if (ActivityFeed.length === 0) {\n          <p class=\"empty-hint\">No recent activity.</p>\n        } @else {\n          <div class=\"feed-list\">\n            @for (item of ActivityFeed; track item.RunID) {\n              <div class=\"feed-item\">\n                <i [class]=\"ActivityStatusIcon(item.Status)\"\n                   [class.feed-icon-green]=\"item.StatusColor === 'green'\"\n                   [class.feed-icon-red]=\"item.StatusColor === 'red'\"\n                   [class.feed-icon-amber]=\"item.StatusColor === 'amber'\">\n                </i>\n                <div class=\"feed-details\">\n                  <span class=\"feed-name\">{{ item.IntegrationName }}</span>\n                  <span class=\"feed-meta\">{{ item.TotalRecords | number }} records &middot; {{ item.RelativeTime }}</span>\n                </div>\n                <span class=\"feed-badge\" [class]=\"'feed-badge-' + item.StatusColor\">\n                  {{ item.Status }}\n                </span>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: ["/* ==========================================================================\n   Integration Overview - Root\n   ========================================================================== */\n.overview {\n  padding: 28px;\n  max-width: 1440px;\n  margin: 0 auto;\n  background: var(--mj-bg-page);\n  min-height: 100%;\n}\n\n/* ==========================================================================\n   Notification Banner\n   ========================================================================== */\n.notification {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 12px 16px;\n  border-radius: 10px;\n  margin-bottom: 20px;\n  font-size: 13px;\n  font-weight: 500;\n  animation: slideDown 0.25s ease-out;\n}\n.notification i:first-child { font-size: 16px; }\n.notification-message { flex: 1; }\n.notification-success {\n  background: var(--mj-status-success-bg);\n  color: var(--mj-color-success-800);\n  border: 1px solid var(--mj-color-success-200);\n}\n.notification-error {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error);\n  border: 1px solid var(--mj-color-error-200);\n}\n.notification-dismiss {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: inherit;\n  opacity: 0.5;\n  font-size: 14px;\n  padding: 4px;\n  line-height: 1;\n}\n.notification-dismiss:hover { opacity: 1; }\n\n@keyframes slideDown {\n  from { opacity: 0; transform: translateY(-8px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n/* ==========================================================================\n   Empty State\n   ========================================================================== */\n.empty-state {\n  text-align: center;\n  padding: 100px 20px;\n  color: var(--mj-text-disabled);\n}\n.empty-state i {\n  font-size: 64px;\n  margin-bottom: 20px;\n  display: block;\n  color: var(--mj-color-neutral-300);\n}\n.empty-state h3 {\n  margin: 0 0 8px 0;\n  font-size: 20px;\n  color: var(--mj-text-secondary);\n}\n.empty-state p {\n  margin: 0;\n  font-size: 14px;\n  max-width: 400px;\n  margin-inline: auto;\n}\n\n/* ==========================================================================\n   SECTION 1: Metric Strip\n   ========================================================================== */\n.metric-strip {\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  gap: 16px;\n  margin-bottom: 32px;\n}\n\n.metric-card {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 18px 16px;\n  border-radius: 12px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n  transition: box-shadow 0.2s, transform 0.2s;\n}\n.metric-card:hover {\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  transform: translateY(-1px);\n}\n\n.metric-icon {\n  position: relative;\n  width: 44px;\n  height: 44px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 18px;\n  flex-shrink: 0;\n}\n.metric-icon-blue   { background: var(--mj-status-info-bg); color: var(--mj-brand-primary); }\n.metric-icon-green  { background: var(--mj-status-success-bg); color: var(--mj-color-success-600); }\n.metric-icon-emerald { background: var(--mj-status-success-bg); color: var(--mj-color-success-600); }\n.metric-icon-orange { background: var(--mj-color-warning-50); color: var(--mj-color-warning-600); }\n\n.metric-body {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.metric-value {\n  font-size: 22px;\n  font-weight: 700;\n  line-height: 1.2;\n  color: var(--mj-text-primary);\n}\n.metric-value-indigo { color: var(--mj-color-indigo-500); }\n\n.metric-label {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.4px;\n  font-weight: 500;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Conic gradient ring for success rate */\n.metric-ring {\n  width: 44px;\n  height: 44px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n.metric-ring-inner {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: var(--mj-bg-surface);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.metric-ring-value {\n  font-size: 8px;\n  font-weight: 700;\n  color: var(--mj-color-indigo-500);\n}\n\n/* Pulse dot for active syncs */\n.pulse-dot {\n  position: absolute;\n  top: 2px;\n  right: 2px;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: var(--mj-color-success-600);\n  animation: pulse 1.5s ease-in-out infinite;\n}\n\n@keyframes pulse {\n  0%, 100% { opacity: 1; transform: scale(1); }\n  50%      { opacity: 0.5; transform: scale(1.4); }\n}\n\n/* ==========================================================================\n   SECTION 2: Pipeline Health Grid\n   ========================================================================== */\n.section-heading {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 16px;\n}\n.section-heading h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n.section-heading h3 i {\n  margin-right: 8px;\n  color: var(--mj-text-muted);\n}\n\n.refresh-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.15s, border-color 0.15s;\n}\n.refresh-btn:hover {\n  background: var(--mj-status-info-bg);\n  border-color: var(--mj-color-info-200);\n}\n\n.pipeline-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 20px;\n  margin-bottom: 32px;\n}\n\n.pipeline-card {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  padding: 20px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n  transition: box-shadow 0.2s, transform 0.2s;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n.pipeline-card:hover {\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);\n  transform: translateY(-2px);\n}\n\n.pipeline-card-error {\n  border-left: 3px solid var(--mj-status-error);\n}\n\n/* Card Header */\n.card-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n}\n.card-header-left {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  min-width: 0;\n}\n.card-icon-wrap {\n  width: 40px;\n  height: 40px;\n  border-radius: 10px;\n  background: var(--mj-status-info-bg);\n  color: var(--mj-brand-primary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  flex-shrink: 0;\n}\n.card-title-wrap {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n.card-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.card-subtitle {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n}\n\n/* Status Dot */\n.status-dot {\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  margin-top: 4px;\n  position: relative;\n}\n.status-dot-green  { background: var(--mj-color-success-600); }\n.status-dot-amber  { background: var(--mj-status-warning); }\n.status-dot-red    { background: var(--mj-status-error); }\n.status-dot-gray   { background: var(--mj-color-neutral-300); }\n\n.dot-pulse {\n  position: absolute;\n  inset: -3px;\n  border-radius: 50%;\n  border: 2px solid var(--mj-status-warning);\n  animation: dotPulse 1.5s ease-in-out infinite;\n}\n@keyframes dotPulse {\n  0%, 100% { opacity: 0.3; transform: scale(1); }\n  50%      { opacity: 0; transform: scale(1.6); }\n}\n\n/* Pipeline Flow Visual */\n.pipeline-flow {\n  display: flex;\n  align-items: center;\n  gap: 0;\n  padding: 8px 0;\n}\n.flow-node {\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  flex-shrink: 0;\n}\n.flow-node-mj {\n  background: var(--mj-status-info-bg);\n  color: var(--mj-brand-primary);\n}\n.flow-arrow {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: 0;\n  padding: 0 4px;\n}\n.flow-line {\n  flex: 1;\n  height: 2px;\n  background: var(--mj-border-default);\n}\n.flow-count {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n  padding: 2px 8px;\n  background: var(--mj-bg-page);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  font-weight: 500;\n}\n\n/* Card Stats */\n.card-stats {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 8px;\n}\n.stat-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n}\n.stat-label {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  margin-bottom: 2px;\n}\n.stat-value {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n.stat-error {\n  color: var(--mj-status-error);\n}\n\n/* Sparkline Row */\n.sparkline-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n.sparkline-label {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  white-space: nowrap;\n}\n.sparkline-dots {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n.spark-dot {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  display: inline-block;\n}\n.spark-green { background: var(--mj-color-success-600); }\n.spark-red   { background: var(--mj-status-error); }\n.spark-amber { background: var(--mj-status-warning); }\n.spark-gray  { background: var(--mj-color-neutral-300); }\n.sparkline-none {\n  font-size: 10px;\n  color: var(--mj-color-neutral-300);\n  font-style: italic;\n}\n\n/* Card Footer */\n.card-footer {\n  display: flex;\n  justify-content: flex-end;\n  padding-top: 4px;\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n.btn-sync {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 5px 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s, border-color 0.15s;\n}\n.btn-sync:hover:not(:disabled) {\n  background: var(--mj-status-info-bg);\n  border-color: var(--mj-color-info-200);\n}\n.btn-sync:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n.btn-sync-disabled {\n  color: var(--mj-text-disabled);\n  border-color: var(--mj-border-default);\n}\n\n/* ==========================================================================\n   SECTION 3: Bottom Split - Chart + Feed\n   ========================================================================== */\n.bottom-split {\n  display: flex;\n  gap: 20px;\n}\n\n.panel-title {\n  margin: 0 0 16px 0;\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n.panel-title i {\n  margin-right: 8px;\n  color: var(--mj-text-muted);\n}\n\n/* Bar Chart Panel (left, 60%) */\n.chart-panel {\n  flex: 6;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  padding: 20px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.bar-chart {\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: 12px;\n  height: 200px;\n  padding-top: 24px;\n}\n.bar-column {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-end;\n  height: 100%;\n  position: relative;\n}\n.bar-count {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  margin-bottom: 4px;\n}\n.bar-fill {\n  width: 100%;\n  max-width: 40px;\n  background: linear-gradient(180deg, var(--mj-brand-primary) 0%, var(--mj-color-accent-400) 100%);\n  border-radius: 4px 4px 0 0;\n  min-height: 2px;\n  transition: height 0.3s ease;\n}\n.bar-day {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  margin-top: 6px;\n  text-align: center;\n}\n\n/* Activity Feed Panel (right, 40%) */\n.feed-panel {\n  flex: 4;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  padding: 20px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n  max-height: 340px;\n  overflow-y: auto;\n}\n\n.feed-list {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n.feed-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 10px;\n  border-radius: 6px;\n  transition: background 0.15s;\n}\n.feed-item:hover {\n  background: var(--mj-bg-page);\n}\n\n.feed-icon-green { color: var(--mj-color-success-600); }\n.feed-icon-red   { color: var(--mj-color-error-600); }\n.feed-icon-amber { color: var(--mj-color-warning-600); }\n\n.feed-details {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n.feed-name {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.feed-meta {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n}\n\n.feed-badge {\n  font-size: 10px;\n  font-weight: 600;\n  padding: 2px 8px;\n  border-radius: 10px;\n  text-transform: uppercase;\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n.feed-badge-green { background: var(--mj-status-success-bg); color: var(--mj-color-success-800); }\n.feed-badge-amber { background: var(--mj-color-warning-50); color: var(--mj-color-warning-800); }\n.feed-badge-red   { background: var(--mj-status-error-bg); color: var(--mj-status-error); }\n\n.empty-hint {\n  color: var(--mj-text-disabled);\n  font-size: 13px;\n  font-style: italic;\n}\n\n/* ==========================================================================\n   Responsive\n   ========================================================================== */\n@media (max-width: 1200px) {\n  .pipeline-grid {\n    grid-template-columns: repeat(2, 1fr);\n  }\n  .metric-strip {\n    grid-template-columns: repeat(3, 1fr);\n  }\n}\n\n@media (max-width: 900px) {\n  .pipeline-grid {\n    grid-template-columns: 1fr;\n  }\n  .metric-strip {\n    grid-template-columns: repeat(2, 1fr);\n  }\n  .bottom-split {\n    flex-direction: column;\n  }\n  .card-stats {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n\n@media (max-width: 600px) {\n  .overview {\n    padding: 16px;\n  }\n  .metric-strip {\n    grid-template-columns: 1fr;\n  }\n}\n"] }]
+        args: [{ standalone: false, selector: 'app-integration-overview', template: "<mj-page-layout>\n  <mj-page-header\n    Title=\"Integration Overview\"\n    Icon=\"fa-solid fa-gauge-high\"\n    Subtitle=\"Health, throughput, and activity across all integrations\">\n    @if (Summaries.length > 0) {\n      <div meta>\n        <mj-stat-badge [Count]=\"KPIs.TotalIntegrations\" Label=\"integrations\"></mj-stat-badge>\n      </div>\n    }\n    <div actions>\n      <mj-refresh-button [Loading]=\"IsLoading\" (Clicked)=\"Refresh()\"></mj-refresh-button>\n    </div>\n  </mj-page-header>\n\n  <mj-page-body>\n<div class=\"overview\">\n  <!-- Notification Banner -->\n  @if (Notification) {\n    <div class=\"notification\" [class.notification-success]=\"Notification.Type === 'success'\"\n         [class.notification-error]=\"Notification.Type === 'error'\">\n      @if (Notification.Type === 'success') {\n        <i class=\"fa-solid fa-circle-check\"></i>\n      } @else {\n        <i class=\"fa-solid fa-circle-xmark\"></i>\n      }\n      <span class=\"notification-message\">{{ Notification.Message }}</span>\n      <button class=\"notification-dismiss\" (click)=\"DismissNotification()\">\n        <i class=\"fa-solid fa-times\"></i>\n      </button>\n    </div>\n  }\n\n  @if (IsLoading) {\n    <mj-loading text=\"Loading integrations...\" size=\"medium\"></mj-loading>\n  } @else if (Summaries.length === 0) {\n    <div class=\"empty-state\">\n      <i class=\"fa-solid fa-plug-circle-xmark\"></i>\n      <h3>No Integrations Configured</h3>\n      <p>Set up your first integration using the Connection Studio to start syncing data.</p>\n    </div>\n  } @else {\n    <!-- ====================================================================\n         SECTION 1: Metric Strip\n         ==================================================================== -->\n    <div class=\"metric-strip\">\n      <!-- Total Pipelines -->\n      <div class=\"metric-card\">\n        <div class=\"metric-icon metric-icon-blue\">\n          <i class=\"fa-solid fa-diagram-project\"></i>\n        </div>\n        <div class=\"metric-body\">\n          <span class=\"metric-value\">{{ KPIs.TotalIntegrations }}</span>\n          <span class=\"metric-label\">Total Pipelines</span>\n        </div>\n      </div>\n\n      <!-- Records Today -->\n      <div class=\"metric-card\">\n        <div class=\"metric-icon metric-icon-green\">\n          <i class=\"fa-solid fa-database\"></i>\n        </div>\n        <div class=\"metric-body\">\n          <span class=\"metric-value\">{{ FormatNumber(KPIs.RecordsSyncedToday) }}</span>\n          <span class=\"metric-label\">Records Today</span>\n        </div>\n      </div>\n\n      <!-- Success Rate (with conic gradient ring) -->\n      <div class=\"metric-card\">\n        <div class=\"metric-ring\" [style.background]=\"SuccessRateGradient\">\n          <div class=\"metric-ring-inner\">\n            <span class=\"metric-ring-value\">{{ SuccessRate }}%</span>\n          </div>\n        </div>\n        <div class=\"metric-body\">\n          <span class=\"metric-value metric-value-indigo\">{{ SuccessRate }}%</span>\n          <span class=\"metric-label\">Success Rate</span>\n        </div>\n      </div>\n\n      <!-- Active Now -->\n      <div class=\"metric-card\">\n        <div class=\"metric-icon metric-icon-emerald\">\n          <i class=\"fa-solid fa-bolt\"></i>\n          @if (ActiveCount > 0) {\n            <span class=\"pulse-dot\"></span>\n          }\n        </div>\n        <div class=\"metric-body\">\n          <span class=\"metric-value\">{{ ActiveCount }}</span>\n          <span class=\"metric-label\">Active Now</span>\n        </div>\n      </div>\n\n      <!-- Avg Duration -->\n      <div class=\"metric-card\">\n        <div class=\"metric-icon metric-icon-orange\">\n          <i class=\"fa-solid fa-clock\"></i>\n        </div>\n        <div class=\"metric-body\">\n          <span class=\"metric-value\">{{ FormatDuration(KPIs.AverageSyncDurationMs) }}</span>\n          <span class=\"metric-label\">Avg Duration</span>\n        </div>\n      </div>\n    </div>\n\n    <!-- ====================================================================\n         SECTION 2: Pipeline Health Grid\n         ==================================================================== -->\n    <div class=\"section-heading\">\n      <h3><i class=\"fa-solid fa-heart-pulse\"></i> Pipeline Health</h3>\n      <button class=\"refresh-btn\" (click)=\"Refresh()\">\n        <i class=\"fa-solid fa-arrows-rotate\"></i> Refresh\n      </button>\n    </div>\n\n    <div class=\"pipeline-grid\">\n      @for (summary of Summaries; track summary.Integration.ID) {\n        <div [class]=\"GetCardBorderClass(summary.StatusColor)\">\n          <!-- Card Header -->\n          <div class=\"card-header\">\n            <div class=\"card-header-left\">\n              <div class=\"card-icon-wrap\">\n                <i [class]=\"GetIntegrationIcon(summary)\"></i>\n              </div>\n              <div class=\"card-title-wrap\">\n                <span class=\"card-title\">{{ summary.Integration.Name }}</span>\n                <span class=\"card-subtitle\">{{ summary.SourceType?.Name ?? 'Custom' }}</span>\n              </div>\n            </div>\n            <div [class]=\"GetStatusDotClass(summary.StatusColor)\"\n                 [title]=\"GetStatusLabel(summary.StatusColor)\">\n              @if (summary.LatestRun?.Status === 'In Progress') {\n                <span class=\"dot-pulse\"></span>\n              }\n            </div>\n          </div>\n\n          <!-- Pipeline Flow Visual -->\n          <div class=\"pipeline-flow\">\n            <div class=\"flow-node\">\n              <i [class]=\"GetIntegrationIcon(summary)\"></i>\n            </div>\n            <div class=\"flow-arrow\">\n              <div class=\"flow-line\"></div>\n              <span class=\"flow-count\">{{ GetEntityMapCount(summary.Integration.ID) }} maps</span>\n              <div class=\"flow-line\"></div>\n            </div>\n            <div class=\"flow-node flow-node-mj\">\n              <i class=\"fa-solid fa-layer-group\"></i>\n            </div>\n          </div>\n\n          <!-- Stats Row -->\n          <div class=\"card-stats\">\n            <div class=\"stat-item\">\n              <span class=\"stat-label\">Last sync</span>\n              <span class=\"stat-value\">{{ summary.RelativeTime }}</span>\n            </div>\n            <div class=\"stat-item\">\n              <span class=\"stat-label\">Records</span>\n              <span class=\"stat-value\">{{ FormatNumber(summary.LatestRun?.TotalRecords ?? 0) }}</span>\n            </div>\n            <div class=\"stat-item\">\n              <span class=\"stat-label\">Duration</span>\n              <span class=\"stat-value\">{{ FormatDuration(summary.DurationMs) }}</span>\n            </div>\n            <div class=\"stat-item\">\n              <span class=\"stat-label\">Errors</span>\n              <span class=\"stat-value\" [class.stat-error]=\"summary.TotalErrors > 0\">\n                {{ summary.TotalErrors }}\n              </span>\n            </div>\n          </div>\n\n          <!-- Sparkline (last 5 runs) -->\n          <div class=\"sparkline-row\">\n            <span class=\"sparkline-label\">Recent runs</span>\n            <div class=\"sparkline-dots\">\n              @for (run of summary.RecentRuns; track run.ID) {\n                <span [class]=\"GetSparklineDotClass(run)\"\n                      [title]=\"run.Status + ' - ' + (run.StartedAt ?? 'N/A')\"></span>\n              }\n              @if (summary.RecentRuns.length === 0) {\n                <span class=\"sparkline-none\">No runs</span>\n              }\n            </div>\n          </div>\n\n          <!-- Card Footer -->\n          <div class=\"card-footer\">\n            @if (IsRunning(summary.Integration.ID)) {\n              <button class=\"btn-sync btn-sync-disabled\" disabled>\n                <i class=\"fa-solid fa-spinner fa-spin\"></i> Running...\n              </button>\n            } @else {\n              <button class=\"btn-sync\"\n                      (click)=\"RunSync(summary.Integration.ID)\"\n                      [disabled]=\"!summary.Integration.IsActive || RunningIntegrationID !== null\">\n                <i class=\"fa-solid fa-play\"></i> Sync Now\n              </button>\n            }\n          </div>\n        </div>\n      }\n    </div>\n\n    <!-- ====================================================================\n         SECTION 3: Bottom - Bar Chart & Activity Feed\n         ==================================================================== -->\n    <div class=\"bottom-split\">\n      <!-- Bar Chart (left, 60%) -->\n      <div class=\"chart-panel\">\n        <h3 class=\"panel-title\"><i class=\"fa-solid fa-chart-bar\"></i> Records Synced (7 days)</h3>\n        @if (DailyCounts.length === 0) {\n          <p class=\"empty-hint\">No data available.</p>\n        } @else {\n          <div class=\"bar-chart\">\n            @for (day of DailyCounts; track day.Date) {\n              <div class=\"bar-column\">\n                <div class=\"bar-count\">{{ FormatNumber(day.Records) }}</div>\n                <div class=\"bar-fill\" [style.height.%]=\"BarHeight(day.Records)\"></div>\n                <div class=\"bar-day\">{{ day.Label }}</div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n\n      <!-- Activity Feed (right, 40%) -->\n      <div class=\"feed-panel\">\n        <h3 class=\"panel-title\"><i class=\"fa-solid fa-stream\"></i> Recent Activity</h3>\n        @if (ActivityFeed.length === 0) {\n          <p class=\"empty-hint\">No recent activity.</p>\n        } @else {\n          <div class=\"feed-list\">\n            @for (item of ActivityFeed; track item.RunID) {\n              <div class=\"feed-item\">\n                <i [class]=\"ActivityStatusIcon(item.Status)\"\n                   [class.feed-icon-green]=\"item.StatusColor === 'green'\"\n                   [class.feed-icon-red]=\"item.StatusColor === 'red'\"\n                   [class.feed-icon-amber]=\"item.StatusColor === 'amber'\">\n                </i>\n                <div class=\"feed-details\">\n                  <span class=\"feed-name\">{{ item.IntegrationName }}</span>\n                  <span class=\"feed-meta\">{{ item.TotalRecords | number }} records &middot; {{ item.RelativeTime }}</span>\n                </div>\n                <span class=\"feed-badge\" [class]=\"'feed-badge-' + item.StatusColor\">\n                  {{ item.Status }}\n                </span>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n  </mj-page-body>\n</mj-page-layout>\n", styles: ["/* ==========================================================================\n   Integration Overview - Root\n   ========================================================================== */\n.overview {\n  /* padding + flex/scroll now owned by <mj-page-body>; keep max-width for\n     comfortable reading on ultra-wide displays. */\n  max-width: 1440px;\n  margin: 0 auto;\n}\n\n/* Slot passthrough now in <mj-page-header>; stat badges now via <mj-stat-badge>. */\n\n/* ==========================================================================\n   Notification Banner\n   ========================================================================== */\n.notification {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 12px 16px;\n  border-radius: 10px;\n  margin-bottom: 20px;\n  font-size: 13px;\n  font-weight: 500;\n  animation: slideDown 0.25s ease-out;\n}\n.notification i:first-child { font-size: 16px; }\n.notification-message { flex: 1; }\n.notification-success {\n  background: var(--mj-status-success-bg);\n  color: var(--mj-color-success-800);\n  border: 1px solid var(--mj-color-success-200);\n}\n.notification-error {\n  background: var(--mj-status-error-bg);\n  color: var(--mj-status-error);\n  border: 1px solid var(--mj-color-error-200);\n}\n.notification-dismiss {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: inherit;\n  opacity: 0.5;\n  font-size: 14px;\n  padding: 4px;\n  line-height: 1;\n}\n.notification-dismiss:hover { opacity: 1; }\n\n@keyframes slideDown {\n  from { opacity: 0; transform: translateY(-8px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n/* ==========================================================================\n   Empty State\n   ========================================================================== */\n.empty-state {\n  text-align: center;\n  padding: 100px 20px;\n  color: var(--mj-text-disabled);\n}\n.empty-state i {\n  font-size: 64px;\n  margin-bottom: 20px;\n  display: block;\n  color: var(--mj-color-neutral-300);\n}\n.empty-state h3 {\n  margin: 0 0 8px 0;\n  font-size: 20px;\n  color: var(--mj-text-secondary);\n}\n.empty-state p {\n  margin: 0;\n  font-size: 14px;\n  max-width: 400px;\n  margin-inline: auto;\n}\n\n/* ==========================================================================\n   SECTION 1: Metric Strip\n   ========================================================================== */\n.metric-strip {\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  gap: 16px;\n  margin-bottom: 32px;\n}\n\n.metric-card {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 18px 16px;\n  border-radius: 12px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n  transition: box-shadow 0.2s, transform 0.2s;\n}\n.metric-card:hover {\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  transform: translateY(-1px);\n}\n\n.metric-icon {\n  position: relative;\n  width: 44px;\n  height: 44px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 18px;\n  flex-shrink: 0;\n}\n.metric-icon-blue   { background: var(--mj-status-info-bg); color: var(--mj-brand-primary); }\n.metric-icon-green  { background: var(--mj-status-success-bg); color: var(--mj-color-success-600); }\n.metric-icon-emerald { background: var(--mj-status-success-bg); color: var(--mj-color-success-600); }\n.metric-icon-orange { background: var(--mj-color-warning-50); color: var(--mj-color-warning-600); }\n\n.metric-body {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.metric-value {\n  font-size: 22px;\n  font-weight: 700;\n  line-height: 1.2;\n  color: var(--mj-text-primary);\n}\n.metric-value-indigo { color: var(--mj-color-indigo-500); }\n\n.metric-label {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.4px;\n  font-weight: 500;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Conic gradient ring for success rate */\n.metric-ring {\n  width: 44px;\n  height: 44px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n.metric-ring-inner {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: var(--mj-bg-surface);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.metric-ring-value {\n  font-size: 8px;\n  font-weight: 700;\n  color: var(--mj-color-indigo-500);\n}\n\n/* Pulse dot for active syncs */\n.pulse-dot {\n  position: absolute;\n  top: 2px;\n  right: 2px;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: var(--mj-color-success-600);\n  animation: pulse 1.5s ease-in-out infinite;\n}\n\n@keyframes pulse {\n  0%, 100% { opacity: 1; transform: scale(1); }\n  50%      { opacity: 0.5; transform: scale(1.4); }\n}\n\n/* ==========================================================================\n   SECTION 2: Pipeline Health Grid\n   ========================================================================== */\n.section-heading {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 16px;\n}\n.section-heading h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n.section-heading h3 i {\n  margin-right: 8px;\n  color: var(--mj-text-muted);\n}\n\n.refresh-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.15s, border-color 0.15s;\n}\n.refresh-btn:hover {\n  background: var(--mj-status-info-bg);\n  border-color: var(--mj-color-info-200);\n}\n\n.pipeline-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 20px;\n  margin-bottom: 32px;\n}\n\n.pipeline-card {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  padding: 20px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n  transition: box-shadow 0.2s, transform 0.2s;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n.pipeline-card:hover {\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);\n  transform: translateY(-2px);\n}\n\n.pipeline-card-error {\n  border-left: 3px solid var(--mj-status-error);\n}\n\n/* Card Header */\n.card-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n}\n.card-header-left {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  min-width: 0;\n}\n.card-icon-wrap {\n  width: 40px;\n  height: 40px;\n  border-radius: 10px;\n  background: var(--mj-status-info-bg);\n  color: var(--mj-brand-primary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  flex-shrink: 0;\n}\n.card-title-wrap {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n.card-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.card-subtitle {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n}\n\n/* Status Dot */\n.status-dot {\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  margin-top: 4px;\n  position: relative;\n}\n.status-dot-green  { background: var(--mj-color-success-600); }\n.status-dot-amber  { background: var(--mj-status-warning); }\n.status-dot-red    { background: var(--mj-status-error); }\n.status-dot-gray   { background: var(--mj-color-neutral-300); }\n\n.dot-pulse {\n  position: absolute;\n  inset: -3px;\n  border-radius: 50%;\n  border: 2px solid var(--mj-status-warning);\n  animation: dotPulse 1.5s ease-in-out infinite;\n}\n@keyframes dotPulse {\n  0%, 100% { opacity: 0.3; transform: scale(1); }\n  50%      { opacity: 0; transform: scale(1.6); }\n}\n\n/* Pipeline Flow Visual */\n.pipeline-flow {\n  display: flex;\n  align-items: center;\n  gap: 0;\n  padding: 8px 0;\n}\n.flow-node {\n  width: 36px;\n  height: 36px;\n  border-radius: 8px;\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  flex-shrink: 0;\n}\n.flow-node-mj {\n  background: var(--mj-status-info-bg);\n  color: var(--mj-brand-primary);\n}\n.flow-arrow {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: 0;\n  padding: 0 4px;\n}\n.flow-line {\n  flex: 1;\n  height: 2px;\n  background: var(--mj-border-default);\n}\n.flow-count {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n  padding: 2px 8px;\n  background: var(--mj-bg-page);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n  font-weight: 500;\n}\n\n/* Card Stats */\n.card-stats {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 8px;\n}\n.stat-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n}\n.stat-label {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  margin-bottom: 2px;\n}\n.stat-value {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n.stat-error {\n  color: var(--mj-status-error);\n}\n\n/* Sparkline Row */\n.sparkline-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n.sparkline-label {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n  white-space: nowrap;\n}\n.sparkline-dots {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n.spark-dot {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  display: inline-block;\n}\n.spark-green { background: var(--mj-color-success-600); }\n.spark-red   { background: var(--mj-status-error); }\n.spark-amber { background: var(--mj-status-warning); }\n.spark-gray  { background: var(--mj-color-neutral-300); }\n.sparkline-none {\n  font-size: 10px;\n  color: var(--mj-color-neutral-300);\n  font-style: italic;\n}\n\n/* Card Footer */\n.card-footer {\n  display: flex;\n  justify-content: flex-end;\n  padding-top: 4px;\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n.btn-sync {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 5px 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s, border-color 0.15s;\n}\n.btn-sync:hover:not(:disabled) {\n  background: var(--mj-status-info-bg);\n  border-color: var(--mj-color-info-200);\n}\n.btn-sync:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n.btn-sync-disabled {\n  color: var(--mj-text-disabled);\n  border-color: var(--mj-border-default);\n}\n\n/* ==========================================================================\n   SECTION 3: Bottom Split - Chart + Feed\n   ========================================================================== */\n.bottom-split {\n  display: flex;\n  gap: 20px;\n}\n\n.panel-title {\n  margin: 0 0 16px 0;\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n.panel-title i {\n  margin-right: 8px;\n  color: var(--mj-text-muted);\n}\n\n/* Bar Chart Panel (left, 60%) */\n.chart-panel {\n  flex: 6;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  padding: 20px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.bar-chart {\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: 12px;\n  height: 200px;\n  padding-top: 24px;\n}\n.bar-column {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-end;\n  height: 100%;\n  position: relative;\n}\n.bar-count {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  margin-bottom: 4px;\n}\n.bar-fill {\n  width: 100%;\n  max-width: 40px;\n  background: linear-gradient(180deg, var(--mj-brand-primary) 0%, var(--mj-color-accent-400) 100%);\n  border-radius: 4px 4px 0 0;\n  min-height: 2px;\n  transition: height 0.3s ease;\n}\n.bar-day {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  margin-top: 6px;\n  text-align: center;\n}\n\n/* Activity Feed Panel (right, 40%) */\n.feed-panel {\n  flex: 4;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  padding: 20px;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n  max-height: 340px;\n  overflow-y: auto;\n}\n\n.feed-list {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n.feed-item {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 10px;\n  border-radius: 6px;\n  transition: background 0.15s;\n}\n.feed-item:hover {\n  background: var(--mj-bg-page);\n}\n\n.feed-icon-green { color: var(--mj-color-success-600); }\n.feed-icon-red   { color: var(--mj-color-error-600); }\n.feed-icon-amber { color: var(--mj-color-warning-600); }\n\n.feed-details {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n.feed-name {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.feed-meta {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n}\n\n.feed-badge {\n  font-size: 10px;\n  font-weight: 600;\n  padding: 2px 8px;\n  border-radius: 10px;\n  text-transform: uppercase;\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n.feed-badge-green { background: var(--mj-status-success-bg); color: var(--mj-color-success-800); }\n.feed-badge-amber { background: var(--mj-color-warning-50); color: var(--mj-color-warning-800); }\n.feed-badge-red   { background: var(--mj-status-error-bg); color: var(--mj-status-error); }\n\n.empty-hint {\n  color: var(--mj-text-disabled);\n  font-size: 13px;\n  font-style: italic;\n}\n\n/* ==========================================================================\n   Responsive\n   ========================================================================== */\n@media (max-width: 1200px) {\n  .pipeline-grid {\n    grid-template-columns: repeat(2, 1fr);\n  }\n  .metric-strip {\n    grid-template-columns: repeat(3, 1fr);\n  }\n}\n\n@media (max-width: 900px) {\n  .pipeline-grid {\n    grid-template-columns: 1fr;\n  }\n  .metric-strip {\n    grid-template-columns: repeat(2, 1fr);\n  }\n  .bottom-split {\n    flex-direction: column;\n  }\n  .card-stats {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n\n@media (max-width: 600px) {\n  .overview {\n    padding: 16px;\n  }\n  .metric-strip {\n    grid-template-columns: 1fr;\n  }\n}\n"] }]
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(OverviewComponent, { className: "OverviewComponent", filePath: "src/Integration/components/overview/overview.component.ts", lineNumber: 30 }); })();
 export function LoadOverviewComponent() {