@memberjunction/ng-dashboards 5.8.0 → 5.10.0

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

@@ -0,0 +1,628 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { ChangeDetectorRef, Component, inject } from '@angular/core';
+import { RegisterClass, UUIDsEqual } from '@memberjunction/global';
+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";
+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_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 6);
+} }
+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);
+    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.ɵɵ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");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.Notification.Type === "success" ? 1 : 2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.Notification.Message);
+} }
+function OverviewComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-loading", 2);
+} }
+function OverviewComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 3);
+    i0.ɵɵelement(1, "i", 10);
+    i0.ɵɵelementStart(2, "h3");
+    i0.ɵɵtext(3, "No Integrations Configured");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p");
+    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_4_For_53_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 51);
+} }
+function OverviewComponent_Conditional_4_For_53_For_48_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 50);
+} if (rf & 2) {
+    const run_r4 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassMap(ctx_r1.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);
+    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);
+    i0.ɵɵtext(2, " Running... ");
+    i0.ɵɵelementEnd();
+} }
+function OverviewComponent_Conditional_4_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.ɵɵ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);
+} }
+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);
+    i0.ɵɵelement(4, "i");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 47)(6, "span", 48);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "span", 49);
+    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.ɵɵelementEnd()();
+    i0.ɵɵelementStart(12, "div", 52)(13, "div", 53);
+    i0.ɵɵelement(14, "i");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(15, "div", 54);
+    i0.ɵɵelement(16, "div", 55);
+    i0.ɵɵelementStart(17, "span", 56);
+    i0.ɵɵtext(18);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(19, "div", 55);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(20, "div", 57);
+    i0.ɵɵelement(21, "i", 58);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(22, "div", 59)(23, "div", 60)(24, "span", 61);
+    i0.ɵɵtext(25, "Last sync");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(26, "span", 62);
+    i0.ɵɵtext(27);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(28, "div", 60)(29, "span", 61);
+    i0.ɵɵtext(30, "Records");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(31, "span", 62);
+    i0.ɵɵtext(32);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(33, "div", 60)(34, "span", 61);
+    i0.ɵɵtext(35, "Duration");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(36, "span", 62);
+    i0.ɵɵtext(37);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(38, "div", 60)(39, "span", 61);
+    i0.ɵɵtext(40, "Errors");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(41, "span", 62);
+    i0.ɵɵtext(42);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(43, "div", 63)(44, "span", 64);
+    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.ɵɵ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.ɵɵelementEnd()();
+} if (rf & 2) {
+    const summary_r6 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassMap(ctx_r1.GetCardBorderClass(summary_r6.StatusColor));
+    i0.ɵɵadvance(4);
+    i0.ɵɵclassMap(ctx_r1.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.ɵɵ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.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1("", ctx_r1.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.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.FormatDuration(summary_r6.DurationMs));
+    i0.ɵɵadvance(4);
+    i0.ɵɵclassProp("stat-error", summary_r6.TotalErrors > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", summary_r6.TotalErrors, " ");
+    i0.ɵɵadvance(5);
+    i0.ɵɵrepeater(summary_r6.RecentRuns);
+    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);
+} }
+function OverviewComponent_Conditional_4_Conditional_59_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 39);
+    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);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(3, "div", 76);
+    i0.ɵɵelementStart(4, "div", 77);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const day_r7 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.FormatNumber(day_r7.Records));
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("height", ctx_r1.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);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.DailyCounts);
+} }
+function OverviewComponent_Conditional_4_Conditional_65_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 39);
+    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);
+    i0.ɵɵelement(1, "i");
+    i0.ɵɵelementStart(2, "div", 79)(3, "span", 80);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 81);
+    i0.ɵɵtext(6);
+    i0.ɵɵpipe(7, "number");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "span", 82);
+    i0.ɵɵtext(9);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const item_r8 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.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);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate2("", i0.ɵɵpipeBind1(7, 14, item_r8.TotalRecords), " records \u00B7 ", item_r8.RelativeTime);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap("feed-badge-" + item_r8.StatusColor);
+    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);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.ActivityFeed);
+} }
+function OverviewComponent_Conditional_4_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.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 15)(5, "span", 16);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "span", 17);
+    i0.ɵɵtext(8, "Total Pipelines");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(9, "div", 12)(10, "div", 18);
+    i0.ɵɵelement(11, "i", 19);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "div", 15)(13, "span", 16);
+    i0.ɵɵtext(14);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(15, "span", 17);
+    i0.ɵɵtext(16, "Records Today");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(17, "div", 12)(18, "div", 20)(19, "div", 21)(20, "span", 22);
+    i0.ɵɵtext(21);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(22, "div", 15)(23, "span", 23);
+    i0.ɵɵtext(24);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(25, "span", 17);
+    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.ɵɵelementEnd();
+    i0.ɵɵelementStart(31, "div", 15)(32, "span", 16);
+    i0.ɵɵtext(33);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(34, "span", 17);
+    i0.ɵɵtext(35, "Active Now");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(36, "div", 12)(37, "div", 27);
+    i0.ɵɵelement(38, "i", 28);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(39, "div", 15)(40, "span", 16);
+    i0.ɵɵtext(41);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(42, "span", 17);
+    i0.ɵɵtext(43, "Avg Duration");
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(44, "div", 29)(45, "h3");
+    i0.ɵɵelement(46, "i", 30);
+    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.ɵɵ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.ɵɵelementEnd();
+    i0.ɵɵelementStart(54, "div", 35)(55, "div", 36)(56, "h3", 37);
+    i0.ɵɵelement(57, "i", 38);
+    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.ɵɵelementEnd();
+    i0.ɵɵelementStart(61, "div", 41)(62, "h3", 37);
+    i0.ɵɵelement(63, "i", 42);
+    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.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r1.KPIs.TotalIntegrations);
+    i0.ɵɵadvance(8);
+    i0.ɵɵtextInterpolate(ctx_r1.FormatNumber(ctx_r1.KPIs.RecordsSyncedToday));
+    i0.ɵɵadvance(4);
+    i0.ɵɵstyleProp("background", ctx_r1.SuccessRateGradient);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("", ctx_r1.SuccessRate, "%");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("", ctx_r1.SuccessRate, "%");
+    i0.ɵɵadvance(6);
+    i0.ɵɵconditional(ctx_r1.ActiveCount > 0 ? 30 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.ActiveCount);
+    i0.ɵɵadvance(8);
+    i0.ɵɵtextInterpolate(ctx_r1.FormatDuration(ctx_r1.KPIs.AverageSyncDurationMs));
+    i0.ɵɵadvance(11);
+    i0.ɵɵrepeater(ctx_r1.Summaries);
+    i0.ɵɵadvance(7);
+    i0.ɵɵconditional(ctx_r1.DailyCounts.length === 0 ? 59 : 60);
+    i0.ɵɵadvance(6);
+    i0.ɵɵconditional(ctx_r1.ActivityFeed.length === 0 ? 65 : 66);
+} }
+let OverviewComponent = class OverviewComponent extends BaseResourceComponent {
+    Summaries = [];
+    KPIs = {
+        TotalIntegrations: 0,
+        ActiveSyncs: 0,
+        RecordsSyncedToday: 0,
+        ErrorRate: 0,
+        AverageSyncDurationMs: null
+    };
+    ActivityFeed = [];
+    DailyCounts = [];
+    EntityMapCounts = new Map();
+    IsLoading = false;
+    RunningIntegrationID = null;
+    Notification = null;
+    dataService = inject(IntegrationDataService);
+    cdr = inject(ChangeDetectorRef);
+    notificationTimer = null;
+    async ngOnInit() {
+        await this.LoadData();
+    }
+    ngOnDestroy() {
+        this.clearNotificationTimer();
+    }
+    // ---------------------------------------------------------------------------
+    // Data Loading
+    // ---------------------------------------------------------------------------
+    async LoadData() {
+        this.IsLoading = true;
+        this.cdr.detectChanges();
+        try {
+            const provider = this.RunViewToUse;
+            const [summaries, activityFeed, dailyCounts] = await Promise.all([
+                this.dataService.LoadIntegrationSummaries(provider),
+                this.dataService.LoadRecentRuns(10, provider),
+                this.dataService.LoadDailyRecordCounts(7, provider)
+            ]);
+            this.Summaries = summaries;
+            this.KPIs = this.dataService.ComputeKPIs(summaries);
+            this.ActivityFeed = activityFeed;
+            this.DailyCounts = dailyCounts;
+            await this.loadEntityMapCounts(summaries, provider);
+        }
+        catch (err) {
+            console.error('[IntegrationOverview] Failed to load data:', err);
+        }
+        finally {
+            this.IsLoading = false;
+            this.cdr.detectChanges();
+        }
+    }
+    async Refresh() {
+        await this.LoadData();
+    }
+    // ---------------------------------------------------------------------------
+    // Sync Actions
+    // ---------------------------------------------------------------------------
+    async RunSync(integrationID) {
+        if (this.RunningIntegrationID)
+            return;
+        this.RunningIntegrationID = integrationID;
+        this.dismissNotification();
+        this.cdr.detectChanges();
+        try {
+            const result = await this.dataService.RunSync(integrationID);
+            if (result.Success) {
+                this.showNotification('success', result.Message || 'Sync started successfully');
+                await this.LoadData();
+            }
+            else {
+                this.showNotification('error', result.Message || 'Sync failed');
+            }
+        }
+        catch (err) {
+            const error = err;
+            this.showNotification('error', `Unexpected error: ${error.message}`);
+            console.error('[IntegrationOverview] RunSync error:', err);
+        }
+        finally {
+            this.RunningIntegrationID = null;
+            this.cdr.detectChanges();
+        }
+    }
+    IsRunning(integrationID) {
+        return UUIDsEqual(this.RunningIntegrationID, integrationID);
+    }
+    // ---------------------------------------------------------------------------
+    // KPI Helpers
+    // ---------------------------------------------------------------------------
+    get SuccessRate() {
+        if (this.KPIs.ErrorRate == null)
+            return 100;
+        return Math.round((100 - this.KPIs.ErrorRate) * 10) / 10;
+    }
+    get SuccessRateGradient() {
+        const pct = this.SuccessRate;
+        const angle = (pct / 100) * 360;
+        return `conic-gradient(#10b981 ${angle}deg, #e5e7eb ${angle}deg)`;
+    }
+    get ActiveCount() {
+        return this.KPIs.ActiveSyncs;
+    }
+    FormatDuration(ms) {
+        return this.dataService.FormatDuration(ms);
+    }
+    FormatNumber(value) {
+        if (value >= 1_000_000)
+            return `${(value / 1_000_000).toFixed(1)}M`;
+        if (value >= 1_000)
+            return `${(value / 1_000).toFixed(1)}K`;
+        return value.toLocaleString();
+    }
+    // ---------------------------------------------------------------------------
+    // Pipeline Card Helpers
+    // ---------------------------------------------------------------------------
+    GetIntegrationIcon(summary) {
+        if (summary.SourceType?.IconClass) {
+            return summary.SourceType.IconClass;
+        }
+        return this.resolveIconByName(summary.Integration.Integration ?? summary.Integration.Name);
+    }
+    GetStatusDotClass(color) {
+        return `status-dot status-dot-${color}`;
+    }
+    GetStatusLabel(color) {
+        if (color === 'green')
+            return 'Healthy';
+        if (color === 'amber')
+            return 'Warning';
+        if (color === 'red')
+            return 'Error';
+        return 'Inactive';
+    }
+    GetEntityMapCount(integrationID) {
+        for (const [key, value] of this.EntityMapCounts) {
+            if (UUIDsEqual(key, integrationID))
+                return value;
+        }
+        return 0;
+    }
+    GetSparklineDotClass(run) {
+        if (run.Status === 'Success')
+            return 'spark-dot spark-green';
+        if (run.Status === 'Failed')
+            return 'spark-dot spark-red';
+        if (run.Status === 'In Progress' || run.Status === 'Pending')
+            return 'spark-dot spark-amber';
+        return 'spark-dot spark-gray';
+    }
+    GetCardBorderClass(color) {
+        return color === 'red' ? 'pipeline-card pipeline-card-error' : 'pipeline-card';
+    }
+    // ---------------------------------------------------------------------------
+    // Bar Chart Helpers
+    // ---------------------------------------------------------------------------
+    get MaxDailyRecords() {
+        if (this.DailyCounts.length === 0)
+            return 1;
+        const maxVal = Math.max(...this.DailyCounts.map(d => d.Records));
+        return maxVal > 0 ? maxVal : 1;
+    }
+    BarHeight(records) {
+        return Math.max((records / this.MaxDailyRecords) * 100, 2);
+    }
+    // ---------------------------------------------------------------------------
+    // Activity Feed Helpers
+    // ---------------------------------------------------------------------------
+    ActivityStatusIcon(status) {
+        if (status === 'Success')
+            return 'fa-solid fa-circle-check';
+        if (status === 'Failed')
+            return 'fa-solid fa-circle-xmark';
+        if (status === 'In Progress')
+            return 'fa-solid fa-spinner fa-spin';
+        return 'fa-solid fa-clock';
+    }
+    // ---------------------------------------------------------------------------
+    // Notification Management
+    // ---------------------------------------------------------------------------
+    DismissNotification() {
+        this.dismissNotification();
+        this.cdr.detectChanges();
+    }
+    // ---------------------------------------------------------------------------
+    // Resource Overrides
+    // ---------------------------------------------------------------------------
+    async GetResourceDisplayName(_data) {
+        return 'Overview';
+    }
+    async GetResourceIconClass(_data) {
+        return 'fa-solid fa-gauge-high';
+    }
+    // ---------------------------------------------------------------------------
+    // Private Helpers
+    // ---------------------------------------------------------------------------
+    async loadEntityMapCounts(summaries, provider) {
+        if (summaries.length === 0)
+            return;
+        const allMaps = await this.loadAllEntityMaps(provider);
+        this.EntityMapCounts = this.countMapsByIntegration(allMaps);
+    }
+    async loadAllEntityMaps(provider) {
+        const rv = new RunView(provider ?? null);
+        const result = await rv.RunView({
+            EntityName: 'MJ: Company Integration Entity Maps',
+            ExtraFilter: '',
+            OrderBy: 'CompanyIntegrationID',
+            Fields: ['ID', 'CompanyIntegrationID'],
+            ResultType: 'simple'
+        });
+        return result.Results;
+    }
+    countMapsByIntegration(maps) {
+        const counts = new Map();
+        for (const map of maps) {
+            const current = counts.get(map.CompanyIntegrationID) ?? 0;
+            counts.set(map.CompanyIntegrationID, current + 1);
+        }
+        return counts;
+    }
+    resolveIconByName(name) {
+        return ResolveIntegrationIcon(name);
+    }
+    showNotification(type, message) {
+        this.clearNotificationTimer();
+        this.Notification = { Type: type, Message: message };
+        this.notificationTimer = setTimeout(() => {
+            this.Notification = null;
+            this.cdr.detectChanges();
+        }, 5000);
+    }
+    dismissNotification() {
+        this.clearNotificationTimer();
+        this.Notification = null;
+    }
+    clearNotificationTimer() {
+        if (this.notificationTimer) {
+            clearTimeout(this.notificationTimer);
+            this.notificationTimer = null;
+        }
+    }
+    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();
+        } if (rf & 2) {
+            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-color-error-700);\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-color-neutral-700);\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-color-error-700); }\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')
+], OverviewComponent);
+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-color-error-700);\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-color-neutral-700);\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-color-error-700); }\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() {
+    // Tree-shaking prevention: importing this module causes
+    // @RegisterClass decorators to fire, registering components.
+}
+//# sourceMappingURL=overview.component.js.map