@memberjunction/ng-dashboards 2.42.0

package/dist/AI/components/models/model-management.component.js

@@ -0,0 +1,669 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { Component, Output, EventEmitter } from '@angular/core';
+import { RunView, Metadata, LogError, LogStatus } from '@memberjunction/core';
+import { Subject, combineLatest, BehaviorSubject } from 'rxjs';
+import { debounceTime, takeUntil, distinctUntilChanged } from 'rxjs/operators';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+import * as i2 from "@progress/kendo-angular-layout";
+import * as i3 from "@memberjunction/ng-container-directives";
+const _forTrack0 = ($index, $item) => $item.ID;
+const _forTrack1 = ($index, $item) => $item.model.ID;
+function ModelManagementComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 11)(1, "div", 14)(2, "div", 15);
+    i0.ɵɵelement(3, "div", 16)(4, "div", 16)(5, "div", 16);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 17);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate(ctx_r0.loadingMessage);
+} }
+function ModelManagementComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 12)(1, "p", 18);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.error);
+} }
+function ModelManagementComponent_Conditional_17_For_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 30);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const vendor_r3 = ctx.$implicit;
+    i0.ɵɵproperty("value", vendor_r3.ID);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(vendor_r3.Name);
+} }
+function ModelManagementComponent_Conditional_17_For_29_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 30);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const type_r4 = ctx.$implicit;
+    i0.ɵɵproperty("value", type_r4.ID);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(type_r4.Name);
+} }
+function ModelManagementComponent_Conditional_17_Conditional_46_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "p");
+    i0.ɵɵtext(1, "No AI models have been configured yet.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "button", 38);
+    i0.ɵɵlistener("click", function ModelManagementComponent_Conditional_17_Conditional_46_Conditional_4_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.createNewModel()); });
+    i0.ɵɵelement(3, "span", 8);
+    i0.ɵɵtext(4, " Add First Model ");
+    i0.ɵɵelementEnd();
+} }
+function ModelManagementComponent_Conditional_17_Conditional_46_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "p");
+    i0.ɵɵtext(1, "No models match your current filters.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "button", 38);
+    i0.ɵɵlistener("click", function ModelManagementComponent_Conditional_17_Conditional_46_Conditional_5_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.clearFilters()); });
+    i0.ɵɵtext(3, "Clear Filters");
+    i0.ɵɵelementEnd();
+} }
+function ModelManagementComponent_Conditional_17_Conditional_46_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 35);
+    i0.ɵɵelement(1, "span", 37);
+    i0.ɵɵelementStart(2, "h3");
+    i0.ɵɵtext(3, "No Models Found");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(4, ModelManagementComponent_Conditional_17_Conditional_46_Conditional_4_Template, 5, 0)(5, ModelManagementComponent_Conditional_17_Conditional_46_Conditional_5_Template, 4, 0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(ctx_r0.models.length === 0 ? 4 : 5);
+} }
+function ModelManagementComponent_Conditional_17_Conditional_47_For_2_Conditional_30_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 49);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const displayData_r8 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", displayData_r8.model.Description, " ");
+} }
+function ModelManagementComponent_Conditional_17_Conditional_47_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 40);
+    i0.ɵɵlistener("click", function ModelManagementComponent_Conditional_17_Conditional_47_For_2_Template_div_click_0_listener() { const displayData_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onOpenModel(displayData_r8.model)); });
+    i0.ɵɵelementStart(1, "div", 41)(2, "div", 42)(3, "h4");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 43);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 44);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "div", 45)(10, "div", 46)(11, "span", 47);
+    i0.ɵɵtext(12, "Type:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "span", 48);
+    i0.ɵɵtext(14);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(15, "div", 46)(16, "span", 47);
+    i0.ɵɵtext(17, "Power:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "span", 48);
+    i0.ɵɵtext(19);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(20, "div", 46)(21, "span", 47);
+    i0.ɵɵtext(22, "Speed:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(23, "span", 48);
+    i0.ɵɵtext(24);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(25, "div", 46)(26, "span", 47);
+    i0.ɵɵtext(27, "Cost:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(28, "span", 48);
+    i0.ɵɵtext(29);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵtemplate(30, ModelManagementComponent_Conditional_17_Conditional_47_For_2_Conditional_30_Template, 2, 1, "div", 49);
+    i0.ɵɵelementStart(31, "div", 50)(32, "button", 51);
+    i0.ɵɵlistener("click", function ModelManagementComponent_Conditional_17_Conditional_47_For_2_Template_button_click_32_listener($event) { const displayData_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); $event.stopPropagation(); return i0.ɵɵresetView(ctx_r0.toggleModelStatus(displayData_r8.model)); });
+    i0.ɵɵelement(33, "span");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(34, "button", 52);
+    i0.ɵɵlistener("click", function ModelManagementComponent_Conditional_17_Conditional_47_For_2_Template_button_click_34_listener($event) { const displayData_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); $event.stopPropagation(); return i0.ɵɵresetView(ctx_r0.onOpenModel(displayData_r8.model)); });
+    i0.ɵɵelement(35, "span", 53);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const displayData_r8 = ctx.$implicit;
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(displayData_r8.model.Name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate((displayData_r8.vendor == null ? null : displayData_r8.vendor.Name) || "Unknown Vendor");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("active", displayData_r8.model.IsActive);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", displayData_r8.statusDisplay, " ");
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate((displayData_r8.modelType == null ? null : displayData_r8.modelType.Name) || "Unknown");
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(displayData_r8.powerRankDisplay);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(displayData_r8.speedRankDisplay);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(displayData_r8.costRankDisplay);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(displayData_r8.model.Description ? 30 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("title", displayData_r8.model.IsActive ? "Deactivate" : "Activate");
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(displayData_r8.model.IsActive ? "fa-solid fa-pause" : "fa-solid fa-play");
+} }
+function ModelManagementComponent_Conditional_17_Conditional_47_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 36);
+    i0.ɵɵrepeaterCreate(1, ModelManagementComponent_Conditional_17_Conditional_47_For_2_Template, 36, 13, "div", 39, _forTrack1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.filteredModels);
+} }
+function ModelManagementComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 13)(1, "kendo-splitter", 19)(2, "kendo-splitter-pane", 20)(3, "div", 21)(4, "div", 22)(5, "h3");
+    i0.ɵɵtext(6, "Filters");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "button", 23);
+    i0.ɵɵlistener("click", function ModelManagementComponent_Conditional_17_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleFiltersVisible()); });
+    i0.ɵɵelement(8, "span", 24);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "div", 25)(10, "div", 26)(11, "label");
+    i0.ɵɵtext(12, "Search");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "input", 27);
+    i0.ɵɵtwoWayListener("ngModelChange", function ModelManagementComponent_Conditional_17_Template_input_ngModelChange_13_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.filter.searchTerm, $event) || (ctx_r0.filter.searchTerm = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function ModelManagementComponent_Conditional_17_Template_input_ngModelChange_13_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onSearchChange($event)); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(14, "div", 28)(15, "label");
+    i0.ɵɵtext(16, "Vendor");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(17, "select", 29);
+    i0.ɵɵtwoWayListener("ngModelChange", function ModelManagementComponent_Conditional_17_Template_select_ngModelChange_17_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.filter.vendorId, $event) || (ctx_r0.filter.vendorId = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function ModelManagementComponent_Conditional_17_Template_select_ngModelChange_17_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onFilterChange()); });
+    i0.ɵɵelementStart(18, "option", 30);
+    i0.ɵɵtext(19, "All Vendors");
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(20, ModelManagementComponent_Conditional_17_For_21_Template, 2, 2, "option", 30, _forTrack0);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(22, "div", 28)(23, "label");
+    i0.ɵɵtext(24, "Type");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(25, "select", 29);
+    i0.ɵɵtwoWayListener("ngModelChange", function ModelManagementComponent_Conditional_17_Template_select_ngModelChange_25_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.filter.modelTypeId, $event) || (ctx_r0.filter.modelTypeId = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function ModelManagementComponent_Conditional_17_Template_select_ngModelChange_25_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onFilterChange()); });
+    i0.ɵɵelementStart(26, "option", 30);
+    i0.ɵɵtext(27, "All Types");
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(28, ModelManagementComponent_Conditional_17_For_29_Template, 2, 2, "option", 30, _forTrack0);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(30, "div", 28)(31, "label");
+    i0.ɵɵtext(32, "Status");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(33, "select", 29);
+    i0.ɵɵtwoWayListener("ngModelChange", function ModelManagementComponent_Conditional_17_Template_select_ngModelChange_33_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.filter.isActive, $event) || (ctx_r0.filter.isActive = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function ModelManagementComponent_Conditional_17_Template_select_ngModelChange_33_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onFilterChange()); });
+    i0.ɵɵelementStart(34, "option", 30);
+    i0.ɵɵtext(35, "All");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(36, "option", 30);
+    i0.ɵɵtext(37, "Active");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(38, "option", 30);
+    i0.ɵɵtext(39, "Inactive");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(40, "div", 31)(41, "button", 32);
+    i0.ɵɵlistener("click", function ModelManagementComponent_Conditional_17_Template_button_click_41_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.clearFilters()); });
+    i0.ɵɵelement(42, "span", 24);
+    i0.ɵɵtext(43, " Clear All ");
+    i0.ɵɵelementEnd()()()()();
+    i0.ɵɵelementStart(44, "kendo-splitter-pane", 33)(45, "div", 34);
+    i0.ɵɵtemplate(46, ModelManagementComponent_Conditional_17_Conditional_46_Template, 6, 1, "div", 35)(47, ModelManagementComponent_Conditional_17_Conditional_47_Template, 3, 0, "div", 36);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("size", ctx_r0.filtersVisible ? "280px" : "0px")("collapsible", false)("resizable", ctx_r0.filtersVisible)("scrollable", false)("hidden", !ctx_r0.filtersVisible);
+    i0.ɵɵadvance(11);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.filter.searchTerm);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.filter.vendorId);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("value", null);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r0.vendors);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.filter.modelTypeId);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("value", null);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r0.modelTypes);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.filter.isActive);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("value", null);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("value", true);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("value", false);
+    i0.ɵɵadvance(6);
+    i0.ɵɵproperty("resizable", true)("scrollable", false);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.filteredModels.length === 0 ? 46 : 47);
+} }
+export class ModelManagementComponent {
+    constructor() {
+        this.openEntityRecord = new EventEmitter();
+        // Data properties
+        this.models = [];
+        this.vendors = [];
+        this.modelTypes = [];
+        this.filteredModels = [];
+        // UI state
+        this.isLoading = false;
+        this.loadingMessage = 'Loading AI models...';
+        this.error = null;
+        this.filtersVisible = false;
+        // Filter state
+        this.filter = {
+            searchTerm: '',
+            vendorId: null,
+            modelTypeId: null,
+            powerRankMin: null,
+            powerRankMax: null,
+            speedRankMin: null,
+            speedRankMax: null,
+            costRankMin: null,
+            costRankMax: null,
+            isActive: null
+        };
+        // Sort options
+        this.sortOptions = [
+            { field: 'Name', direction: 'asc', label: 'Name (A-Z)' },
+            { field: 'Name', direction: 'desc', label: 'Name (Z-A)' },
+            { field: 'PowerRank', direction: 'desc', label: 'Power Rank (High to Low)' },
+            { field: 'PowerRank', direction: 'asc', label: 'Power Rank (Low to High)' },
+            { field: 'SpeedRank', direction: 'desc', label: 'Speed Rank (High to Low)' },
+            { field: 'SpeedRank', direction: 'asc', label: 'Speed Rank (Low to High)' },
+            { field: 'CostRank', direction: 'desc', label: 'Cost Rank (High to Low)' },
+            { field: 'CostRank', direction: 'asc', label: 'Cost Rank (Low to High)' },
+            { field: '__mj_CreatedAt', direction: 'desc', label: 'Recently Added' },
+            { field: '__mj_UpdatedAt', direction: 'desc', label: 'Recently Updated' }
+        ];
+        this.selectedSort = this.sortOptions[0];
+        // Search and filter subjects
+        this.searchSubject = new BehaviorSubject('');
+        this.filterSubject = new BehaviorSubject(this.filter);
+        this.destroy$ = new Subject();
+    }
+    ngOnInit() {
+        this.setupFilterSubscriptions();
+        this.loadData();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    setupFilterSubscriptions() {
+        // Debounced search
+        this.searchSubject.pipe(debounceTime(300), distinctUntilChanged(), takeUntil(this.destroy$)).subscribe(searchTerm => {
+            this.filter.searchTerm = searchTerm;
+            this.applyFilters();
+        });
+        // Combined filter changes
+        combineLatest([
+            this.filterSubject.pipe(debounceTime(100)),
+            this.searchSubject.pipe(debounceTime(300))
+        ]).pipe(takeUntil(this.destroy$)).subscribe(() => {
+            this.applyFilters();
+        });
+    }
+    loadData() {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                this.isLoading = true;
+                this.error = null;
+                this.loadingMessage = 'Loading AI models...';
+                // Load all required data in parallel
+                const [modelsResult, vendorsResult, modelTypesResult] = yield Promise.all([
+                    this.loadModels(),
+                    this.loadVendors(),
+                    this.loadModelTypes()
+                ]);
+                if (modelsResult && vendorsResult && modelTypesResult) {
+                    this.applyFilters();
+                    LogStatus('Model management data loaded successfully');
+                }
+            }
+            catch (error) {
+                this.error = 'Failed to load model data. Please try again.';
+                LogError('Error loading model management data: ' + String(error));
+            }
+            finally {
+                this.isLoading = false;
+            }
+        });
+    }
+    loadModels() {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                const md = Metadata.Provider;
+                if (!md) {
+                    throw new Error('Metadata provider not available');
+                }
+                const rv = new RunView();
+                const result = yield rv.RunView({
+                    EntityName: 'AI Models',
+                    ExtraFilter: '', // Load all models, we'll filter in UI
+                    OrderBy: 'Name',
+                    UserSearchString: '',
+                    OverrideExcludeFilter: '',
+                    SaveViewResults: false
+                });
+                if (result && result.Success && result.Results) {
+                    this.models = result.Results;
+                    return true;
+                }
+                else {
+                    throw new Error('Failed to load AI models');
+                }
+            }
+            catch (error) {
+                LogError('Error loading AI models: ' + String(error));
+                return false;
+            }
+        });
+    }
+    loadVendors() {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                const rv = new RunView();
+                const result = yield rv.RunView({
+                    EntityName: 'MJ: AI Vendors',
+                    ExtraFilter: '',
+                    OrderBy: 'Name',
+                    UserSearchString: '',
+                    OverrideExcludeFilter: '',
+                    SaveViewResults: false
+                });
+                if (result && result.Success && result.Results) {
+                    this.vendors = result.Results;
+                    return true;
+                }
+                else {
+                    throw new Error('Failed to load AI vendors');
+                }
+            }
+            catch (error) {
+                LogError('Error loading AI vendors: ' + String(error));
+                return false;
+            }
+        });
+    }
+    loadModelTypes() {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                const rv = new RunView();
+                const result = yield rv.RunView({
+                    EntityName: 'AI Model Types',
+                    ExtraFilter: '',
+                    OrderBy: 'Name',
+                    UserSearchString: '',
+                    OverrideExcludeFilter: '',
+                    SaveViewResults: false
+                });
+                if (result && result.Success && result.Results) {
+                    this.modelTypes = result.Results;
+                    return true;
+                }
+                else {
+                    throw new Error('Failed to load AI model types');
+                }
+            }
+            catch (error) {
+                LogError('Error loading AI model types: ' + String(error));
+                return false;
+            }
+        });
+    }
+    onSearchChange(searchTerm) {
+        this.searchSubject.next(searchTerm);
+    }
+    onFilterChange() {
+        this.filterSubject.next(Object.assign({}, this.filter));
+    }
+    onSortChange(sort) {
+        this.selectedSort = sort;
+        this.applyFilters();
+    }
+    toggleFiltersVisible() {
+        this.filtersVisible = !this.filtersVisible;
+    }
+    clearFilters() {
+        this.filter = {
+            searchTerm: '',
+            vendorId: null,
+            modelTypeId: null,
+            powerRankMin: null,
+            powerRankMax: null,
+            speedRankMin: null,
+            speedRankMax: null,
+            costRankMin: null,
+            costRankMax: null,
+            isActive: null
+        };
+        this.searchSubject.next('');
+        this.filterSubject.next(this.filter);
+    }
+    applyFilters() {
+        let filtered = [...this.models];
+        // Apply search filter
+        if (this.filter.searchTerm) {
+            const searchLower = this.filter.searchTerm.toLowerCase();
+            filtered = filtered.filter(model => {
+                var _a, _b, _c;
+                return ((_a = model.Name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchLower)) ||
+                    ((_b = model.Description) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(searchLower)) ||
+                    ((_c = this.getVendorName(model)) === null || _c === void 0 ? void 0 : _c.toLowerCase().includes(searchLower));
+            });
+        }
+        // Apply vendor filter
+        if (this.filter.vendorId) {
+            filtered = filtered.filter(model => model.APIName === this.filter.vendorId);
+        }
+        // Apply model type filter
+        if (this.filter.modelTypeId) {
+            filtered = filtered.filter(model => model.AIModelTypeID === this.filter.modelTypeId);
+        }
+        // Apply rank filters
+        if (this.filter.powerRankMin !== null) {
+            filtered = filtered.filter(model => (model.PowerRank || 0) >= this.filter.powerRankMin);
+        }
+        if (this.filter.powerRankMax !== null) {
+            filtered = filtered.filter(model => (model.PowerRank || 0) <= this.filter.powerRankMax);
+        }
+        if (this.filter.speedRankMin !== null) {
+            filtered = filtered.filter(model => (model.SpeedRank || 0) >= this.filter.speedRankMin);
+        }
+        if (this.filter.speedRankMax !== null) {
+            filtered = filtered.filter(model => (model.SpeedRank || 0) <= this.filter.speedRankMax);
+        }
+        if (this.filter.costRankMin !== null) {
+            filtered = filtered.filter(model => (model.CostRank || 0) >= this.filter.costRankMin);
+        }
+        if (this.filter.costRankMax !== null) {
+            filtered = filtered.filter(model => (model.CostRank || 0) <= this.filter.costRankMax);
+        }
+        // Apply active filter
+        if (this.filter.isActive !== null) {
+            filtered = filtered.filter(model => model.IsActive === this.filter.isActive);
+        }
+        // Apply sorting
+        filtered.sort((a, b) => {
+            const aValue = a[this.selectedSort.field];
+            const bValue = b[this.selectedSort.field];
+            if (aValue == null && bValue == null)
+                return 0;
+            if (aValue == null)
+                return 1;
+            if (bValue == null)
+                return -1;
+            let comparison = 0;
+            if (typeof aValue === 'string' && typeof bValue === 'string') {
+                comparison = aValue.localeCompare(bValue);
+            }
+            else {
+                comparison = aValue < bValue ? -1 : aValue > bValue ? 1 : 0;
+            }
+            return this.selectedSort.direction === 'desc' ? -comparison : comparison;
+        });
+        // Transform to display data
+        this.filteredModels = filtered.map(model => this.transformToDisplayData(model));
+    }
+    transformToDisplayData(model) {
+        return {
+            model,
+            vendor: this.getVendor(model),
+            modelType: this.getModelType(model),
+            powerRankDisplay: this.formatRank(model.PowerRank),
+            speedRankDisplay: this.formatRank(model.SpeedRank),
+            costRankDisplay: this.formatRank(model.CostRank),
+            statusDisplay: model.IsActive ? 'Active' : 'Inactive'
+        };
+    }
+    getVendor(model) {
+        return this.vendors.find(v => v.ID === model.APIName) || null;
+    }
+    getVendorName(model) {
+        const vendor = this.getVendor(model);
+        return (vendor === null || vendor === void 0 ? void 0 : vendor.Name) || null;
+    }
+    getModelType(model) {
+        return this.modelTypes.find(mt => mt.ID === model.AIModelTypeID) || null;
+    }
+    formatRank(rank) {
+        if (rank == null)
+            return 'N/A';
+        return `${rank}/10`;
+    }
+    onOpenModel(model) {
+        this.openEntityRecord.emit({
+            entityName: 'AI Models',
+            recordId: model.ID
+        });
+    }
+    createNewModel() {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                const md = Metadata.Provider;
+                if (!md) {
+                    throw new Error('Metadata provider not available');
+                }
+                const newModel = yield md.GetEntityObject('AI Models', md.CurrentUser);
+                // Pre-populate some defaults
+                newModel.IsActive = true;
+                newModel.PowerRank = 5;
+                newModel.SpeedRank = 5;
+                newModel.CostRank = 5;
+                this.openEntityRecord.emit({
+                    entityName: 'AI Models',
+                    recordId: 'new'
+                });
+            }
+            catch (error) {
+                LogError('Error creating new AI model: ' + String(error));
+            }
+        });
+    }
+    toggleModelStatus(model) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                const md = Metadata.Provider;
+                if (!md) {
+                    throw new Error('Metadata provider not available');
+                }
+                const modelToUpdate = yield md.GetEntityObject('AI Models', md.CurrentUser);
+                yield modelToUpdate.Load(model.ID);
+                modelToUpdate.IsActive = !modelToUpdate.IsActive;
+                const result = yield modelToUpdate.Save();
+                if (result) {
+                    // Update local data
+                    const index = this.models.findIndex(m => m.ID === model.ID);
+                    if (index >= 0) {
+                        this.models[index] = Object.assign({}, this.models[index], { IsActive: modelToUpdate.IsActive });
+                        this.applyFilters();
+                    }
+                    LogStatus(`Model ${modelToUpdate.Name} ${modelToUpdate.IsActive ? 'activated' : 'deactivated'}`);
+                }
+            }
+            catch (error) {
+                LogError('Error updating model status: ' + String(error));
+            }
+        });
+    }
+}
+ModelManagementComponent.ɵfac = function ModelManagementComponent_Factory(t) { return new (t || ModelManagementComponent)(); };
+ModelManagementComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ModelManagementComponent, selectors: [["app-model-management"]], outputs: { openEntityRecord: "openEntityRecord" }, decls: 18, vars: 8, consts: [["mjFillContainer", "", 1, "model-management-container", 3, "rightMargin", "bottomMargin"], [1, "dashboard-header"], [1, "header-info"], [1, "model-count"], [1, "header-controls"], ["title", "Toggle Filters", 1, "control-btn", 3, "click"], [1, "fa-solid", "fa-filter"], ["title", "Add New Model", 1, "control-btn", 3, "click"], [1, "fa-solid", "fa-plus"], ["title", "Refresh", 1, "control-btn", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "loading-container"], [1, "error-container"], [1, "dashboard-content"], [1, "loading-content"], [1, "loading-spinner"], [1, "spinner-ring"], [1, "loading-text"], [1, "error-message"], ["orientation", "horizontal", "mjFillContainer", "", 1, "main-splitter"], [3, "size", "collapsible", "resizable", "scrollable", "hidden"], [1, "filter-panel"], [1, "filter-header"], [1, "close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "filter-content"], [1, "search-section"], ["type", "text", "placeholder", "Search models...", 1, "search-input", 3, "ngModelChange", "ngModel"], [1, "filter-group"], [3, "ngModelChange", "ngModel"], [3, "value"], [1, "filter-actions"], [1, "clear-btn", 3, "click"], [3, "resizable", "scrollable"], ["mjFillContainer", "", 1, "models-pane-container"], [1, "empty-state"], [1, "models-list"], [1, "fa-solid", "fa-microchip", "empty-icon"], [1, "control-btn", 3, "click"], [1, "model-item"], [1, "model-item", 3, "click"], [1, "model-header"], [1, "model-title"], [1, "model-vendor"], [1, "model-status"], [1, "model-details"], [1, "detail-item"], [1, "label"], [1, "value"], [1, "model-description"], [1, "model-actions"], [1, "action-btn", 3, "click", "title"], ["title", "Edit Model", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-edit"]], template: function ModelManagementComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "span", 3);
+        i0.ɵɵtext(4);
+        i0.ɵɵelementEnd()();
+        i0.ɵɵelementStart(5, "div", 4)(6, "button", 5);
+        i0.ɵɵlistener("click", function ModelManagementComponent_Template_button_click_6_listener() { return ctx.toggleFiltersVisible(); });
+        i0.ɵɵelement(7, "span", 6);
+        i0.ɵɵtext(8, " Filters ");
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(9, "button", 7);
+        i0.ɵɵlistener("click", function ModelManagementComponent_Template_button_click_9_listener() { return ctx.createNewModel(); });
+        i0.ɵɵelement(10, "span", 8);
+        i0.ɵɵtext(11, " Add Model ");
+        i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(12, "button", 9);
+        i0.ɵɵlistener("click", function ModelManagementComponent_Template_button_click_12_listener() { return ctx.loadData(); });
+        i0.ɵɵelement(13, "span", 10);
+        i0.ɵɵtext(14, " Refresh ");
+        i0.ɵɵelementEnd()()();
+        i0.ɵɵtemplate(15, ModelManagementComponent_Conditional_15_Template, 8, 1, "div", 11)(16, ModelManagementComponent_Conditional_16_Template, 3, 1, "div", 12)(17, ModelManagementComponent_Conditional_17_Template, 48, 17, "div", 13);
+        i0.ɵɵelementEnd();
+    } if (rf & 2) {
+        i0.ɵɵproperty("rightMargin", 8)("bottomMargin", 8);
+        i0.ɵɵadvance(4);
+        i0.ɵɵtextInterpolate1("", ctx.filteredModels.length, " AI models");
+        i0.ɵɵadvance(2);
+        i0.ɵɵclassProp("active", ctx.filtersVisible);
+        i0.ɵɵadvance(9);
+        i0.ɵɵconditional(ctx.isLoading ? 15 : -1);
+        i0.ɵɵadvance();
+        i0.ɵɵconditional(ctx.error ? 16 : -1);
+        i0.ɵɵadvance();
+        i0.ɵɵconditional(!ctx.isLoading && !ctx.error ? 17 : -1);
+    } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.SplitterComponent, i2.SplitterPaneComponent, i3.FillContainer], styles: [".model-management-container[_ngcontent-%COMP%] {\n  overflow: hidden;\n  padding: 4px;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.dashboard-header[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  \n  .header-info {\n    flex: 1;\n    display: flex;\n    align-items: center;\n  }\n  \n  .model-count {\n    font-size: 12px;\n    color: #2196f3;\n    font-weight: 600;\n    background: rgba(33, 150, 243, 0.1);\n    padding: 4px 8px;\n    border-radius: 4px;\n    border: 1px solid rgba(33, 150, 243, 0.2);\n  }\n  \n  .header-controls {\n    display: flex;\n    gap: 8px;\n    \n    .control-btn {\n      padding: 8px 12px;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n      background: white;\n      cursor: pointer;\n      font-size: 12px;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      transition: all 0.2s;\n      \n      &:hover {\n        background-color: #f0f0f0;\n        border-color: #2196f3;\n      }\n      \n      &.active {\n        background-color: #2196f3;\n        border-color: #2196f3;\n        color: white;\n      }\n      \n      &:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n        \n        &:hover {\n          background-color: white;\n          border-color: #ccc;\n        }\n      }\n      \n      .fa-solid {\n        font-size: 14px;\n      }\n    }\n  }\n}\n\n.loading-container[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  background: #fafafa;\n  flex: 1;\n  \n  p {\n    color: #666;\n    font-size: 14px;\n  }\n}\n\n.error-message[_ngcontent-%COMP%] {\n  color: #d32f2f;\n  font-weight: 500;\n}\n\n.dashboard-content[_ngcontent-%COMP%] {\n  overflow: hidden;\n  flex: 1;\n}\n\n.loading-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 16px;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n  position: relative;\n  width: 60px;\n  height: 60px;\n}\n\n.spinner-ring[_ngcontent-%COMP%] {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 3px solid transparent;\n  border-radius: 50%;\n  animation: _ngcontent-%COMP%_spin 1.5s linear infinite;\n  \n  &:nth-child(1) {\n    border-top-color: #2196f3;\n    animation-delay: 0s;\n  }\n  \n  &:nth-child(2) {\n    border-top-color: #9c27b0;\n    animation-delay: 0.3s;\n    transform: scale(0.8);\n  }\n  \n  &:nth-child(3) {\n    border-top-color: #ff6b35;\n    animation-delay: 0.6s;\n    transform: scale(0.6);\n  }\n}\n\n.loading-text[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #666;\n  font-weight: 500;\n  text-align: center;\n}\n\n//[_ngcontent-%COMP%]   Filter[_ngcontent-%COMP%]   Panel\n.filter-panel[_ngcontent-%COMP%] {\n  background: #fafafa;\n  border-right: 1px solid #e0e0e0;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n  \n  .filter-header {\n    padding: 16px;\n    border-bottom: 1px solid #e0e0e0;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    background: white;\n    \n    h3 {\n      margin: 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: #333;\n    }\n    \n    .close-btn {\n      padding: 4px;\n      border: none;\n      background: none;\n      cursor: pointer;\n      color: #666;\n      border-radius: 2px;\n      \n      &:hover {\n        background: #f0f0f0;\n        color: #333;\n      }\n    }\n  }\n  \n  .filter-content {\n    padding: 12px;\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n    \n    .search-section {\n      margin-bottom: 16px;\n    }\n    \n    .filter-group {\n      margin-bottom: 16px;\n    }\n    \n    label {\n      display: block;\n      font-size: 12px;\n      font-weight: 600;\n      color: #333;\n      margin-bottom: 4px;\n    }\n    \n    .search-input, select {\n      width: calc(100% - 4px);\n      max-width: 100%;\n      padding: 8px;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n      font-size: 12px;\n      box-sizing: border-box;\n      \n      &:focus {\n        outline: none;\n        border-color: #2196f3;\n      }\n    }\n    \n    .filter-actions {\n      margin-top: 20px;\n      \n      .clear-btn {\n        width: calc(100% - 4px);\n        max-width: 100%;\n        padding: 8px 12px;\n        border: 1px solid #ccc;\n        border-radius: 4px;\n        background: white;\n        cursor: pointer;\n        font-size: 12px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 6px;\n        transition: all 0.2s;\n        box-sizing: border-box;\n        \n        &:hover {\n          background-color: #f0f0f0;\n          border-color: #999;\n        }\n      }\n    }\n  }\n}\n\n//[_ngcontent-%COMP%]   Models[_ngcontent-%COMP%]   List\n.models-pane-container[_ngcontent-%COMP%] {\n  background: white;\n  position: relative;\n}\n\n.empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 40px;\n  text-align: center;\n  \n  .empty-icon {\n    font-size: 48px;\n    color: #ccc;\n    margin-bottom: 16px;\n  }\n  \n  h3 {\n    margin: 0 0 8px 0;\n    color: #666;\n    font-size: 18px;\n  }\n  \n  p {\n    margin: 0 0 20px 0;\n    color: #999;\n    font-size: 14px;\n  }\n}\n\n.models-list[_ngcontent-%COMP%] {\n  padding: 16px;\n  overflow-y: auto;\n  height: 100%;\n  \n  .model-item {\n    background: white;\n    border: 1px solid #e0e0e0;\n    border-radius: 4px;\n    padding: 16px;\n    margin-bottom: 12px;\n    cursor: pointer;\n    transition: all 0.2s;\n    position: relative;\n    \n    &:hover {\n      border-color: #2196f3;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n    }\n    \n    &:last-child {\n      margin-bottom: 0;\n    }\n    \n    .model-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: flex-start;\n      margin-bottom: 12px;\n      \n      .model-title {\n        flex: 1;\n        \n        h4 {\n          margin: 0 0 4px 0;\n          font-size: 16px;\n          font-weight: 600;\n          color: #333;\n        }\n        \n        .model-vendor {\n          font-size: 12px;\n          color: #2196f3;\n          font-weight: 500;\n        }\n      }\n      \n      .model-status {\n        padding: 4px 8px;\n        border-radius: 4px;\n        font-size: 11px;\n        font-weight: 600;\n        background: #ffc107;\n        color: #000;\n        text-transform: uppercase;\n        \n        &.active {\n          background: #4caf50;\n          color: white;\n        }\n      }\n    }\n    \n    .model-details {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 12px;\n      margin-bottom: 12px;\n      \n      .detail-item {\n        display: flex;\n        align-items: center;\n        gap: 4px;\n        \n        .label {\n          font-size: 12px;\n          color: #666;\n          font-weight: 500;\n        }\n        \n        .value {\n          font-size: 12px;\n          color: #333;\n          font-weight: 600;\n        }\n      }\n    }\n    \n    .model-description {\n      font-size: 12px;\n      color: #666;\n      line-height: 1.4;\n      margin-bottom: 12px;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n    }\n    \n    .model-actions {\n      display: flex;\n      gap: 8px;\n      justify-content: flex-end;\n      \n      .action-btn {\n        padding: 6px 8px;\n        border: 1px solid #e0e0e0;\n        border-radius: 3px;\n        background: white;\n        cursor: pointer;\n        font-size: 12px;\n        color: #666;\n        transition: all 0.2s;\n        \n        &:hover {\n          background: #f0f0f0;\n          border-color: #2196f3;\n          color: #2196f3;\n        }\n      }\n    }\n  }\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}"] });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ModelManagementComponent, [{
+        type: Component,
+        args: [{ selector: 'app-model-management', template: "<div class=\"model-management-container\" mjFillContainer [rightMargin]=\"8\" [bottomMargin]=\"8\">\n  <div class=\"dashboard-header\">\n    <div class=\"header-info\">\n      <span class=\"model-count\">{{ filteredModels.length }} AI models</span>\n    </div>\n    <div class=\"header-controls\">\n      <button \n        class=\"control-btn\" \n        (click)=\"toggleFiltersVisible()\" \n        [class.active]=\"filtersVisible\"\n        title=\"Toggle Filters\">\n        <span class=\"fa-solid fa-filter\"></span>\n        Filters\n      </button>\n      <button \n        class=\"control-btn\" \n        (click)=\"createNewModel()\"\n        title=\"Add New Model\">\n        <span class=\"fa-solid fa-plus\"></span>\n        Add Model\n      </button>\n      <button \n        class=\"control-btn\" \n        (click)=\"loadData()\"\n        title=\"Refresh\">\n        <span class=\"fa-solid fa-refresh\"></span>\n        Refresh\n      </button>\n    </div>\n  </div>\n  \n  @if (isLoading) {\n    <div class=\"loading-container\">\n      <div class=\"loading-content\">\n        <div class=\"loading-spinner\">\n          <div class=\"spinner-ring\"></div>\n          <div class=\"spinner-ring\"></div>\n          <div class=\"spinner-ring\"></div>\n        </div>\n        <div class=\"loading-text\">{{ loadingMessage }}</div>\n      </div>\n    </div>\n  }\n  \n  @if (error) {\n    <div class=\"error-container\">\n      <p class=\"error-message\">{{ error }}</p>\n    </div>\n  }\n  \n  @if (!isLoading && !error) {\n    <div class=\"dashboard-content\">\n      <kendo-splitter \n        class=\"main-splitter\"\n        orientation=\"horizontal\"\n        mjFillContainer>\n        \n        <!-- Filter Panel (Left) -->\n        <kendo-splitter-pane \n          [size]=\"filtersVisible ? '280px' : '0px'\"\n          [collapsible]=\"false\"\n          [resizable]=\"filtersVisible\"\n          [scrollable]=\"false\"\n          [hidden]=\"!filtersVisible\">\n          <div class=\"filter-panel\">\n            <div class=\"filter-header\">\n              <h3>Filters</h3>\n              <button class=\"close-btn\" (click)=\"toggleFiltersVisible()\">\n                <span class=\"fa-solid fa-times\"></span>\n              </button>\n            </div>\n            \n            <div class=\"filter-content\">\n              <div class=\"search-section\">\n                <label>Search</label>\n                <input \n                  type=\"text\" \n                  placeholder=\"Search models...\"\n                  [(ngModel)]=\"filter.searchTerm\"\n                  (ngModelChange)=\"onSearchChange($event)\"\n                  class=\"search-input\">\n              </div>\n              \n              <div class=\"filter-group\">\n                <label>Vendor</label>\n                <select [(ngModel)]=\"filter.vendorId\" (ngModelChange)=\"onFilterChange()\">\n                  <option [value]=\"null\">All Vendors</option>\n                  @for (vendor of vendors; track vendor.ID) {\n                    <option [value]=\"vendor.ID\">{{ vendor.Name }}</option>\n                  }\n                </select>\n              </div>\n              \n              <div class=\"filter-group\">\n                <label>Type</label>\n                <select [(ngModel)]=\"filter.modelTypeId\" (ngModelChange)=\"onFilterChange()\">\n                  <option [value]=\"null\">All Types</option>\n                  @for (type of modelTypes; track type.ID) {\n                    <option [value]=\"type.ID\">{{ type.Name }}</option>\n                  }\n                </select>\n              </div>\n              \n              <div class=\"filter-group\">\n                <label>Status</label>\n                <select [(ngModel)]=\"filter.isActive\" (ngModelChange)=\"onFilterChange()\">\n                  <option [value]=\"null\">All</option>\n                  <option [value]=\"true\">Active</option>\n                  <option [value]=\"false\">Inactive</option>\n                </select>\n              </div>\n              \n              <div class=\"filter-actions\">\n                <button class=\"clear-btn\" (click)=\"clearFilters()\">\n                  <span class=\"fa-solid fa-times\"></span>\n                  Clear All\n                </button>\n              </div>\n            </div>\n          </div>\n        </kendo-splitter-pane>\n        \n        <!-- Models List (Right) -->\n        <kendo-splitter-pane \n          [resizable]=\"true\"\n          [scrollable]=\"false\">\n          <div class=\"models-pane-container\" mjFillContainer>\n            @if (filteredModels.length === 0) {\n              <div class=\"empty-state\">\n                <span class=\"fa-solid fa-microchip empty-icon\"></span>\n                <h3>No Models Found</h3>\n                @if (models.length === 0) {\n                  <p>No AI models have been configured yet.</p>\n                  <button class=\"control-btn\" (click)=\"createNewModel()\">\n                    <span class=\"fa-solid fa-plus\"></span>\n                    Add First Model\n                  </button>\n                } @else {\n                  <p>No models match your current filters.</p>\n                  <button class=\"control-btn\" (click)=\"clearFilters()\">Clear Filters</button>\n                }\n              </div>\n            } @else {\n              <div class=\"models-list\">\n                @for (displayData of filteredModels; track displayData.model.ID) {\n                  <div class=\"model-item\" (click)=\"onOpenModel(displayData.model)\">\n                    <div class=\"model-header\">\n                      <div class=\"model-title\">\n                        <h4>{{ displayData.model.Name }}</h4>\n                        <span class=\"model-vendor\">{{ displayData.vendor?.Name || 'Unknown Vendor' }}</span>\n                      </div>\n                      <div class=\"model-status\" [class.active]=\"displayData.model.IsActive\">\n                        {{ displayData.statusDisplay }}\n                      </div>\n                    </div>\n                    \n                    <div class=\"model-details\">\n                      <div class=\"detail-item\">\n                        <span class=\"label\">Type:</span>\n                        <span class=\"value\">{{ displayData.modelType?.Name || 'Unknown' }}</span>\n                      </div>\n                      <div class=\"detail-item\">\n                        <span class=\"label\">Power:</span>\n                        <span class=\"value\">{{ displayData.powerRankDisplay }}</span>\n                      </div>\n                      <div class=\"detail-item\">\n                        <span class=\"label\">Speed:</span>\n                        <span class=\"value\">{{ displayData.speedRankDisplay }}</span>\n                      </div>\n                      <div class=\"detail-item\">\n                        <span class=\"label\">Cost:</span>\n                        <span class=\"value\">{{ displayData.costRankDisplay }}</span>\n                      </div>\n                    </div>\n                    \n                    @if (displayData.model.Description) {\n                      <div class=\"model-description\">\n                        {{ displayData.model.Description }}\n                      </div>\n                    }\n                    \n                    <div class=\"model-actions\">\n                      <button \n                        class=\"action-btn\"\n                        (click)=\"$event.stopPropagation(); toggleModelStatus(displayData.model)\"\n                        [title]=\"displayData.model.IsActive ? 'Deactivate' : 'Activate'\">\n                        <span [class]=\"displayData.model.IsActive ? 'fa-solid fa-pause' : 'fa-solid fa-play'\"></span>\n                      </button>\n                      <button \n                        class=\"action-btn\"\n                        (click)=\"$event.stopPropagation(); onOpenModel(displayData.model)\"\n                        title=\"Edit Model\">\n                        <span class=\"fa-solid fa-edit\"></span>\n                      </button>\n                    </div>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        </kendo-splitter-pane>\n      </kendo-splitter>\n    </div>\n  }\n</div>", styles: [".model-management-container {\n  overflow: hidden;\n  padding: 4px;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.dashboard-header {\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  \n  .header-info {\n    flex: 1;\n    display: flex;\n    align-items: center;\n  }\n  \n  .model-count {\n    font-size: 12px;\n    color: #2196f3;\n    font-weight: 600;\n    background: rgba(33, 150, 243, 0.1);\n    padding: 4px 8px;\n    border-radius: 4px;\n    border: 1px solid rgba(33, 150, 243, 0.2);\n  }\n  \n  .header-controls {\n    display: flex;\n    gap: 8px;\n    \n    .control-btn {\n      padding: 8px 12px;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n      background: white;\n      cursor: pointer;\n      font-size: 12px;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      transition: all 0.2s;\n      \n      &:hover {\n        background-color: #f0f0f0;\n        border-color: #2196f3;\n      }\n      \n      &.active {\n        background-color: #2196f3;\n        border-color: #2196f3;\n        color: white;\n      }\n      \n      &:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n        \n        &:hover {\n          background-color: white;\n          border-color: #ccc;\n        }\n      }\n      \n      .fa-solid {\n        font-size: 14px;\n      }\n    }\n  }\n}\n\n.loading-container, .error-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  background: #fafafa;\n  flex: 1;\n  \n  p {\n    color: #666;\n    font-size: 14px;\n  }\n}\n\n.error-message {\n  color: #d32f2f;\n  font-weight: 500;\n}\n\n.dashboard-content {\n  overflow: hidden;\n  flex: 1;\n}\n\n.loading-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 16px;\n}\n\n.loading-spinner {\n  position: relative;\n  width: 60px;\n  height: 60px;\n}\n\n.spinner-ring {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 3px solid transparent;\n  border-radius: 50%;\n  animation: spin 1.5s linear infinite;\n  \n  &:nth-child(1) {\n    border-top-color: #2196f3;\n    animation-delay: 0s;\n  }\n  \n  &:nth-child(2) {\n    border-top-color: #9c27b0;\n    animation-delay: 0.3s;\n    transform: scale(0.8);\n  }\n  \n  &:nth-child(3) {\n    border-top-color: #ff6b35;\n    animation-delay: 0.6s;\n    transform: scale(0.6);\n  }\n}\n\n.loading-text {\n  font-size: 14px;\n  color: #666;\n  font-weight: 500;\n  text-align: center;\n}\n\n// Filter Panel\n.filter-panel {\n  background: #fafafa;\n  border-right: 1px solid #e0e0e0;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n  \n  .filter-header {\n    padding: 16px;\n    border-bottom: 1px solid #e0e0e0;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    background: white;\n    \n    h3 {\n      margin: 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: #333;\n    }\n    \n    .close-btn {\n      padding: 4px;\n      border: none;\n      background: none;\n      cursor: pointer;\n      color: #666;\n      border-radius: 2px;\n      \n      &:hover {\n        background: #f0f0f0;\n        color: #333;\n      }\n    }\n  }\n  \n  .filter-content {\n    padding: 12px;\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n    \n    .search-section {\n      margin-bottom: 16px;\n    }\n    \n    .filter-group {\n      margin-bottom: 16px;\n    }\n    \n    label {\n      display: block;\n      font-size: 12px;\n      font-weight: 600;\n      color: #333;\n      margin-bottom: 4px;\n    }\n    \n    .search-input, select {\n      width: calc(100% - 4px);\n      max-width: 100%;\n      padding: 8px;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n      font-size: 12px;\n      box-sizing: border-box;\n      \n      &:focus {\n        outline: none;\n        border-color: #2196f3;\n      }\n    }\n    \n    .filter-actions {\n      margin-top: 20px;\n      \n      .clear-btn {\n        width: calc(100% - 4px);\n        max-width: 100%;\n        padding: 8px 12px;\n        border: 1px solid #ccc;\n        border-radius: 4px;\n        background: white;\n        cursor: pointer;\n        font-size: 12px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 6px;\n        transition: all 0.2s;\n        box-sizing: border-box;\n        \n        &:hover {\n          background-color: #f0f0f0;\n          border-color: #999;\n        }\n      }\n    }\n  }\n}\n\n// Models List\n.models-pane-container {\n  background: white;\n  position: relative;\n}\n\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 40px;\n  text-align: center;\n  \n  .empty-icon {\n    font-size: 48px;\n    color: #ccc;\n    margin-bottom: 16px;\n  }\n  \n  h3 {\n    margin: 0 0 8px 0;\n    color: #666;\n    font-size: 18px;\n  }\n  \n  p {\n    margin: 0 0 20px 0;\n    color: #999;\n    font-size: 14px;\n  }\n}\n\n.models-list {\n  padding: 16px;\n  overflow-y: auto;\n  height: 100%;\n  \n  .model-item {\n    background: white;\n    border: 1px solid #e0e0e0;\n    border-radius: 4px;\n    padding: 16px;\n    margin-bottom: 12px;\n    cursor: pointer;\n    transition: all 0.2s;\n    position: relative;\n    \n    &:hover {\n      border-color: #2196f3;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n    }\n    \n    &:last-child {\n      margin-bottom: 0;\n    }\n    \n    .model-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: flex-start;\n      margin-bottom: 12px;\n      \n      .model-title {\n        flex: 1;\n        \n        h4 {\n          margin: 0 0 4px 0;\n          font-size: 16px;\n          font-weight: 600;\n          color: #333;\n        }\n        \n        .model-vendor {\n          font-size: 12px;\n          color: #2196f3;\n          font-weight: 500;\n        }\n      }\n      \n      .model-status {\n        padding: 4px 8px;\n        border-radius: 4px;\n        font-size: 11px;\n        font-weight: 600;\n        background: #ffc107;\n        color: #000;\n        text-transform: uppercase;\n        \n        &.active {\n          background: #4caf50;\n          color: white;\n        }\n      }\n    }\n    \n    .model-details {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 12px;\n      margin-bottom: 12px;\n      \n      .detail-item {\n        display: flex;\n        align-items: center;\n        gap: 4px;\n        \n        .label {\n          font-size: 12px;\n          color: #666;\n          font-weight: 500;\n        }\n        \n        .value {\n          font-size: 12px;\n          color: #333;\n          font-weight: 600;\n        }\n      }\n    }\n    \n    .model-description {\n      font-size: 12px;\n      color: #666;\n      line-height: 1.4;\n      margin-bottom: 12px;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n    }\n    \n    .model-actions {\n      display: flex;\n      gap: 8px;\n      justify-content: flex-end;\n      \n      .action-btn {\n        padding: 6px 8px;\n        border: 1px solid #e0e0e0;\n        border-radius: 3px;\n        background: white;\n        cursor: pointer;\n        font-size: 12px;\n        color: #666;\n        transition: all 0.2s;\n        \n        &:hover {\n          background: #f0f0f0;\n          border-color: #2196f3;\n          color: #2196f3;\n        }\n      }\n    }\n  }\n}\n\n@keyframes spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}"] }]
+    }], null, { openEntityRecord: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ModelManagementComponent, { className: "ModelManagementComponent", filePath: "src/AI/components/models/model-management.component.ts", lineNumber: 41 }); })();
+//# sourceMappingURL=model-management.component.js.map