@memberjunction/ng-dashboards 5.25.0 → 5.27.0

package/dist/AI/components/overview/ai-overview-hub.component.d.ts

@@ -0,0 +1,58 @@
+import { OnInit, OnDestroy } from '@angular/core';
+import { BaseResourceComponent } from '@memberjunction/ng-shared';
+import { ResourceData } from '@memberjunction/core-entities';
+import * as i0 from "@angular/core";
+/**
+ * Represents a single stat badge displayed inside a navigation card.
+ */
+interface CardStat {
+    Label: string;
+    Value: number;
+}
+/**
+ * Represents a navigation card on the Overview Hub grid.
+ */
+interface NavigationCard {
+    Key: string;
+    Title: string;
+    Description: string;
+    Icon: string;
+    ColorClass: string;
+    Stats: CardStat[];
+    NavItemLabel: string;
+}
+/**
+ * AI Overview Hub — the default landing page for the AI Administration application.
+ * Displays quick stats and navigation cards using only in-memory data from AIEngineBase.
+ */
+export declare class AIOverviewHubComponent extends BaseResourceComponent implements OnInit, OnDestroy {
+    private cdr;
+    ActiveAgentCount: number;
+    ModelCount: number;
+    PromptCount: number;
+    VendorCount: number;
+    Cards: NavigationCard[];
+    ngOnInit(): Promise<void>;
+    ngOnDestroy(): void;
+    GetResourceDisplayName(data: ResourceData): Promise<string>;
+    GetResourceIconClass(data: ResourceData): Promise<string>;
+    /**
+     * Reads counts from the in-memory AIEngineBase singleton.
+     * No database queries are made.
+     */
+    private LoadStats;
+    /**
+     * Constructs the navigation card definitions with live stat data.
+     */
+    private BuildCards;
+    /**
+     * Navigate to another tab in the current AI application by its nav item label.
+     */
+    NavigateToTab(navItemLabel: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AIOverviewHubComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AIOverviewHubComponent, "app-ai-overview-hub", never, {}, {}, never, never, false, never>;
+}
+/** Tree-shaking prevention */
+export declare function LoadAIOverviewHub(): void;
+export {};
+//# sourceMappingURL=ai-overview-hub.component.d.ts.map

package/dist/AI/components/overview/ai-overview-hub.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-overview-hub.component.d.ts","sourceRoot":"","sources":["../../../../src/AI/components/overview/ai-overview-hub.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,MAAM,EAAE,SAAS,EAAsD,MAAM,eAAe,CAAC;AAEjH,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;;AAG7D;;GAEG;AACH,UAAU,QAAQ;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,UAAU,cAAc;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,qBAoTa,sBAAuB,SAAQ,qBAAsB,YAAW,MAAM,EAAE,SAAS;IAC5F,OAAO,CAAC,GAAG,CAA6B;IAExC,gBAAgB,SAAK;IACrB,UAAU,SAAK;IACf,WAAW,SAAK;IAChB,WAAW,SAAK;IAChB,KAAK,EAAE,cAAc,EAAE,CAAM;IAEd,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;IAQ/B,WAAW,IAAI,IAAI;IAItB,sBAAsB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC;IAI3D,oBAAoB,CAAC,IAAI,EAAE,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC;IAI/D;;;OAGG;IACH,OAAO,CAAC,SAAS;IAQjB;;OAEG;IACH,OAAO,CAAC,UAAU;IA+ElB;;OAEG;IACH,aAAa,CAAC,YAAY,EAAE,MAAM,GAAG,IAAI;yCA9H9B,sBAAsB;2CAAtB,sBAAsB;CAiIlC;AAED,8BAA8B;AAC9B,wBAAgB,iBAAiB,IAAI,IAAI,CAA8B"}

package/dist/AI/components/overview/ai-overview-hub.component.js

@@ -0,0 +1,315 @@
+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 { Component, ChangeDetectorRef, ChangeDetectionStrategy, inject } from '@angular/core';
+import { RegisterClass } from '@memberjunction/global';
+import { BaseResourceComponent } from '@memberjunction/ng-shared';
+import { AIEngineBase } from '@memberjunction/ai-engine-base';
+import * as i0 from "@angular/core";
+const _forTrack0 = ($index, $item) => $item.Key;
+const _forTrack1 = ($index, $item) => $item.Label;
+function AIOverviewHubComponent_For_36_For_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 24)(1, "span", 25);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const stat_r4 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(stat_r4.Value);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", stat_r4.Label, " ");
+} }
+function AIOverviewHubComponent_For_36_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 17);
+    i0.ɵɵlistener("click", function AIOverviewHubComponent_For_36_Template_div_click_0_listener() { const card_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.NavigateToTab(card_r2.NavItemLabel)); });
+    i0.ɵɵelementStart(1, "div", 18)(2, "div", 19);
+    i0.ɵɵelement(3, "i");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(4, "i", 20);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "h3", 21);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "p", 22);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "div", 23);
+    i0.ɵɵrepeaterCreate(10, AIOverviewHubComponent_For_36_For_11_Template, 4, 2, "span", 24, _forTrack1);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const card_r2 = ctx.$implicit;
+    i0.ɵɵclassMap(card_r2.ColorClass);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(card_r2.ColorClass + "-icon");
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(card_r2.Icon);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(card_r2.Title);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(card_r2.Description);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(card_r2.Stats);
+} }
+/**
+ * AI Overview Hub — the default landing page for the AI Administration application.
+ * Displays quick stats and navigation cards using only in-memory data from AIEngineBase.
+ */
+let AIOverviewHubComponent = class AIOverviewHubComponent extends BaseResourceComponent {
+    cdr = inject(ChangeDetectorRef);
+    ActiveAgentCount = 0;
+    ModelCount = 0;
+    PromptCount = 0;
+    VendorCount = 0;
+    Cards = [];
+    async ngOnInit() {
+        super.ngOnInit();
+        this.LoadStats();
+        this.BuildCards();
+        this.NotifyLoadComplete();
+        this.cdr.markForCheck();
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+    async GetResourceDisplayName(data) {
+        return 'AI Overview';
+    }
+    async GetResourceIconClass(data) {
+        return 'fa-solid fa-grid-2';
+    }
+    /**
+     * Reads counts from the in-memory AIEngineBase singleton.
+     * No database queries are made.
+     */
+    LoadStats() {
+        const engine = AIEngineBase.Instance;
+        this.ActiveAgentCount = engine.Agents.filter(a => a.Status === 'Active').length;
+        this.ModelCount = engine.Models.length;
+        this.PromptCount = engine.Prompts.length;
+        this.VendorCount = engine.Vendors.length;
+    }
+    /**
+     * Constructs the navigation card definitions with live stat data.
+     */
+    BuildCards() {
+        const engine = AIEngineBase.Instance;
+        this.Cards = [
+            {
+                Key: 'analytics',
+                Title: 'Analytics',
+                Description: 'View execution metrics, cost trends, error rates, and usage patterns across your AI operations.',
+                Icon: 'fa-solid fa-chart-line',
+                ColorClass: 'card-analytics',
+                NavItemLabel: 'Analytics',
+                Stats: [
+                    { Label: 'Agents', Value: engine.Agents.length },
+                    { Label: 'Models', Value: engine.Models.length }
+                ]
+            },
+            {
+                Key: 'agents',
+                Title: 'Agents',
+                Description: 'Configure and manage AI agents, their capabilities, prompts, and execution parameters.',
+                Icon: 'fa-solid fa-robot',
+                ColorClass: 'card-agents',
+                NavItemLabel: 'Agents',
+                Stats: [
+                    { Label: 'Active', Value: engine.Agents.filter(a => a.Status === 'Active').length },
+                    { Label: 'Types', Value: engine.AgentTypes.length }
+                ]
+            },
+            {
+                Key: 'prompts',
+                Title: 'Prompts',
+                Description: 'Manage prompt templates, categories, and model priority assignments.',
+                Icon: 'fa-solid fa-message-lines',
+                ColorClass: 'card-prompts',
+                NavItemLabel: 'Prompts',
+                Stats: [
+                    { Label: 'Total', Value: engine.Prompts.length },
+                    { Label: 'Categories', Value: engine.PromptCategories.length }
+                ]
+            },
+            {
+                Key: 'models',
+                Title: 'Models',
+                Description: 'Browse AI models, configure vendor integrations, and manage model capabilities.',
+                Icon: 'fa-solid fa-microchip',
+                ColorClass: 'card-models',
+                NavItemLabel: 'Models',
+                Stats: [
+                    { Label: 'Models', Value: engine.Models.length },
+                    { Label: 'Vendors', Value: engine.Vendors.length }
+                ]
+            },
+            {
+                Key: 'requests',
+                Title: 'Agent Requests',
+                Description: 'Monitor and manage incoming agent requests, approvals, and execution queues.',
+                Icon: 'fa-solid fa-inbox',
+                ColorClass: 'card-requests',
+                NavItemLabel: 'Agent Requests',
+                Stats: [
+                    { Label: 'Agents', Value: engine.Agents.filter(a => a.Status === 'Active').length },
+                    { Label: 'Types', Value: engine.AgentTypes.length }
+                ]
+            },
+            {
+                Key: 'config',
+                Title: 'Configuration',
+                Description: 'System-level AI settings, configuration parameters, and platform defaults.',
+                Icon: 'fa-solid fa-gear',
+                ColorClass: 'card-config',
+                NavItemLabel: 'Configuration',
+                Stats: [
+                    { Label: 'Configs', Value: engine.Configurations.length },
+                    { Label: 'Params', Value: engine.ConfigurationParams.length }
+                ]
+            }
+        ];
+    }
+    /**
+     * Navigate to another tab in the current AI application by its nav item label.
+     */
+    NavigateToTab(navItemLabel) {
+        this.navigationService.OpenNavItemByName(navItemLabel);
+    }
+    static ɵfac = /*@__PURE__*/ (() => { let ɵAIOverviewHubComponent_BaseFactory; return function AIOverviewHubComponent_Factory(__ngFactoryType__) { return (ɵAIOverviewHubComponent_BaseFactory || (ɵAIOverviewHubComponent_BaseFactory = i0.ɵɵgetInheritedFactory(AIOverviewHubComponent)))(__ngFactoryType__ || AIOverviewHubComponent); }; })();
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AIOverviewHubComponent, selectors: [["app-ai-overview-hub"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 37, vars: 4, consts: [[1, "overview-hub"], [1, "hero-section"], [1, "hero-content"], [1, "hero-title-row"], [1, "fa-solid", "fa-robot", "hero-icon"], [1, "hero-title"], [1, "hero-subtitle"], [1, "stats-strip"], [1, "stat-pill"], [1, "fa-solid", "fa-robot"], [1, "stat-value"], [1, "stat-label"], [1, "fa-solid", "fa-microchip"], [1, "fa-solid", "fa-message-lines"], [1, "fa-solid", "fa-building"], [1, "cards-grid"], [1, "nav-card", 3, "class"], [1, "nav-card", 3, "click"], [1, "card-header"], [1, "card-icon-circle"], [1, "fa-solid", "fa-arrow-right", "card-arrow"], [1, "card-title"], [1, "card-description"], [1, "card-stats"], [1, "card-stat-badge"], [1, "card-stat-value"]], template: function AIOverviewHubComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3);
+            i0.ɵɵelement(4, "i", 4);
+            i0.ɵɵelementStart(5, "h1", 5);
+            i0.ɵɵtext(6, "AI Administration");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(7, "p", 6);
+            i0.ɵɵtext(8, " Manage agents, models, prompts, and system configuration for your AI platform. ");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(9, "div", 7)(10, "div", 8);
+            i0.ɵɵelement(11, "i", 9);
+            i0.ɵɵelementStart(12, "span", 10);
+            i0.ɵɵtext(13);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(14, "span", 11);
+            i0.ɵɵtext(15, "Active Agents");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(16, "div", 8);
+            i0.ɵɵelement(17, "i", 12);
+            i0.ɵɵelementStart(18, "span", 10);
+            i0.ɵɵtext(19);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(20, "span", 11);
+            i0.ɵɵtext(21, "Models");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(22, "div", 8);
+            i0.ɵɵelement(23, "i", 13);
+            i0.ɵɵelementStart(24, "span", 10);
+            i0.ɵɵtext(25);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(26, "span", 11);
+            i0.ɵɵtext(27, "Prompts");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(28, "div", 8);
+            i0.ɵɵelement(29, "i", 14);
+            i0.ɵɵelementStart(30, "span", 10);
+            i0.ɵɵtext(31);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(32, "span", 11);
+            i0.ɵɵtext(33, "Vendors");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(34, "div", 15);
+            i0.ɵɵrepeaterCreate(35, AIOverviewHubComponent_For_36_Template, 12, 8, "div", 16, _forTrack0);
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(13);
+            i0.ɵɵtextInterpolate(ctx.ActiveAgentCount);
+            i0.ɵɵadvance(6);
+            i0.ɵɵtextInterpolate(ctx.ModelCount);
+            i0.ɵɵadvance(6);
+            i0.ɵɵtextInterpolate(ctx.PromptCount);
+            i0.ɵɵadvance(6);
+            i0.ɵɵtextInterpolate(ctx.VendorCount);
+            i0.ɵɵadvance(4);
+            i0.ɵɵrepeater(ctx.Cards);
+        } }, styles: ["[_nghost-%COMP%] {\n      display: block;\n      height: 100%;\n      overflow-y: auto;\n      background: var(--mj-bg-page);\n    }\n\n    .overview-hub[_ngcontent-%COMP%] {\n      max-width: 1200px;\n      margin: 0 auto;\n      padding: 32px 24px;\n    }\n\n    \n\n    .hero-section[_ngcontent-%COMP%] {\n      margin-bottom: 24px;\n    }\n\n    .hero-title-row[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      margin-bottom: 8px;\n    }\n\n    .hero-icon[_ngcontent-%COMP%] {\n      font-size: 28px;\n      color: var(--mj-brand-primary);\n    }\n\n    .hero-title[_ngcontent-%COMP%] {\n      font-size: 28px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      margin: 0;\n    }\n\n    .hero-subtitle[_ngcontent-%COMP%] {\n      font-size: 15px;\n      color: var(--mj-text-muted);\n      margin: 0;\n      line-height: 1.5;\n    }\n\n    \n\n    .stats-strip[_ngcontent-%COMP%] {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 12px;\n      margin-bottom: 32px;\n    }\n\n    .stat-pill[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      background: var(--mj-bg-surface);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 24px;\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n    }\n\n    .stat-pill[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n      font-size: 14px;\n    }\n\n    .stat-value[_ngcontent-%COMP%] {\n      font-weight: 700;\n      color: var(--mj-text-primary);\n    }\n\n    .stat-label[_ngcontent-%COMP%] {\n      color: var(--mj-text-muted);\n    }\n\n    \n\n    .cards-grid[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      gap: 20px;\n    }\n\n    .nav-card[_ngcontent-%COMP%] {\n      position: relative;\n      background: var(--mj-bg-surface);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 12px;\n      padding: 24px;\n      cursor: pointer;\n      transition: transform 0.2s ease, box-shadow 0.2s ease;\n      overflow: hidden;\n    }\n\n    .nav-card[_ngcontent-%COMP%]::before {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: 4px;\n    }\n\n    .nav-card[_ngcontent-%COMP%]:hover {\n      transform: translateY(-4px);\n      box-shadow: 0 8px 24px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    }\n\n    .nav-card[_ngcontent-%COMP%]:hover   .card-arrow[_ngcontent-%COMP%] {\n      transform: translateX(4px);\n    }\n\n    \n\n    .card-analytics[_ngcontent-%COMP%]::before { background: var(--mj-brand-primary); }\n    .card-agents[_ngcontent-%COMP%]::before { background: var(--mj-status-success); }\n    .card-prompts[_ngcontent-%COMP%]::before { background: var(--mj-brand-primary); }\n    .card-models[_ngcontent-%COMP%]::before { background: var(--mj-color-violet-500, #8b5cf6); }\n    .card-requests[_ngcontent-%COMP%]::before { background: var(--mj-status-warning); }\n    .card-config[_ngcontent-%COMP%]::before { background: var(--mj-text-muted); }\n\n    \n\n    .card-header[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin-bottom: 16px;\n    }\n\n    .card-icon-circle[_ngcontent-%COMP%] {\n      width: 48px;\n      height: 48px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 20px;\n    }\n\n    .card-analytics-icon[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .card-agents-icon[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n\n    .card-prompts-icon[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .card-models-icon[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-color-violet-500, #8b5cf6) 12%, var(--mj-bg-surface));\n      color: var(--mj-color-violet-500, #8b5cf6);\n    }\n\n    .card-requests-icon[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n      color: var(--mj-status-warning);\n    }\n\n    .card-config-icon[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-muted);\n    }\n\n    .card-arrow[_ngcontent-%COMP%] {\n      color: var(--mj-text-muted);\n      font-size: 14px;\n      transition: transform 0.2s ease;\n    }\n\n    .card-title[_ngcontent-%COMP%] {\n      font-size: 17px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      margin: 0 0 8px 0;\n    }\n\n    .card-description[_ngcontent-%COMP%] {\n      font-size: 13px;\n      color: var(--mj-text-muted);\n      line-height: 1.5;\n      margin: 0 0 16px 0;\n    }\n\n    .card-stats[_ngcontent-%COMP%] {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 8px;\n    }\n\n    .card-stat-badge[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      padding: 4px 10px;\n      background: var(--mj-bg-surface-sunken);\n      border-radius: 12px;\n      font-size: 12px;\n      color: var(--mj-text-secondary);\n    }\n\n    .card-stat-value[_ngcontent-%COMP%] {\n      font-weight: 700;\n      color: var(--mj-text-primary);\n    }\n\n    \n\n    @media (max-width: 1024px) {\n      .cards-grid[_ngcontent-%COMP%] {\n        grid-template-columns: repeat(2, 1fr);\n      }\n    }\n\n    @media (max-width: 640px) {\n      .cards-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n      }\n\n      .overview-hub[_ngcontent-%COMP%] {\n        padding: 20px 16px;\n      }\n\n      .hero-title[_ngcontent-%COMP%] {\n        font-size: 22px;\n      }\n\n      .stats-strip[_ngcontent-%COMP%] {\n        gap: 8px;\n      }\n    }"], changeDetection: 0 });
+};
+AIOverviewHubComponent = __decorate([
+    RegisterClass(BaseResourceComponent, 'AIMonitorResource')
+], AIOverviewHubComponent);
+export { AIOverviewHubComponent };
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AIOverviewHubComponent, [{
+        type: Component,
+        args: [{ standalone: false, selector: 'app-ai-overview-hub', changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="overview-hub">
+      <!-- Hero Section -->
+      <div class="hero-section">
+        <div class="hero-content">
+          <div class="hero-title-row">
+            <i class="fa-solid fa-robot hero-icon"></i>
+            <h1 class="hero-title">AI Administration</h1>
+          </div>
+          <p class="hero-subtitle">
+            Manage agents, models, prompts, and system configuration for your AI platform.
+          </p>
+        </div>
+      </div>
+
+      <!-- Quick Stats Strip -->
+      <div class="stats-strip">
+        <div class="stat-pill">
+          <i class="fa-solid fa-robot"></i>
+          <span class="stat-value">{{ ActiveAgentCount }}</span>
+          <span class="stat-label">Active Agents</span>
+        </div>
+        <div class="stat-pill">
+          <i class="fa-solid fa-microchip"></i>
+          <span class="stat-value">{{ ModelCount }}</span>
+          <span class="stat-label">Models</span>
+        </div>
+        <div class="stat-pill">
+          <i class="fa-solid fa-message-lines"></i>
+          <span class="stat-value">{{ PromptCount }}</span>
+          <span class="stat-label">Prompts</span>
+        </div>
+        <div class="stat-pill">
+          <i class="fa-solid fa-building"></i>
+          <span class="stat-value">{{ VendorCount }}</span>
+          <span class="stat-label">Vendors</span>
+        </div>
+      </div>
+
+      <!-- Navigation Cards Grid -->
+      <div class="cards-grid">
+        @for (card of Cards; track card.Key) {
+          <div class="nav-card" [class]="card.ColorClass" (click)="NavigateToTab(card.NavItemLabel)">
+            <div class="card-header">
+              <div class="card-icon-circle" [class]="card.ColorClass + '-icon'">
+                <i [class]="card.Icon"></i>
+              </div>
+              <i class="fa-solid fa-arrow-right card-arrow"></i>
+            </div>
+            <h3 class="card-title">{{ card.Title }}</h3>
+            <p class="card-description">{{ card.Description }}</p>
+            <div class="card-stats">
+              @for (stat of card.Stats; track stat.Label) {
+                <span class="card-stat-badge">
+                  <span class="card-stat-value">{{ stat.Value }}</span>
+                  {{ stat.Label }}
+                </span>
+              }
+            </div>
+          </div>
+        }
+      </div>
+    </div>
+  `, styles: ["\n    :host {\n      display: block;\n      height: 100%;\n      overflow-y: auto;\n      background: var(--mj-bg-page);\n    }\n\n    .overview-hub {\n      max-width: 1200px;\n      margin: 0 auto;\n      padding: 32px 24px;\n    }\n\n    /* Hero Section */\n    .hero-section {\n      margin-bottom: 24px;\n    }\n\n    .hero-title-row {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      margin-bottom: 8px;\n    }\n\n    .hero-icon {\n      font-size: 28px;\n      color: var(--mj-brand-primary);\n    }\n\n    .hero-title {\n      font-size: 28px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      margin: 0;\n    }\n\n    .hero-subtitle {\n      font-size: 15px;\n      color: var(--mj-text-muted);\n      margin: 0;\n      line-height: 1.5;\n    }\n\n    /* Stats Strip */\n    .stats-strip {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 12px;\n      margin-bottom: 32px;\n    }\n\n    .stat-pill {\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      background: var(--mj-bg-surface);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 24px;\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n    }\n\n    .stat-pill i {\n      color: var(--mj-brand-primary);\n      font-size: 14px;\n    }\n\n    .stat-value {\n      font-weight: 700;\n      color: var(--mj-text-primary);\n    }\n\n    .stat-label {\n      color: var(--mj-text-muted);\n    }\n\n    /* Cards Grid */\n    .cards-grid {\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      gap: 20px;\n    }\n\n    .nav-card {\n      position: relative;\n      background: var(--mj-bg-surface);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 12px;\n      padding: 24px;\n      cursor: pointer;\n      transition: transform 0.2s ease, box-shadow 0.2s ease;\n      overflow: hidden;\n    }\n\n    .nav-card::before {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: 4px;\n    }\n\n    .nav-card:hover {\n      transform: translateY(-4px);\n      box-shadow: 0 8px 24px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    }\n\n    .nav-card:hover .card-arrow {\n      transform: translateX(4px);\n    }\n\n    /* Card color variants - top border */\n    .card-analytics::before { background: var(--mj-brand-primary); }\n    .card-agents::before { background: var(--mj-status-success); }\n    .card-prompts::before { background: var(--mj-brand-primary); }\n    .card-models::before { background: var(--mj-color-violet-500, #8b5cf6); }\n    .card-requests::before { background: var(--mj-status-warning); }\n    .card-config::before { background: var(--mj-text-muted); }\n\n    /* Card icon circles */\n    .card-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin-bottom: 16px;\n    }\n\n    .card-icon-circle {\n      width: 48px;\n      height: 48px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 20px;\n    }\n\n    .card-analytics-icon {\n      background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .card-agents-icon {\n      background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n\n    .card-prompts-icon {\n      background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .card-models-icon {\n      background: color-mix(in srgb, var(--mj-color-violet-500, #8b5cf6) 12%, var(--mj-bg-surface));\n      color: var(--mj-color-violet-500, #8b5cf6);\n    }\n\n    .card-requests-icon {\n      background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n      color: var(--mj-status-warning);\n    }\n\n    .card-config-icon {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-muted);\n    }\n\n    .card-arrow {\n      color: var(--mj-text-muted);\n      font-size: 14px;\n      transition: transform 0.2s ease;\n    }\n\n    .card-title {\n      font-size: 17px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      margin: 0 0 8px 0;\n    }\n\n    .card-description {\n      font-size: 13px;\n      color: var(--mj-text-muted);\n      line-height: 1.5;\n      margin: 0 0 16px 0;\n    }\n\n    .card-stats {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 8px;\n    }\n\n    .card-stat-badge {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      padding: 4px 10px;\n      background: var(--mj-bg-surface-sunken);\n      border-radius: 12px;\n      font-size: 12px;\n      color: var(--mj-text-secondary);\n    }\n\n    .card-stat-value {\n      font-weight: 700;\n      color: var(--mj-text-primary);\n    }\n\n    /* Responsive */\n    @media (max-width: 1024px) {\n      .cards-grid {\n        grid-template-columns: repeat(2, 1fr);\n      }\n    }\n\n    @media (max-width: 640px) {\n      .cards-grid {\n        grid-template-columns: 1fr;\n      }\n\n      .overview-hub {\n        padding: 20px 16px;\n      }\n\n      .hero-title {\n        font-size: 22px;\n      }\n\n      .stats-strip {\n        gap: 8px;\n      }\n    }\n  "] }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIOverviewHubComponent, { className: "AIOverviewHubComponent", filePath: "src/AI/components/overview/ai-overview-hub.component.ts", lineNumber: 340 }); })();
+/** Tree-shaking prevention */
+export function LoadAIOverviewHub() { }
+//# sourceMappingURL=ai-overview-hub.component.js.map

package/dist/AI/components/overview/ai-overview-hub.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-overview-hub.component.js","sourceRoot":"","sources":["../../../../src/AI/components/overview/ai-overview-hub.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, OnInit, OnDestroy, ChangeDetectorRef, ChangeDetectionStrategy, inject } from '@angular/core';\nimport { RegisterClass } from '@memberjunction/global';\nimport { BaseResourceComponent } from '@memberjunction/ng-shared';\nimport { ResourceData } from '@memberjunction/core-entities';\nimport { AIEngineBase } from '@memberjunction/ai-engine-base';\n\n/**\n * Represents a single stat badge displayed inside a navigation card.\n */\ninterface CardStat {\n  Label: string;\n  Value: number;\n}\n\n/**\n * Represents a navigation card on the Overview Hub grid.\n */\ninterface NavigationCard {\n  Key: string;\n  Title: string;\n  Description: string;\n  Icon: string;\n  ColorClass: string;\n  Stats: CardStat[];\n  NavItemLabel: string;\n}\n\n/**\n * AI Overview Hub — the default landing page for the AI Administration application.\n * Displays quick stats and navigation cards using only in-memory data from AIEngineBase.\n */\n@RegisterClass(BaseResourceComponent, 'AIMonitorResource')\n@Component({\n  standalone: false,\n  selector: 'app-ai-overview-hub',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <div class=\"overview-hub\">\n      <!-- Hero Section -->\n      <div class=\"hero-section\">\n        <div class=\"hero-content\">\n          <div class=\"hero-title-row\">\n            <i class=\"fa-solid fa-robot hero-icon\"></i>\n            <h1 class=\"hero-title\">AI Administration</h1>\n          </div>\n          <p class=\"hero-subtitle\">\n            Manage agents, models, prompts, and system configuration for your AI platform.\n          </p>\n        </div>\n      </div>\n\n      <!-- Quick Stats Strip -->\n      <div class=\"stats-strip\">\n        <div class=\"stat-pill\">\n          <i class=\"fa-solid fa-robot\"></i>\n          <span class=\"stat-value\">{{ ActiveAgentCount }}</span>\n          <span class=\"stat-label\">Active Agents</span>\n        </div>\n        <div class=\"stat-pill\">\n          <i class=\"fa-solid fa-microchip\"></i>\n          <span class=\"stat-value\">{{ ModelCount }}</span>\n          <span class=\"stat-label\">Models</span>\n        </div>\n        <div class=\"stat-pill\">\n          <i class=\"fa-solid fa-message-lines\"></i>\n          <span class=\"stat-value\">{{ PromptCount }}</span>\n          <span class=\"stat-label\">Prompts</span>\n        </div>\n        <div class=\"stat-pill\">\n          <i class=\"fa-solid fa-building\"></i>\n          <span class=\"stat-value\">{{ VendorCount }}</span>\n          <span class=\"stat-label\">Vendors</span>\n        </div>\n      </div>\n\n      <!-- Navigation Cards Grid -->\n      <div class=\"cards-grid\">\n        @for (card of Cards; track card.Key) {\n          <div class=\"nav-card\" [class]=\"card.ColorClass\" (click)=\"NavigateToTab(card.NavItemLabel)\">\n            <div class=\"card-header\">\n              <div class=\"card-icon-circle\" [class]=\"card.ColorClass + '-icon'\">\n                <i [class]=\"card.Icon\"></i>\n              </div>\n              <i class=\"fa-solid fa-arrow-right card-arrow\"></i>\n            </div>\n            <h3 class=\"card-title\">{{ card.Title }}</h3>\n            <p class=\"card-description\">{{ card.Description }}</p>\n            <div class=\"card-stats\">\n              @for (stat of card.Stats; track stat.Label) {\n                <span class=\"card-stat-badge\">\n                  <span class=\"card-stat-value\">{{ stat.Value }}</span>\n                  {{ stat.Label }}\n                </span>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  `,\n  styles: [`\n    :host {\n      display: block;\n      height: 100%;\n      overflow-y: auto;\n      background: var(--mj-bg-page);\n    }\n\n    .overview-hub {\n      max-width: 1200px;\n      margin: 0 auto;\n      padding: 32px 24px;\n    }\n\n    /* Hero Section */\n    .hero-section {\n      margin-bottom: 24px;\n    }\n\n    .hero-title-row {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      margin-bottom: 8px;\n    }\n\n    .hero-icon {\n      font-size: 28px;\n      color: var(--mj-brand-primary);\n    }\n\n    .hero-title {\n      font-size: 28px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      margin: 0;\n    }\n\n    .hero-subtitle {\n      font-size: 15px;\n      color: var(--mj-text-muted);\n      margin: 0;\n      line-height: 1.5;\n    }\n\n    /* Stats Strip */\n    .stats-strip {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 12px;\n      margin-bottom: 32px;\n    }\n\n    .stat-pill {\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      background: var(--mj-bg-surface);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 24px;\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n    }\n\n    .stat-pill i {\n      color: var(--mj-brand-primary);\n      font-size: 14px;\n    }\n\n    .stat-value {\n      font-weight: 700;\n      color: var(--mj-text-primary);\n    }\n\n    .stat-label {\n      color: var(--mj-text-muted);\n    }\n\n    /* Cards Grid */\n    .cards-grid {\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      gap: 20px;\n    }\n\n    .nav-card {\n      position: relative;\n      background: var(--mj-bg-surface);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 12px;\n      padding: 24px;\n      cursor: pointer;\n      transition: transform 0.2s ease, box-shadow 0.2s ease;\n      overflow: hidden;\n    }\n\n    .nav-card::before {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: 4px;\n    }\n\n    .nav-card:hover {\n      transform: translateY(-4px);\n      box-shadow: 0 8px 24px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    }\n\n    .nav-card:hover .card-arrow {\n      transform: translateX(4px);\n    }\n\n    /* Card color variants - top border */\n    .card-analytics::before { background: var(--mj-brand-primary); }\n    .card-agents::before { background: var(--mj-status-success); }\n    .card-prompts::before { background: var(--mj-brand-primary); }\n    .card-models::before { background: var(--mj-color-violet-500, #8b5cf6); }\n    .card-requests::before { background: var(--mj-status-warning); }\n    .card-config::before { background: var(--mj-text-muted); }\n\n    /* Card icon circles */\n    .card-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin-bottom: 16px;\n    }\n\n    .card-icon-circle {\n      width: 48px;\n      height: 48px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 20px;\n    }\n\n    .card-analytics-icon {\n      background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .card-agents-icon {\n      background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n\n    .card-prompts-icon {\n      background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .card-models-icon {\n      background: color-mix(in srgb, var(--mj-color-violet-500, #8b5cf6) 12%, var(--mj-bg-surface));\n      color: var(--mj-color-violet-500, #8b5cf6);\n    }\n\n    .card-requests-icon {\n      background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n      color: var(--mj-status-warning);\n    }\n\n    .card-config-icon {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-muted);\n    }\n\n    .card-arrow {\n      color: var(--mj-text-muted);\n      font-size: 14px;\n      transition: transform 0.2s ease;\n    }\n\n    .card-title {\n      font-size: 17px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      margin: 0 0 8px 0;\n    }\n\n    .card-description {\n      font-size: 13px;\n      color: var(--mj-text-muted);\n      line-height: 1.5;\n      margin: 0 0 16px 0;\n    }\n\n    .card-stats {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 8px;\n    }\n\n    .card-stat-badge {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      padding: 4px 10px;\n      background: var(--mj-bg-surface-sunken);\n      border-radius: 12px;\n      font-size: 12px;\n      color: var(--mj-text-secondary);\n    }\n\n    .card-stat-value {\n      font-weight: 700;\n      color: var(--mj-text-primary);\n    }\n\n    /* Responsive */\n    @media (max-width: 1024px) {\n      .cards-grid {\n        grid-template-columns: repeat(2, 1fr);\n      }\n    }\n\n    @media (max-width: 640px) {\n      .cards-grid {\n        grid-template-columns: 1fr;\n      }\n\n      .overview-hub {\n        padding: 20px 16px;\n      }\n\n      .hero-title {\n        font-size: 22px;\n      }\n\n      .stats-strip {\n        gap: 8px;\n      }\n    }\n  `]\n})\nexport class AIOverviewHubComponent extends BaseResourceComponent implements OnInit, OnDestroy {\n  private cdr = inject(ChangeDetectorRef);\n\n  ActiveAgentCount = 0;\n  ModelCount = 0;\n  PromptCount = 0;\n  VendorCount = 0;\n  Cards: NavigationCard[] = [];\n\n  override async ngOnInit(): Promise<void> {\n    super.ngOnInit();\n    this.LoadStats();\n    this.BuildCards();\n    this.NotifyLoadComplete();\n    this.cdr.markForCheck();\n  }\n\n  override ngOnDestroy(): void {\n    super.ngOnDestroy();\n  }\n\n  async GetResourceDisplayName(data: ResourceData): Promise<string> {\n    return 'AI Overview';\n  }\n\n  async GetResourceIconClass(data: ResourceData): Promise<string> {\n    return 'fa-solid fa-grid-2';\n  }\n\n  /**\n   * Reads counts from the in-memory AIEngineBase singleton.\n   * No database queries are made.\n   */\n  private LoadStats(): void {\n    const engine = AIEngineBase.Instance;\n    this.ActiveAgentCount = engine.Agents.filter(a => a.Status === 'Active').length;\n    this.ModelCount = engine.Models.length;\n    this.PromptCount = engine.Prompts.length;\n    this.VendorCount = engine.Vendors.length;\n  }\n\n  /**\n   * Constructs the navigation card definitions with live stat data.\n   */\n  private BuildCards(): void {\n    const engine = AIEngineBase.Instance;\n\n    this.Cards = [\n      {\n        Key: 'analytics',\n        Title: 'Analytics',\n        Description: 'View execution metrics, cost trends, error rates, and usage patterns across your AI operations.',\n        Icon: 'fa-solid fa-chart-line',\n        ColorClass: 'card-analytics',\n        NavItemLabel: 'Analytics',\n        Stats: [\n          { Label: 'Agents', Value: engine.Agents.length },\n          { Label: 'Models', Value: engine.Models.length }\n        ]\n      },\n      {\n        Key: 'agents',\n        Title: 'Agents',\n        Description: 'Configure and manage AI agents, their capabilities, prompts, and execution parameters.',\n        Icon: 'fa-solid fa-robot',\n        ColorClass: 'card-agents',\n        NavItemLabel: 'Agents',\n        Stats: [\n          { Label: 'Active', Value: engine.Agents.filter(a => a.Status === 'Active').length },\n          { Label: 'Types', Value: engine.AgentTypes.length }\n        ]\n      },\n      {\n        Key: 'prompts',\n        Title: 'Prompts',\n        Description: 'Manage prompt templates, categories, and model priority assignments.',\n        Icon: 'fa-solid fa-message-lines',\n        ColorClass: 'card-prompts',\n        NavItemLabel: 'Prompts',\n        Stats: [\n          { Label: 'Total', Value: engine.Prompts.length },\n          { Label: 'Categories', Value: engine.PromptCategories.length }\n        ]\n      },\n      {\n        Key: 'models',\n        Title: 'Models',\n        Description: 'Browse AI models, configure vendor integrations, and manage model capabilities.',\n        Icon: 'fa-solid fa-microchip',\n        ColorClass: 'card-models',\n        NavItemLabel: 'Models',\n        Stats: [\n          { Label: 'Models', Value: engine.Models.length },\n          { Label: 'Vendors', Value: engine.Vendors.length }\n        ]\n      },\n      {\n        Key: 'requests',\n        Title: 'Agent Requests',\n        Description: 'Monitor and manage incoming agent requests, approvals, and execution queues.',\n        Icon: 'fa-solid fa-inbox',\n        ColorClass: 'card-requests',\n        NavItemLabel: 'Agent Requests',\n        Stats: [\n          { Label: 'Agents', Value: engine.Agents.filter(a => a.Status === 'Active').length },\n          { Label: 'Types', Value: engine.AgentTypes.length }\n        ]\n      },\n      {\n        Key: 'config',\n        Title: 'Configuration',\n        Description: 'System-level AI settings, configuration parameters, and platform defaults.',\n        Icon: 'fa-solid fa-gear',\n        ColorClass: 'card-config',\n        NavItemLabel: 'Configuration',\n        Stats: [\n          { Label: 'Configs', Value: engine.Configurations.length },\n          { Label: 'Params', Value: engine.ConfigurationParams.length }\n        ]\n      }\n    ];\n  }\n\n  /**\n   * Navigate to another tab in the current AI application by its nav item label.\n   */\n  NavigateToTab(navItemLabel: string): void {\n    this.navigationService.OpenNavItemByName(navItemLabel);\n  }\n}\n\n/** Tree-shaking prevention */\nexport function LoadAIOverviewHub(): void { /* intentionally empty */ }\n"]}

package/dist/AI/components/prompts/prompt-management.component.js

@@ -962,7 +962,7 @@ let PromptManagementComponent = class PromptManagementComponent extends BaseReso
         });
         // Apply sorting
         this.filteredPrompts = this.applySorting(this.filteredPrompts);
-        this.cdr.detectChanges();
+        this.cdr.markForCheck();
     }
     /**
      * Sort the prompts by the specified column