@memberjunction/ng-dashboards 2.48.0 → 2.50.0

package/dist/Actions/components/actions-overview.component.js

@@ -1,12 +1,3 @@
-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, LogError } from '@memberjunction/core';
 import { Subject, BehaviorSubject, combineLatest } from 'rxjs';
@@ -181,33 +172,32 @@ function ActionsOverviewComponent_Conditional_86_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵproperty("themeColor", "primary");
 } }
 export class ActionsOverviewComponent {
-    constructor() {
-        this.openEntityRecord = new EventEmitter();
-        this.showActionsListView = new EventEmitter();
-        this.showExecutionsListView = new EventEmitter();
-        this.showCategoriesListView = new EventEmitter();
-        this.isLoading = true;
-        this.metrics = {
-            totalActions: 0,
-            activeActions: 0,
-            pendingActions: 0,
-            disabledActions: 0,
-            totalExecutions: 0,
-            recentExecutions: 0,
-            successRate: 0,
-            totalCategories: 0,
-            aiGeneratedActions: 0,
-            customActions: 0
-        };
-        this.categoryStats = [];
-        this.recentActions = [];
-        this.recentExecutions = [];
-        this.topCategories = [];
-        this.searchTerm$ = new BehaviorSubject('');
-        this.selectedStatus$ = new BehaviorSubject('all');
-        this.selectedType$ = new BehaviorSubject('all');
-        this.destroy$ = new Subject();
-    }
+    openEntityRecord = new EventEmitter();
+    showActionsListView = new EventEmitter();
+    showExecutionsListView = new EventEmitter();
+    showCategoriesListView = new EventEmitter();
+    isLoading = true;
+    metrics = {
+        totalActions: 0,
+        activeActions: 0,
+        pendingActions: 0,
+        disabledActions: 0,
+        totalExecutions: 0,
+        recentExecutions: 0,
+        successRate: 0,
+        totalCategories: 0,
+        aiGeneratedActions: 0,
+        customActions: 0
+    };
+    categoryStats = [];
+    recentActions = [];
+    recentExecutions = [];
+    topCategories = [];
+    searchTerm$ = new BehaviorSubject('');
+    selectedStatus$ = new BehaviorSubject('all');
+    selectedType$ = new BehaviorSubject('all');
+    destroy$ = new Subject();
+    constructor() { }
     ngOnInit() {
         this.setupFilters();
         this.loadData();
@@ -225,105 +215,95 @@ export class ActionsOverviewComponent {
             this.loadFilteredData();
         });
     }
-    loadData() {
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                this.isLoading = true;
-                // Load all data in parallel
-                const [actions, categories, executions] = yield Promise.all([
-                    this.loadActions(),
-                    this.loadCategories(),
-                    this.loadExecutions()
-                ]);
-                this.calculateMetrics(actions, categories, executions);
-                this.calculateCategoryStats(actions, categories, executions);
-                this.recentActions = actions.slice(0, 10);
-                this.recentExecutions = executions.slice(0, 10);
-                this.topCategories = categories.slice(0, 5);
-            }
-            catch (error) {
-                LogError('Failed to load actions overview data', undefined, error);
-            }
-            finally {
-                this.isLoading = false;
-            }
-        });
+    async loadData() {
+        try {
+            this.isLoading = true;
+            // Load all data in parallel
+            const [actions, categories, executions] = await Promise.all([
+                this.loadActions(),
+                this.loadCategories(),
+                this.loadExecutions()
+            ]);
+            this.calculateMetrics(actions, categories, executions);
+            this.calculateCategoryStats(actions, categories, executions);
+            this.recentActions = actions.slice(0, 10);
+            this.recentExecutions = executions.slice(0, 10);
+            this.topCategories = categories.slice(0, 5);
+        }
+        catch (error) {
+            LogError('Failed to load actions overview data', undefined, error);
+        }
+        finally {
+            this.isLoading = false;
+        }
     }
-    loadActions() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const rv = new RunView();
-            const result = yield rv.RunView({
-                EntityName: 'Actions',
-                ExtraFilter: '',
-                OrderBy: 'UpdatedAt DESC',
-                UserSearchString: '',
-                IgnoreMaxRows: false,
-                MaxRows: 1000
-            });
-            if (result && result.Success && result.Results) {
-                return result.Results;
-            }
-            else {
-                throw new Error('Failed to load actions');
-            }
+    async loadActions() {
+        const rv = new RunView();
+        const result = await rv.RunView({
+            EntityName: 'Actions',
+            ExtraFilter: '',
+            OrderBy: 'UpdatedAt DESC',
+            UserSearchString: '',
+            IgnoreMaxRows: false,
+            MaxRows: 1000
         });
+        if (result && result.Success && result.Results) {
+            return result.Results;
+        }
+        else {
+            throw new Error('Failed to load actions');
+        }
     }
-    loadCategories() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const rv = new RunView();
-            const result = yield rv.RunView({
-                EntityName: 'Action Categories',
-                ExtraFilter: '',
-                OrderBy: 'Name',
-                UserSearchString: '',
-                IgnoreMaxRows: false,
-                MaxRows: 1000
-            });
-            if (result && result.Success && result.Results) {
-                return result.Results;
-            }
-            else {
-                throw new Error('Failed to load action categories');
-            }
+    async loadCategories() {
+        const rv = new RunView();
+        const result = await rv.RunView({
+            EntityName: 'Action Categories',
+            ExtraFilter: '',
+            OrderBy: 'Name',
+            UserSearchString: '',
+            IgnoreMaxRows: false,
+            MaxRows: 1000
         });
+        if (result && result.Success && result.Results) {
+            return result.Results;
+        }
+        else {
+            throw new Error('Failed to load action categories');
+        }
     }
-    loadExecutions() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const rv = new RunView();
-            const result = yield rv.RunView({
-                EntityName: 'Action Execution Logs',
-                ExtraFilter: '',
-                OrderBy: 'StartedAt DESC',
-                UserSearchString: '',
-                IgnoreMaxRows: false,
-                MaxRows: 1000
-            });
-            if (result && result.Success && result.Results) {
-                return result.Results;
-            }
-            else {
-                throw new Error('Failed to load action execution logs');
-            }
+    async loadExecutions() {
+        const rv = new RunView();
+        const result = await rv.RunView({
+            EntityName: 'Action Execution Logs',
+            ExtraFilter: '',
+            OrderBy: 'StartedAt DESC',
+            UserSearchString: '',
+            IgnoreMaxRows: false,
+            MaxRows: 1000
         });
+        if (result && result.Success && result.Results) {
+            return result.Results;
+        }
+        else {
+            throw new Error('Failed to load action execution logs');
+        }
     }
-    loadEntityActions() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const rv = new RunView();
-            const result = yield rv.RunView({
-                EntityName: 'Entity Actions',
-                ExtraFilter: '',
-                OrderBy: 'UpdatedAt DESC',
-                UserSearchString: '',
-                IgnoreMaxRows: false,
-                MaxRows: 1000
-            });
-            if (result && result.Success && result.Results) {
-                return result.Results;
-            }
-            else {
-                throw new Error('Failed to load entity actions');
-            }
+    async loadEntityActions() {
+        const rv = new RunView();
+        const result = await rv.RunView({
+            EntityName: 'Entity Actions',
+            ExtraFilter: '',
+            OrderBy: 'UpdatedAt DESC',
+            UserSearchString: '',
+            IgnoreMaxRows: false,
+            MaxRows: 1000
         });
+        if (result && result.Success && result.Results) {
+            return result.Results;
+        }
+        else {
+            throw new Error('Failed to load entity actions');
+        }
     }
     calculateMetrics(actions, categories, executions) {
         this.metrics = {
@@ -362,39 +342,37 @@ export class ActionsOverviewComponent {
             };
         });
     }
-    loadFilteredData() {
-        return __awaiter(this, void 0, void 0, function* () {
-            // Implement filtered data loading based on current filter values
-            const searchTerm = this.searchTerm$.value;
-            const status = this.selectedStatus$.value;
-            const type = this.selectedType$.value;
-            let extraFilter = '';
-            const filters = [];
-            if (status !== 'all') {
-                filters.push(`Status = '${status}'`);
-            }
-            if (type !== 'all') {
-                filters.push(`Type = '${type}'`);
-            }
-            if (filters.length > 0) {
-                extraFilter = filters.join(' AND ');
-            }
-            try {
-                const rv = new RunView();
-                const result = yield rv.RunView({
-                    EntityName: 'Actions',
-                    ExtraFilter: extraFilter,
-                    OrderBy: 'UpdatedAt DESC',
-                    UserSearchString: searchTerm,
-                    IgnoreMaxRows: false,
-                    MaxRows: 1000
-                });
-                this.recentActions = result.Results.slice(0, 10);
-            }
-            catch (error) {
-                LogError('Failed to load filtered actions', undefined, error);
-            }
-        });
+    async loadFilteredData() {
+        // Implement filtered data loading based on current filter values
+        const searchTerm = this.searchTerm$.value;
+        const status = this.selectedStatus$.value;
+        const type = this.selectedType$.value;
+        let extraFilter = '';
+        const filters = [];
+        if (status !== 'all') {
+            filters.push(`Status = '${status}'`);
+        }
+        if (type !== 'all') {
+            filters.push(`Type = '${type}'`);
+        }
+        if (filters.length > 0) {
+            extraFilter = filters.join(' AND ');
+        }
+        try {
+            const rv = new RunView();
+            const result = await rv.RunView({
+                EntityName: 'Actions',
+                ExtraFilter: extraFilter,
+                OrderBy: 'UpdatedAt DESC',
+                UserSearchString: searchTerm,
+                IgnoreMaxRows: false,
+                MaxRows: 1000
+            });
+            this.recentActions = result.Results.slice(0, 10);
+        }
+        catch (error) {
+            LogError('Failed to load filtered actions', undefined, error);
+        }
     }
     onSearchChange(searchTerm) {
         this.searchTerm$.next(searchTerm);
@@ -452,143 +430,143 @@ export class ActionsOverviewComponent {
         // Filter to show AI generated actions in the current view
         this.selectedType$.next('Generated');
     }
+    static ɵfac = function ActionsOverviewComponent_Factory(t) { return new (t || ActionsOverviewComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ActionsOverviewComponent, selectors: [["mj-actions-overview"]], outputs: { openEntityRecord: "openEntityRecord", showActionsListView: "showActionsListView", showExecutionsListView: "showExecutionsListView", showCategoriesListView: "showCategoriesListView" }, decls: 87, vars: 35, consts: [["mjFillContainer", "", 1, "actions-overview"], [1, "overview-header"], [1, "filters-row"], [1, "search-container"], ["placeholder", "Search actions...", 3, "valueChange", "value"], ["kendoTextBoxPrefixTemplate", ""], [1, "filter-container"], ["textField", "text", "valueField", "value", 3, "valueChange", "data", "value"], [1, "metrics-grid"], [1, "metric-card", "primary", "clickable", 3, "click"], [1, "metric-icon"], [1, "fa-solid", "fa-cogs"], [1, "metric-content"], [1, "metric-value"], [1, "metric-label"], [1, "metric-breakdown"], [1, "active"], [1, "pending"], [1, "disabled"], [1, "metric-card", "success", "clickable", 3, "click"], [1, "fa-solid", "fa-play-circle"], [1, "recent"], [1, "success-rate"], [1, "metric-card", "info", "clickable", 3, "click"], [1, "fa-solid", "fa-sitemap"], [1, "metric-card", "warning", "clickable", 3, "click"], [1, "fa-solid", "fa-robot"], [1, "custom"], [1, "content-grid"], [1, "panel", "category-stats"], [1, "panel-header"], [1, "fa-solid", "fa-chart-bar"], [1, "panel-content"], [1, "category-list"], [1, "empty-state"], [1, "panel", "recent-actions"], [1, "fa-solid", "fa-clock"], [1, "actions-list"], [1, "panel", "recent-executions"], [1, "fa-solid", "fa-history"], [1, "executions-list"], [1, "loading-overlay"], [1, "fa-solid", "fa-search"], [1, "category-item"], [1, "category-item", 3, "click"], [1, "category-info"], [1, "category-name"], [1, "category-metrics"], [1, "metric"], [1, "metric", "success-rate"], [1, "category-chart"], [1, "progress-bar"], [1, "progress-fill"], [1, "action-item"], [1, "action-item", 3, "click"], [1, "action-icon"], [1, "action-info"], [1, "action-name"], [1, "action-description"], [1, "action-status"], [3, "themeColor", "size"], [1, "execution-item"], [1, "execution-item", 3, "click"], [1, "execution-time"], [1, "execution-info"], [1, "execution-action"], [1, "execution-user"], [1, "execution-result"], ["type", "converging-spinner", 3, "themeColor"]], template: function ActionsOverviewComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "kendo-textbox", 4);
+            i0.ɵɵlistener("valueChange", function ActionsOverviewComponent_Template_kendo_textbox_valueChange_4_listener($event) { return ctx.onSearchChange($event); });
+            i0.ɵɵtemplate(5, ActionsOverviewComponent_ng_template_5_Template, 1, 0, "ng-template", 5);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(6, "div", 6)(7, "kendo-dropdownlist", 7);
+            i0.ɵɵlistener("valueChange", function ActionsOverviewComponent_Template_kendo_dropdownlist_valueChange_7_listener($event) { return ctx.onStatusFilterChange($event); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(8, "div", 6)(9, "kendo-dropdownlist", 7);
+            i0.ɵɵlistener("valueChange", function ActionsOverviewComponent_Template_kendo_dropdownlist_valueChange_9_listener($event) { return ctx.onTypeFilterChange($event); });
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(10, "div", 8)(11, "div", 9);
+            i0.ɵɵlistener("click", function ActionsOverviewComponent_Template_div_click_11_listener() { return ctx.onTotalActionsClick(); });
+            i0.ɵɵelementStart(12, "div", 10);
+            i0.ɵɵelement(13, "i", 11);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(14, "div", 12)(15, "div", 13);
+            i0.ɵɵtext(16);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(17, "div", 14);
+            i0.ɵɵtext(18, "Total Actions");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(19, "div", 15)(20, "span", 16);
+            i0.ɵɵtext(21);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(22, "span", 17);
+            i0.ɵɵtext(23);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(24, "span", 18);
+            i0.ɵɵtext(25);
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(26, "div", 19);
+            i0.ɵɵlistener("click", function ActionsOverviewComponent_Template_div_click_26_listener() { return ctx.onExecutionsClick(); });
+            i0.ɵɵelementStart(27, "div", 10);
+            i0.ɵɵelement(28, "i", 20);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(29, "div", 12)(30, "div", 13);
+            i0.ɵɵtext(31);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(32, "div", 14);
+            i0.ɵɵtext(33, "Total Executions");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(34, "div", 15)(35, "span", 21);
+            i0.ɵɵtext(36);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(37, "span", 22);
+            i0.ɵɵtext(38);
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(39, "div", 23);
+            i0.ɵɵlistener("click", function ActionsOverviewComponent_Template_div_click_39_listener() { return ctx.onCategoriesClick(); });
+            i0.ɵɵelementStart(40, "div", 10);
+            i0.ɵɵelement(41, "i", 24);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(42, "div", 12)(43, "div", 13);
+            i0.ɵɵtext(44);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(45, "div", 14);
+            i0.ɵɵtext(46, "Categories");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(47, "div", 15)(48, "span");
+            i0.ɵɵtext(49, "Organized structure");
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(50, "div", 25);
+            i0.ɵɵlistener("click", function ActionsOverviewComponent_Template_div_click_50_listener() { return ctx.onAIGeneratedClick(); });
+            i0.ɵɵelementStart(51, "div", 10);
+            i0.ɵɵelement(52, "i", 26);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(53, "div", 12)(54, "div", 13);
+            i0.ɵɵtext(55);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(56, "div", 14);
+            i0.ɵɵtext(57, "AI Generated");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(58, "div", 15)(59, "span", 27);
+            i0.ɵɵtext(60);
+            i0.ɵɵelementEnd()()()()();
+            i0.ɵɵelementStart(61, "div", 28)(62, "div", 29)(63, "div", 30)(64, "h3");
+            i0.ɵɵelement(65, "i", 31);
+            i0.ɵɵtext(66, " Category Performance");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(67, "div", 32);
+            i0.ɵɵtemplate(68, ActionsOverviewComponent_Conditional_68_Template, 3, 0, "div", 33)(69, ActionsOverviewComponent_Conditional_69_Template, 4, 0, "div", 34);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(70, "div", 35)(71, "div", 30)(72, "h3");
+            i0.ɵɵelement(73, "i", 36);
+            i0.ɵɵtext(74, " Recent Actions");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(75, "div", 32);
+            i0.ɵɵtemplate(76, ActionsOverviewComponent_Conditional_76_Template, 3, 0, "div", 37)(77, ActionsOverviewComponent_Conditional_77_Template, 4, 0, "div", 34);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(78, "div", 38)(79, "div", 30)(80, "h3");
+            i0.ɵɵelement(81, "i", 39);
+            i0.ɵɵtext(82, " Recent Executions");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(83, "div", 32);
+            i0.ɵɵtemplate(84, ActionsOverviewComponent_Conditional_84_Template, 3, 0, "div", 40)(85, ActionsOverviewComponent_Conditional_85_Template, 4, 0, "div", 34);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵtemplate(86, ActionsOverviewComponent_Conditional_86_Template, 2, 1, "div", 41);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("value", ctx.searchTerm$.value);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("data", i0.ɵɵpureFunction4(23, _c4, i0.ɵɵpureFunction0(19, _c0), i0.ɵɵpureFunction0(20, _c1), i0.ɵɵpureFunction0(21, _c2), i0.ɵɵpureFunction0(22, _c3)))("value", ctx.selectedStatus$.value);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("data", i0.ɵɵpureFunction3(31, _c8, i0.ɵɵpureFunction0(28, _c5), i0.ɵɵpureFunction0(29, _c6), i0.ɵɵpureFunction0(30, _c7)))("value", ctx.selectedType$.value);
+            i0.ɵɵadvance(7);
+            i0.ɵɵtextInterpolate(ctx.metrics.totalActions);
+            i0.ɵɵadvance(5);
+            i0.ɵɵtextInterpolate1("", ctx.metrics.activeActions, " Active");
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1("", ctx.metrics.pendingActions, " Pending");
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1("", ctx.metrics.disabledActions, " Disabled");
+            i0.ɵɵadvance(6);
+            i0.ɵɵtextInterpolate(ctx.metrics.totalExecutions);
+            i0.ɵɵadvance(5);
+            i0.ɵɵtextInterpolate1("", ctx.metrics.recentExecutions, " in last 24h");
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1("", ctx.metrics.successRate, "% success rate");
+            i0.ɵɵadvance(6);
+            i0.ɵɵtextInterpolate(ctx.metrics.totalCategories);
+            i0.ɵɵadvance(11);
+            i0.ɵɵtextInterpolate(ctx.metrics.aiGeneratedActions);
+            i0.ɵɵadvance(5);
+            i0.ɵɵtextInterpolate1("", ctx.metrics.customActions, " Custom");
+            i0.ɵɵadvance(8);
+            i0.ɵɵconditional(ctx.categoryStats.length > 0 ? 68 : 69);
+            i0.ɵɵadvance(8);
+            i0.ɵɵconditional(ctx.recentActions.length > 0 ? 76 : 77);
+            i0.ɵɵadvance(8);
+            i0.ɵɵconditional(ctx.recentExecutions.length > 0 ? 84 : 85);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.isLoading ? 86 : -1);
+        } }, dependencies: [i1.LoaderComponent, i2.DropDownListComponent, i3.TextBoxComponent, i3.TextBoxPrefixTemplateDirective, i4.FillContainer, i5.ChipComponent, i6.DatePipe], styles: [".actions-overview[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n  padding: 1.5rem;\n  height: 100%;\n  overflow-y: auto;\n\n  .overview-header {\n    .filters-row {\n      display: flex;\n      align-items: center;\n      gap: 1rem;\n      flex-wrap: wrap;\n\n      .search-container {\n        flex: 1;\n        min-width: 200px;\n\n        kendo-textbox {\n          width: 100%;\n        }\n      }\n\n      .filter-container {\n        min-width: 150px;\n        \n        kendo-dropdownlist {\n          width: 100%;\n        }\n      }\n    }\n  }\n\n  .metrics-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n    gap: 1.5rem;\n\n    .metric-card {\n      display: flex;\n      align-items: center;\n      gap: 1rem;\n      padding: 1.5rem;\n      border-radius: 0.75rem;\n      background: var(--kendo-color-surface);\n      border: 1px solid var(--kendo-color-border);\n      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n      transition: all 0.2s ease;\n\n      &.clickable {\n        cursor: pointer;\n        \n        &:hover {\n          transform: translateY(-2px);\n          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n        }\n      }\n\n      .metric-icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 3rem;\n        height: 3rem;\n        border-radius: 0.5rem;\n        font-size: 1.25rem;\n\n        i {\n          color: white;\n        }\n      }\n\n      .metric-content {\n        flex: 1;\n\n        .metric-value {\n          font-size: 1.75rem;\n          font-weight: 700;\n          line-height: 1;\n          margin-bottom: 0.25rem;\n        }\n\n        .metric-label {\n          font-size: 0.875rem;\n          font-weight: 600;\n          color: var(--kendo-color-subtle);\n          margin-bottom: 0.5rem;\n        }\n\n        .metric-breakdown {\n          display: flex;\n          flex-direction: column;\n          gap: 0.125rem;\n          font-size: 0.75rem;\n\n          span {\n            color: var(--kendo-color-subtle);\n\n            &.active { color: var(--kendo-color-success); }\n            &.pending { color: var(--kendo-color-warning); }\n            &.disabled { color: var(--kendo-color-error); }\n            &.recent { color: var(--kendo-color-info); }\n            &.success-rate { color: var(--kendo-color-success); }\n            &.custom { color: var(--kendo-color-primary); }\n          }\n        }\n      }\n\n      &.primary .metric-icon { background: var(--kendo-color-primary); }\n      &.success .metric-icon { background: var(--kendo-color-success); }\n      &.info .metric-icon { background: var(--kendo-color-info); }\n      &.warning .metric-icon { background: var(--kendo-color-warning); }\n    }\n  }\n\n  .content-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    grid-template-rows: auto auto;\n    gap: 1.5rem;\n    flex: 1;\n\n    .panel {\n      background: var(--kendo-color-surface);\n      border: 1px solid var(--kendo-color-border);\n      border-radius: 0.75rem;\n      overflow: hidden;\n      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n\n      .panel-header {\n        padding: 1rem 1.5rem;\n        background: var(--kendo-color-app-surface);\n        border-bottom: 1px solid var(--kendo-color-border);\n\n        h3 {\n          margin: 0;\n          font-size: 1rem;\n          font-weight: 600;\n          display: flex;\n          align-items: center;\n          gap: 0.5rem;\n\n          i {\n            color: var(--kendo-color-primary);\n          }\n        }\n      }\n\n      .panel-content {\n        padding: 1.5rem;\n        height: calc(100% - 60px);\n        overflow-y: auto;\n      }\n    }\n\n    .category-stats {\n      .category-list {\n        display: flex;\n        flex-direction: column;\n        gap: 0.75rem;\n\n        .category-item {\n          display: flex;\n          align-items: center;\n          gap: 1rem;\n          padding: 1rem;\n          border: 1px solid var(--kendo-color-border);\n          border-radius: 0.5rem;\n          cursor: pointer;\n          transition: all 0.2s ease;\n\n          &:hover {\n            background: var(--kendo-color-base-hover);\n            border-color: var(--kendo-color-primary);\n          }\n\n          .category-info {\n            flex: 1;\n\n            .category-name {\n              font-weight: 600;\n              margin-bottom: 0.25rem;\n            }\n\n            .category-metrics {\n              display: flex;\n              gap: 1rem;\n              font-size: 0.75rem;\n              color: var(--kendo-color-subtle);\n\n              .metric {\n                &.success-rate {\n                  color: var(--kendo-color-success);\n                  font-weight: 600;\n                }\n              }\n            }\n          }\n\n          .category-chart {\n            width: 60px;\n\n            .progress-bar {\n              height: 6px;\n              background: var(--kendo-color-border);\n              border-radius: 3px;\n              overflow: hidden;\n\n              .progress-fill {\n                height: 100%;\n                background: var(--kendo-color-success);\n                transition: width 0.3s ease;\n              }\n            }\n          }\n        }\n      }\n    }\n\n    .recent-actions {\n      .actions-list {\n        display: flex;\n        flex-direction: column;\n        gap: 0.75rem;\n\n        .action-item {\n          display: flex;\n          align-items: center;\n          gap: 1rem;\n          padding: 1rem;\n          border: 1px solid var(--kendo-color-border);\n          border-radius: 0.5rem;\n          cursor: pointer;\n          transition: all 0.2s ease;\n\n          &:hover {\n            background: var(--kendo-color-base-hover);\n            border-color: var(--kendo-color-primary);\n          }\n\n          .action-icon {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            width: 2.5rem;\n            height: 2.5rem;\n            border-radius: 0.375rem;\n            background: var(--kendo-color-primary-subtle);\n\n            i {\n              color: var(--kendo-color-primary);\n              font-size: 1rem;\n            }\n          }\n\n          .action-info {\n            flex: 1;\n\n            .action-name {\n              font-weight: 600;\n              margin-bottom: 0.25rem;\n            }\n\n            .action-description {\n              font-size: 0.75rem;\n              color: var(--kendo-color-subtle);\n              line-height: 1.3;\n            }\n          }\n\n          .action-status {\n            flex-shrink: 0;\n          }\n        }\n      }\n    }\n\n    .recent-executions {\n      grid-column: 1 / -1;\n\n      .executions-list {\n        display: flex;\n        flex-direction: column;\n        gap: 0.75rem;\n\n        .execution-item {\n          display: flex;\n          align-items: center;\n          gap: 1rem;\n          padding: 1rem;\n          border: 1px solid var(--kendo-color-border);\n          border-radius: 0.5rem;\n          cursor: pointer;\n          transition: all 0.2s ease;\n\n          &:hover {\n            background: var(--kendo-color-base-hover);\n            border-color: var(--kendo-color-primary);\n          }\n\n          .execution-time {\n            font-size: 0.75rem;\n            color: var(--kendo-color-subtle);\n            font-weight: 600;\n            min-width: 80px;\n          }\n\n          .execution-info {\n            flex: 1;\n\n            .execution-action {\n              font-weight: 600;\n              margin-bottom: 0.25rem;\n              font-size: 0.875rem;\n            }\n\n            .execution-user {\n              font-size: 0.75rem;\n              color: var(--kendo-color-subtle);\n            }\n          }\n\n          .execution-result {\n            flex-shrink: 0;\n          }\n        }\n      }\n    }\n  }\n\n  .empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 2rem;\n    text-align: center;\n    color: var(--kendo-color-subtle);\n\n    i {\n      font-size: 2.5rem;\n      margin-bottom: 1rem;\n      opacity: 0.5;\n    }\n\n    p {\n      margin: 0;\n      font-size: 0.875rem;\n    }\n  }\n\n  .loading-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(255, 255, 255, 0.8);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1000;\n  }\n}\n\n//[_ngcontent-%COMP%]   Responsive[_ngcontent-%COMP%]   design\n@media[_ngcontent-%COMP%]   (max-width[_ngcontent-%COMP%]:   1200px)[_ngcontent-%COMP%] {\n  .actions-overview .content-grid {\n    grid-template-columns: 1fr;\n    \n    .recent-executions {\n      grid-column: 1;\n    }\n  }\n}\n\n@media (max-width: 768px) {\n  .actions-overview[_ngcontent-%COMP%] {\n    padding: 1rem;\n    gap: 1rem;\n\n    .metrics-grid {\n      grid-template-columns: 1fr;\n      gap: 1rem;\n    }\n\n    .overview-header .filters-row {\n      flex-direction: column;\n      align-items: stretch;\n\n      .search-container,\n      .filter-container {\n        min-width: unset;\n      }\n    }\n  }\n}"] });
 }
-ActionsOverviewComponent.ɵfac = function ActionsOverviewComponent_Factory(t) { return new (t || ActionsOverviewComponent)(); };
-ActionsOverviewComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ActionsOverviewComponent, selectors: [["mj-actions-overview"]], outputs: { openEntityRecord: "openEntityRecord", showActionsListView: "showActionsListView", showExecutionsListView: "showExecutionsListView", showCategoriesListView: "showCategoriesListView" }, decls: 87, vars: 35, consts: [["mjFillContainer", "", 1, "actions-overview"], [1, "overview-header"], [1, "filters-row"], [1, "search-container"], ["placeholder", "Search actions...", 3, "valueChange", "value"], ["kendoTextBoxPrefixTemplate", ""], [1, "filter-container"], ["textField", "text", "valueField", "value", 3, "valueChange", "data", "value"], [1, "metrics-grid"], [1, "metric-card", "primary", "clickable", 3, "click"], [1, "metric-icon"], [1, "fa-solid", "fa-cogs"], [1, "metric-content"], [1, "metric-value"], [1, "metric-label"], [1, "metric-breakdown"], [1, "active"], [1, "pending"], [1, "disabled"], [1, "metric-card", "success", "clickable", 3, "click"], [1, "fa-solid", "fa-play-circle"], [1, "recent"], [1, "success-rate"], [1, "metric-card", "info", "clickable", 3, "click"], [1, "fa-solid", "fa-sitemap"], [1, "metric-card", "warning", "clickable", 3, "click"], [1, "fa-solid", "fa-robot"], [1, "custom"], [1, "content-grid"], [1, "panel", "category-stats"], [1, "panel-header"], [1, "fa-solid", "fa-chart-bar"], [1, "panel-content"], [1, "category-list"], [1, "empty-state"], [1, "panel", "recent-actions"], [1, "fa-solid", "fa-clock"], [1, "actions-list"], [1, "panel", "recent-executions"], [1, "fa-solid", "fa-history"], [1, "executions-list"], [1, "loading-overlay"], [1, "fa-solid", "fa-search"], [1, "category-item"], [1, "category-item", 3, "click"], [1, "category-info"], [1, "category-name"], [1, "category-metrics"], [1, "metric"], [1, "metric", "success-rate"], [1, "category-chart"], [1, "progress-bar"], [1, "progress-fill"], [1, "action-item"], [1, "action-item", 3, "click"], [1, "action-icon"], [1, "action-info"], [1, "action-name"], [1, "action-description"], [1, "action-status"], [3, "themeColor", "size"], [1, "execution-item"], [1, "execution-item", 3, "click"], [1, "execution-time"], [1, "execution-info"], [1, "execution-action"], [1, "execution-user"], [1, "execution-result"], ["type", "converging-spinner", 3, "themeColor"]], template: function ActionsOverviewComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "kendo-textbox", 4);
-        i0.ɵɵlistener("valueChange", function ActionsOverviewComponent_Template_kendo_textbox_valueChange_4_listener($event) { return ctx.onSearchChange($event); });
-        i0.ɵɵtemplate(5, ActionsOverviewComponent_ng_template_5_Template, 1, 0, "ng-template", 5);
-        i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(6, "div", 6)(7, "kendo-dropdownlist", 7);
-        i0.ɵɵlistener("valueChange", function ActionsOverviewComponent_Template_kendo_dropdownlist_valueChange_7_listener($event) { return ctx.onStatusFilterChange($event); });
-        i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(8, "div", 6)(9, "kendo-dropdownlist", 7);
-        i0.ɵɵlistener("valueChange", function ActionsOverviewComponent_Template_kendo_dropdownlist_valueChange_9_listener($event) { return ctx.onTypeFilterChange($event); });
-        i0.ɵɵelementEnd()()()();
-        i0.ɵɵelementStart(10, "div", 8)(11, "div", 9);
-        i0.ɵɵlistener("click", function ActionsOverviewComponent_Template_div_click_11_listener() { return ctx.onTotalActionsClick(); });
-        i0.ɵɵelementStart(12, "div", 10);
-        i0.ɵɵelement(13, "i", 11);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(14, "div", 12)(15, "div", 13);
-        i0.ɵɵtext(16);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(17, "div", 14);
-        i0.ɵɵtext(18, "Total Actions");
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(19, "div", 15)(20, "span", 16);
-        i0.ɵɵtext(21);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(22, "span", 17);
-        i0.ɵɵtext(23);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(24, "span", 18);
-        i0.ɵɵtext(25);
-        i0.ɵɵelementEnd()()()();
-        i0.ɵɵelementStart(26, "div", 19);
-        i0.ɵɵlistener("click", function ActionsOverviewComponent_Template_div_click_26_listener() { return ctx.onExecutionsClick(); });
-        i0.ɵɵelementStart(27, "div", 10);
-        i0.ɵɵelement(28, "i", 20);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(29, "div", 12)(30, "div", 13);
-        i0.ɵɵtext(31);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(32, "div", 14);
-        i0.ɵɵtext(33, "Total Executions");
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(34, "div", 15)(35, "span", 21);
-        i0.ɵɵtext(36);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(37, "span", 22);
-        i0.ɵɵtext(38);
-        i0.ɵɵelementEnd()()()();
-        i0.ɵɵelementStart(39, "div", 23);
-        i0.ɵɵlistener("click", function ActionsOverviewComponent_Template_div_click_39_listener() { return ctx.onCategoriesClick(); });
-        i0.ɵɵelementStart(40, "div", 10);
-        i0.ɵɵelement(41, "i", 24);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(42, "div", 12)(43, "div", 13);
-        i0.ɵɵtext(44);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(45, "div", 14);
-        i0.ɵɵtext(46, "Categories");
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(47, "div", 15)(48, "span");
-        i0.ɵɵtext(49, "Organized structure");
-        i0.ɵɵelementEnd()()()();
-        i0.ɵɵelementStart(50, "div", 25);
-        i0.ɵɵlistener("click", function ActionsOverviewComponent_Template_div_click_50_listener() { return ctx.onAIGeneratedClick(); });
-        i0.ɵɵelementStart(51, "div", 10);
-        i0.ɵɵelement(52, "i", 26);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(53, "div", 12)(54, "div", 13);
-        i0.ɵɵtext(55);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(56, "div", 14);
-        i0.ɵɵtext(57, "AI Generated");
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(58, "div", 15)(59, "span", 27);
-        i0.ɵɵtext(60);
-        i0.ɵɵelementEnd()()()()();
-        i0.ɵɵelementStart(61, "div", 28)(62, "div", 29)(63, "div", 30)(64, "h3");
-        i0.ɵɵelement(65, "i", 31);
-        i0.ɵɵtext(66, " Category Performance");
-        i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(67, "div", 32);
-        i0.ɵɵtemplate(68, ActionsOverviewComponent_Conditional_68_Template, 3, 0, "div", 33)(69, ActionsOverviewComponent_Conditional_69_Template, 4, 0, "div", 34);
-        i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(70, "div", 35)(71, "div", 30)(72, "h3");
-        i0.ɵɵelement(73, "i", 36);
-        i0.ɵɵtext(74, " Recent Actions");
-        i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(75, "div", 32);
-        i0.ɵɵtemplate(76, ActionsOverviewComponent_Conditional_76_Template, 3, 0, "div", 37)(77, ActionsOverviewComponent_Conditional_77_Template, 4, 0, "div", 34);
-        i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(78, "div", 38)(79, "div", 30)(80, "h3");
-        i0.ɵɵelement(81, "i", 39);
-        i0.ɵɵtext(82, " Recent Executions");
-        i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(83, "div", 32);
-        i0.ɵɵtemplate(84, ActionsOverviewComponent_Conditional_84_Template, 3, 0, "div", 40)(85, ActionsOverviewComponent_Conditional_85_Template, 4, 0, "div", 34);
-        i0.ɵɵelementEnd()()();
-        i0.ɵɵtemplate(86, ActionsOverviewComponent_Conditional_86_Template, 2, 1, "div", 41);
-        i0.ɵɵelementEnd();
-    } if (rf & 2) {
-        i0.ɵɵadvance(4);
-        i0.ɵɵproperty("value", ctx.searchTerm$.value);
-        i0.ɵɵadvance(3);
-        i0.ɵɵproperty("data", i0.ɵɵpureFunction4(23, _c4, i0.ɵɵpureFunction0(19, _c0), i0.ɵɵpureFunction0(20, _c1), i0.ɵɵpureFunction0(21, _c2), i0.ɵɵpureFunction0(22, _c3)))("value", ctx.selectedStatus$.value);
-        i0.ɵɵadvance(2);
-        i0.ɵɵproperty("data", i0.ɵɵpureFunction3(31, _c8, i0.ɵɵpureFunction0(28, _c5), i0.ɵɵpureFunction0(29, _c6), i0.ɵɵpureFunction0(30, _c7)))("value", ctx.selectedType$.value);
-        i0.ɵɵadvance(7);
-        i0.ɵɵtextInterpolate(ctx.metrics.totalActions);
-        i0.ɵɵadvance(5);
-        i0.ɵɵtextInterpolate1("", ctx.metrics.activeActions, " Active");
-        i0.ɵɵadvance(2);
-        i0.ɵɵtextInterpolate1("", ctx.metrics.pendingActions, " Pending");
-        i0.ɵɵadvance(2);
-        i0.ɵɵtextInterpolate1("", ctx.metrics.disabledActions, " Disabled");
-        i0.ɵɵadvance(6);
-        i0.ɵɵtextInterpolate(ctx.metrics.totalExecutions);
-        i0.ɵɵadvance(5);
-        i0.ɵɵtextInterpolate1("", ctx.metrics.recentExecutions, " in last 24h");
-        i0.ɵɵadvance(2);
-        i0.ɵɵtextInterpolate1("", ctx.metrics.successRate, "% success rate");
-        i0.ɵɵadvance(6);
-        i0.ɵɵtextInterpolate(ctx.metrics.totalCategories);
-        i0.ɵɵadvance(11);
-        i0.ɵɵtextInterpolate(ctx.metrics.aiGeneratedActions);
-        i0.ɵɵadvance(5);
-        i0.ɵɵtextInterpolate1("", ctx.metrics.customActions, " Custom");
-        i0.ɵɵadvance(8);
-        i0.ɵɵconditional(ctx.categoryStats.length > 0 ? 68 : 69);
-        i0.ɵɵadvance(8);
-        i0.ɵɵconditional(ctx.recentActions.length > 0 ? 76 : 77);
-        i0.ɵɵadvance(8);
-        i0.ɵɵconditional(ctx.recentExecutions.length > 0 ? 84 : 85);
-        i0.ɵɵadvance(2);
-        i0.ɵɵconditional(ctx.isLoading ? 86 : -1);
-    } }, dependencies: [i1.LoaderComponent, i2.DropDownListComponent, i3.TextBoxComponent, i3.TextBoxPrefixTemplateDirective, i4.FillContainer, i5.ChipComponent, i6.DatePipe], styles: [".actions-overview[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n  padding: 1.5rem;\n  height: 100%;\n  overflow-y: auto;\n\n  .overview-header {\n    .filters-row {\n      display: flex;\n      align-items: center;\n      gap: 1rem;\n      flex-wrap: wrap;\n\n      .search-container {\n        flex: 1;\n        min-width: 200px;\n\n        kendo-textbox {\n          width: 100%;\n        }\n      }\n\n      .filter-container {\n        min-width: 150px;\n        \n        kendo-dropdownlist {\n          width: 100%;\n        }\n      }\n    }\n  }\n\n  .metrics-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n    gap: 1.5rem;\n\n    .metric-card {\n      display: flex;\n      align-items: center;\n      gap: 1rem;\n      padding: 1.5rem;\n      border-radius: 0.75rem;\n      background: var(--kendo-color-surface);\n      border: 1px solid var(--kendo-color-border);\n      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n      transition: all 0.2s ease;\n\n      &.clickable {\n        cursor: pointer;\n        \n        &:hover {\n          transform: translateY(-2px);\n          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n        }\n      }\n\n      .metric-icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 3rem;\n        height: 3rem;\n        border-radius: 0.5rem;\n        font-size: 1.25rem;\n\n        i {\n          color: white;\n        }\n      }\n\n      .metric-content {\n        flex: 1;\n\n        .metric-value {\n          font-size: 1.75rem;\n          font-weight: 700;\n          line-height: 1;\n          margin-bottom: 0.25rem;\n        }\n\n        .metric-label {\n          font-size: 0.875rem;\n          font-weight: 600;\n          color: var(--kendo-color-subtle);\n          margin-bottom: 0.5rem;\n        }\n\n        .metric-breakdown {\n          display: flex;\n          flex-direction: column;\n          gap: 0.125rem;\n          font-size: 0.75rem;\n\n          span {\n            color: var(--kendo-color-subtle);\n\n            &.active { color: var(--kendo-color-success); }\n            &.pending { color: var(--kendo-color-warning); }\n            &.disabled { color: var(--kendo-color-error); }\n            &.recent { color: var(--kendo-color-info); }\n            &.success-rate { color: var(--kendo-color-success); }\n            &.custom { color: var(--kendo-color-primary); }\n          }\n        }\n      }\n\n      &.primary .metric-icon { background: var(--kendo-color-primary); }\n      &.success .metric-icon { background: var(--kendo-color-success); }\n      &.info .metric-icon { background: var(--kendo-color-info); }\n      &.warning .metric-icon { background: var(--kendo-color-warning); }\n    }\n  }\n\n  .content-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    grid-template-rows: auto auto;\n    gap: 1.5rem;\n    flex: 1;\n\n    .panel {\n      background: var(--kendo-color-surface);\n      border: 1px solid var(--kendo-color-border);\n      border-radius: 0.75rem;\n      overflow: hidden;\n      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n\n      .panel-header {\n        padding: 1rem 1.5rem;\n        background: var(--kendo-color-app-surface);\n        border-bottom: 1px solid var(--kendo-color-border);\n\n        h3 {\n          margin: 0;\n          font-size: 1rem;\n          font-weight: 600;\n          display: flex;\n          align-items: center;\n          gap: 0.5rem;\n\n          i {\n            color: var(--kendo-color-primary);\n          }\n        }\n      }\n\n      .panel-content {\n        padding: 1.5rem;\n        height: calc(100% - 60px);\n        overflow-y: auto;\n      }\n    }\n\n    .category-stats {\n      .category-list {\n        display: flex;\n        flex-direction: column;\n        gap: 0.75rem;\n\n        .category-item {\n          display: flex;\n          align-items: center;\n          gap: 1rem;\n          padding: 1rem;\n          border: 1px solid var(--kendo-color-border);\n          border-radius: 0.5rem;\n          cursor: pointer;\n          transition: all 0.2s ease;\n\n          &:hover {\n            background: var(--kendo-color-base-hover);\n            border-color: var(--kendo-color-primary);\n          }\n\n          .category-info {\n            flex: 1;\n\n            .category-name {\n              font-weight: 600;\n              margin-bottom: 0.25rem;\n            }\n\n            .category-metrics {\n              display: flex;\n              gap: 1rem;\n              font-size: 0.75rem;\n              color: var(--kendo-color-subtle);\n\n              .metric {\n                &.success-rate {\n                  color: var(--kendo-color-success);\n                  font-weight: 600;\n                }\n              }\n            }\n          }\n\n          .category-chart {\n            width: 60px;\n\n            .progress-bar {\n              height: 6px;\n              background: var(--kendo-color-border);\n              border-radius: 3px;\n              overflow: hidden;\n\n              .progress-fill {\n                height: 100%;\n                background: var(--kendo-color-success);\n                transition: width 0.3s ease;\n              }\n            }\n          }\n        }\n      }\n    }\n\n    .recent-actions {\n      .actions-list {\n        display: flex;\n        flex-direction: column;\n        gap: 0.75rem;\n\n        .action-item {\n          display: flex;\n          align-items: center;\n          gap: 1rem;\n          padding: 1rem;\n          border: 1px solid var(--kendo-color-border);\n          border-radius: 0.5rem;\n          cursor: pointer;\n          transition: all 0.2s ease;\n\n          &:hover {\n            background: var(--kendo-color-base-hover);\n            border-color: var(--kendo-color-primary);\n          }\n\n          .action-icon {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            width: 2.5rem;\n            height: 2.5rem;\n            border-radius: 0.375rem;\n            background: var(--kendo-color-primary-subtle);\n\n            i {\n              color: var(--kendo-color-primary);\n              font-size: 1rem;\n            }\n          }\n\n          .action-info {\n            flex: 1;\n\n            .action-name {\n              font-weight: 600;\n              margin-bottom: 0.25rem;\n            }\n\n            .action-description {\n              font-size: 0.75rem;\n              color: var(--kendo-color-subtle);\n              line-height: 1.3;\n            }\n          }\n\n          .action-status {\n            flex-shrink: 0;\n          }\n        }\n      }\n    }\n\n    .recent-executions {\n      grid-column: 1 / -1;\n\n      .executions-list {\n        display: flex;\n        flex-direction: column;\n        gap: 0.75rem;\n\n        .execution-item {\n          display: flex;\n          align-items: center;\n          gap: 1rem;\n          padding: 1rem;\n          border: 1px solid var(--kendo-color-border);\n          border-radius: 0.5rem;\n          cursor: pointer;\n          transition: all 0.2s ease;\n\n          &:hover {\n            background: var(--kendo-color-base-hover);\n            border-color: var(--kendo-color-primary);\n          }\n\n          .execution-time {\n            font-size: 0.75rem;\n            color: var(--kendo-color-subtle);\n            font-weight: 600;\n            min-width: 80px;\n          }\n\n          .execution-info {\n            flex: 1;\n\n            .execution-action {\n              font-weight: 600;\n              margin-bottom: 0.25rem;\n              font-size: 0.875rem;\n            }\n\n            .execution-user {\n              font-size: 0.75rem;\n              color: var(--kendo-color-subtle);\n            }\n          }\n\n          .execution-result {\n            flex-shrink: 0;\n          }\n        }\n      }\n    }\n  }\n\n  .empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 2rem;\n    text-align: center;\n    color: var(--kendo-color-subtle);\n\n    i {\n      font-size: 2.5rem;\n      margin-bottom: 1rem;\n      opacity: 0.5;\n    }\n\n    p {\n      margin: 0;\n      font-size: 0.875rem;\n    }\n  }\n\n  .loading-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(255, 255, 255, 0.8);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1000;\n  }\n}\n\n//[_ngcontent-%COMP%]   Responsive[_ngcontent-%COMP%]   design\n@media[_ngcontent-%COMP%]   (max-width[_ngcontent-%COMP%]:   1200px)[_ngcontent-%COMP%] {\n  .actions-overview .content-grid {\n    grid-template-columns: 1fr;\n    \n    .recent-executions {\n      grid-column: 1;\n    }\n  }\n}\n\n@media (max-width: 768px) {\n  .actions-overview[_ngcontent-%COMP%] {\n    padding: 1rem;\n    gap: 1rem;\n\n    .metrics-grid {\n      grid-template-columns: 1fr;\n      gap: 1rem;\n    }\n\n    .overview-header .filters-row {\n      flex-direction: column;\n      align-items: stretch;\n\n      .search-container,\n      .filter-container {\n        min-width: unset;\n      }\n    }\n  }\n}"] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ActionsOverviewComponent, [{
         type: Component,
         args: [{ selector: 'mj-actions-overview', template: "<div class=\"actions-overview\" mjFillContainer>\n  <!-- Header with search and filters -->\n  <div class=\"overview-header\">\n    <div class=\"filters-row\">\n      <div class=\"search-container\">\n        <kendo-textbox \n          placeholder=\"Search actions...\" \n          [value]=\"searchTerm$.value\"\n          (valueChange)=\"onSearchChange($event)\">\n          <ng-template kendoTextBoxPrefixTemplate>\n            <i class=\"fa-solid fa-search\"></i>\n          </ng-template>\n        </kendo-textbox>\n      </div>\n      \n      <div class=\"filter-container\">\n        <kendo-dropdownlist \n          [data]=\"[\n            { text: 'All Statuses', value: 'all' },\n            { text: 'Active', value: 'Active' },\n            { text: 'Pending', value: 'Pending' },\n            { text: 'Disabled', value: 'Disabled' }\n          ]\"\n          textField=\"text\"\n          valueField=\"value\"\n          [value]=\"selectedStatus$.value\"\n          (valueChange)=\"onStatusFilterChange($event)\">\n        </kendo-dropdownlist>\n      </div>\n      \n      <div class=\"filter-container\">\n        <kendo-dropdownlist \n          [data]=\"[\n            { text: 'All Types', value: 'all' },\n            { text: 'AI Generated', value: 'Generated' },\n            { text: 'Custom', value: 'Custom' }\n          ]\"\n          textField=\"text\"\n          valueField=\"value\"\n          [value]=\"selectedType$.value\"\n          (valueChange)=\"onTypeFilterChange($event)\">\n        </kendo-dropdownlist>\n      </div>\n    </div>\n  </div>\n\n  <!-- Metrics Cards -->\n  <div class=\"metrics-grid\">\n    <div class=\"metric-card primary clickable\" (click)=\"onTotalActionsClick()\">\n      <div class=\"metric-icon\">\n        <i class=\"fa-solid fa-cogs\"></i>\n      </div>\n      <div class=\"metric-content\">\n        <div class=\"metric-value\">{{ metrics.totalActions }}</div>\n        <div class=\"metric-label\">Total Actions</div>\n        <div class=\"metric-breakdown\">\n          <span class=\"active\">{{ metrics.activeActions }} Active</span>\n          <span class=\"pending\">{{ metrics.pendingActions }} Pending</span>\n          <span class=\"disabled\">{{ metrics.disabledActions }} Disabled</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"metric-card success clickable\" (click)=\"onExecutionsClick()\">\n      <div class=\"metric-icon\">\n        <i class=\"fa-solid fa-play-circle\"></i>\n      </div>\n      <div class=\"metric-content\">\n        <div class=\"metric-value\">{{ metrics.totalExecutions }}</div>\n        <div class=\"metric-label\">Total Executions</div>\n        <div class=\"metric-breakdown\">\n          <span class=\"recent\">{{ metrics.recentExecutions }} in last 24h</span>\n          <span class=\"success-rate\">{{ metrics.successRate }}% success rate</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"metric-card info clickable\" (click)=\"onCategoriesClick()\">\n      <div class=\"metric-icon\">\n        <i class=\"fa-solid fa-sitemap\"></i>\n      </div>\n      <div class=\"metric-content\">\n        <div class=\"metric-value\">{{ metrics.totalCategories }}</div>\n        <div class=\"metric-label\">Categories</div>\n        <div class=\"metric-breakdown\">\n          <span>Organized structure</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"metric-card warning clickable\" (click)=\"onAIGeneratedClick()\">\n      <div class=\"metric-icon\">\n        <i class=\"fa-solid fa-robot\"></i>\n      </div>\n      <div class=\"metric-content\">\n        <div class=\"metric-value\">{{ metrics.aiGeneratedActions }}</div>\n        <div class=\"metric-label\">AI Generated</div>\n        <div class=\"metric-breakdown\">\n          <span class=\"custom\">{{ metrics.customActions }} Custom</span>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Content Grid -->\n  <div class=\"content-grid\">\n    <!-- Category Statistics -->\n    <div class=\"panel category-stats\">\n      <div class=\"panel-header\">\n        <h3><i class=\"fa-solid fa-chart-bar\"></i> Category Performance</h3>\n      </div>\n      <div class=\"panel-content\">\n        @if (categoryStats.length > 0) {\n          <div class=\"category-list\">\n            @for (category of categoryStats; track category.categoryId) {\n              <div class=\"category-item\" (click)=\"openCategory(category.categoryId)\">\n                <div class=\"category-info\">\n                  <div class=\"category-name\">{{ category.categoryName }}</div>\n                  <div class=\"category-metrics\">\n                    <span class=\"metric\">{{ category.actionCount }} actions</span>\n                    <span class=\"metric\">{{ category.executionCount }} executions</span>\n                    <span class=\"metric success-rate\">{{ category.successRate }}% success</span>\n                  </div>\n                </div>\n                <div class=\"category-chart\">\n                  <div class=\"progress-bar\">\n                    <div class=\"progress-fill\" [style.width.%]=\"category.successRate\"></div>\n                  </div>\n                </div>\n              </div>\n            }\n          </div>\n        } @else {\n          <div class=\"empty-state\">\n            <i class=\"fa-solid fa-chart-bar\"></i>\n            <p>No category statistics available</p>\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Recent Actions -->\n    <div class=\"panel recent-actions\">\n      <div class=\"panel-header\">\n        <h3><i class=\"fa-solid fa-clock\"></i> Recent Actions</h3>\n      </div>\n      <div class=\"panel-content\">\n        @if (recentActions.length > 0) {\n          <div class=\"actions-list\">\n            @for (action of recentActions; track action.ID) {\n              <div class=\"action-item\" (click)=\"openAction(action)\">\n                <div class=\"action-icon\">\n                  <i [class]=\"getTypeIcon(action.Type)\"></i>\n                </div>\n                <div class=\"action-info\">\n                  <div class=\"action-name\">{{ action.Name }}</div>\n                  <div class=\"action-description\">{{ action.Description || 'No description' }}</div>\n                </div>\n                <div class=\"action-status\">\n                  <kendo-chip \n                    [themeColor]=\"getStatusColor(action.Status)\"\n                    [size]=\"'small'\">\n                    {{ action.Status }}\n                  </kendo-chip>\n                </div>\n              </div>\n            }\n          </div>\n        } @else {\n          <div class=\"empty-state\">\n            <i class=\"fa-solid fa-cogs\"></i>\n            <p>No recent actions found</p>\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Recent Executions -->\n    <div class=\"panel recent-executions\">\n      <div class=\"panel-header\">\n        <h3><i class=\"fa-solid fa-history\"></i> Recent Executions</h3>\n      </div>\n      <div class=\"panel-content\">\n        @if (recentExecutions.length > 0) {\n          <div class=\"executions-list\">\n            @for (execution of recentExecutions; track execution.ID) {\n              <div class=\"execution-item\" (click)=\"openExecution(execution)\">\n                <div class=\"execution-time\">\n                  {{ execution.StartedAt | date:'MMM d, HH:mm' }}\n                </div>\n                <div class=\"execution-info\">\n                  <div class=\"execution-action\">Action ID: {{ execution.ActionID }}</div>\n                  <div class=\"execution-user\">User: {{ execution.UserID }}</div>\n                </div>\n                <div class=\"execution-result\">\n                  <kendo-chip \n                    [themeColor]=\"execution.ResultCode === 'Success' ? 'success' : 'error'\"\n                    [size]=\"'small'\">\n                    {{ execution.ResultCode || 'Unknown' }}\n                  </kendo-chip>\n                </div>\n              </div>\n            }\n          </div>\n        } @else {\n          <div class=\"empty-state\">\n            <i class=\"fa-solid fa-history\"></i>\n            <p>No recent executions found</p>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  @if (isLoading) {\n    <div class=\"loading-overlay\">\n      <kendo-loader type=\"converging-spinner\" [themeColor]=\"'primary'\"></kendo-loader>\n    </div>\n  }\n</div>", styles: [".actions-overview {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n  padding: 1.5rem;\n  height: 100%;\n  overflow-y: auto;\n\n  .overview-header {\n    .filters-row {\n      display: flex;\n      align-items: center;\n      gap: 1rem;\n      flex-wrap: wrap;\n\n      .search-container {\n        flex: 1;\n        min-width: 200px;\n\n        kendo-textbox {\n          width: 100%;\n        }\n      }\n\n      .filter-container {\n        min-width: 150px;\n        \n        kendo-dropdownlist {\n          width: 100%;\n        }\n      }\n    }\n  }\n\n  .metrics-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n    gap: 1.5rem;\n\n    .metric-card {\n      display: flex;\n      align-items: center;\n      gap: 1rem;\n      padding: 1.5rem;\n      border-radius: 0.75rem;\n      background: var(--kendo-color-surface);\n      border: 1px solid var(--kendo-color-border);\n      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n      transition: all 0.2s ease;\n\n      &.clickable {\n        cursor: pointer;\n        \n        &:hover {\n          transform: translateY(-2px);\n          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n        }\n      }\n\n      .metric-icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 3rem;\n        height: 3rem;\n        border-radius: 0.5rem;\n        font-size: 1.25rem;\n\n        i {\n          color: white;\n        }\n      }\n\n      .metric-content {\n        flex: 1;\n\n        .metric-value {\n          font-size: 1.75rem;\n          font-weight: 700;\n          line-height: 1;\n          margin-bottom: 0.25rem;\n        }\n\n        .metric-label {\n          font-size: 0.875rem;\n          font-weight: 600;\n          color: var(--kendo-color-subtle);\n          margin-bottom: 0.5rem;\n        }\n\n        .metric-breakdown {\n          display: flex;\n          flex-direction: column;\n          gap: 0.125rem;\n          font-size: 0.75rem;\n\n          span {\n            color: var(--kendo-color-subtle);\n\n            &.active { color: var(--kendo-color-success); }\n            &.pending { color: var(--kendo-color-warning); }\n            &.disabled { color: var(--kendo-color-error); }\n            &.recent { color: var(--kendo-color-info); }\n            &.success-rate { color: var(--kendo-color-success); }\n            &.custom { color: var(--kendo-color-primary); }\n          }\n        }\n      }\n\n      &.primary .metric-icon { background: var(--kendo-color-primary); }\n      &.success .metric-icon { background: var(--kendo-color-success); }\n      &.info .metric-icon { background: var(--kendo-color-info); }\n      &.warning .metric-icon { background: var(--kendo-color-warning); }\n    }\n  }\n\n  .content-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    grid-template-rows: auto auto;\n    gap: 1.5rem;\n    flex: 1;\n\n    .panel {\n      background: var(--kendo-color-surface);\n      border: 1px solid var(--kendo-color-border);\n      border-radius: 0.75rem;\n      overflow: hidden;\n      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n\n      .panel-header {\n        padding: 1rem 1.5rem;\n        background: var(--kendo-color-app-surface);\n        border-bottom: 1px solid var(--kendo-color-border);\n\n        h3 {\n          margin: 0;\n          font-size: 1rem;\n          font-weight: 600;\n          display: flex;\n          align-items: center;\n          gap: 0.5rem;\n\n          i {\n            color: var(--kendo-color-primary);\n          }\n        }\n      }\n\n      .panel-content {\n        padding: 1.5rem;\n        height: calc(100% - 60px);\n        overflow-y: auto;\n      }\n    }\n\n    .category-stats {\n      .category-list {\n        display: flex;\n        flex-direction: column;\n        gap: 0.75rem;\n\n        .category-item {\n          display: flex;\n          align-items: center;\n          gap: 1rem;\n          padding: 1rem;\n          border: 1px solid var(--kendo-color-border);\n          border-radius: 0.5rem;\n          cursor: pointer;\n          transition: all 0.2s ease;\n\n          &:hover {\n            background: var(--kendo-color-base-hover);\n            border-color: var(--kendo-color-primary);\n          }\n\n          .category-info {\n            flex: 1;\n\n            .category-name {\n              font-weight: 600;\n              margin-bottom: 0.25rem;\n            }\n\n            .category-metrics {\n              display: flex;\n              gap: 1rem;\n              font-size: 0.75rem;\n              color: var(--kendo-color-subtle);\n\n              .metric {\n                &.success-rate {\n                  color: var(--kendo-color-success);\n                  font-weight: 600;\n                }\n              }\n            }\n          }\n\n          .category-chart {\n            width: 60px;\n\n            .progress-bar {\n              height: 6px;\n              background: var(--kendo-color-border);\n              border-radius: 3px;\n              overflow: hidden;\n\n              .progress-fill {\n                height: 100%;\n                background: var(--kendo-color-success);\n                transition: width 0.3s ease;\n              }\n            }\n          }\n        }\n      }\n    }\n\n    .recent-actions {\n      .actions-list {\n        display: flex;\n        flex-direction: column;\n        gap: 0.75rem;\n\n        .action-item {\n          display: flex;\n          align-items: center;\n          gap: 1rem;\n          padding: 1rem;\n          border: 1px solid var(--kendo-color-border);\n          border-radius: 0.5rem;\n          cursor: pointer;\n          transition: all 0.2s ease;\n\n          &:hover {\n            background: var(--kendo-color-base-hover);\n            border-color: var(--kendo-color-primary);\n          }\n\n          .action-icon {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            width: 2.5rem;\n            height: 2.5rem;\n            border-radius: 0.375rem;\n            background: var(--kendo-color-primary-subtle);\n\n            i {\n              color: var(--kendo-color-primary);\n              font-size: 1rem;\n            }\n          }\n\n          .action-info {\n            flex: 1;\n\n            .action-name {\n              font-weight: 600;\n              margin-bottom: 0.25rem;\n            }\n\n            .action-description {\n              font-size: 0.75rem;\n              color: var(--kendo-color-subtle);\n              line-height: 1.3;\n            }\n          }\n\n          .action-status {\n            flex-shrink: 0;\n          }\n        }\n      }\n    }\n\n    .recent-executions {\n      grid-column: 1 / -1;\n\n      .executions-list {\n        display: flex;\n        flex-direction: column;\n        gap: 0.75rem;\n\n        .execution-item {\n          display: flex;\n          align-items: center;\n          gap: 1rem;\n          padding: 1rem;\n          border: 1px solid var(--kendo-color-border);\n          border-radius: 0.5rem;\n          cursor: pointer;\n          transition: all 0.2s ease;\n\n          &:hover {\n            background: var(--kendo-color-base-hover);\n            border-color: var(--kendo-color-primary);\n          }\n\n          .execution-time {\n            font-size: 0.75rem;\n            color: var(--kendo-color-subtle);\n            font-weight: 600;\n            min-width: 80px;\n          }\n\n          .execution-info {\n            flex: 1;\n\n            .execution-action {\n              font-weight: 600;\n              margin-bottom: 0.25rem;\n              font-size: 0.875rem;\n            }\n\n            .execution-user {\n              font-size: 0.75rem;\n              color: var(--kendo-color-subtle);\n            }\n          }\n\n          .execution-result {\n            flex-shrink: 0;\n          }\n        }\n      }\n    }\n  }\n\n  .empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 2rem;\n    text-align: center;\n    color: var(--kendo-color-subtle);\n\n    i {\n      font-size: 2.5rem;\n      margin-bottom: 1rem;\n      opacity: 0.5;\n    }\n\n    p {\n      margin: 0;\n      font-size: 0.875rem;\n    }\n  }\n\n  .loading-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(255, 255, 255, 0.8);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1000;\n  }\n}\n\n// Responsive design\n@media (max-width: 1200px) {\n  .actions-overview .content-grid {\n    grid-template-columns: 1fr;\n    \n    .recent-executions {\n      grid-column: 1;\n    }\n  }\n}\n\n@media (max-width: 768px) {\n  .actions-overview {\n    padding: 1rem;\n    gap: 1rem;\n\n    .metrics-grid {\n      grid-template-columns: 1fr;\n      gap: 1rem;\n    }\n\n    .overview-header .filters-row {\n      flex-direction: column;\n      align-items: stretch;\n\n      .search-container,\n      .filter-container {\n        min-width: unset;\n      }\n    }\n  }\n}"] }]