@memberjunction/ng-dashboards 5.22.0 → 5.23.0

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

@@ -13,12 +13,10 @@ import { debounceTime, takeUntil, distinctUntilChanged } from 'rxjs/operators';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-shared";
 import * as i2 from "@angular/forms";
-import * as i3 from "@progress/kendo-angular-buttons";
-import * as i4 from "@progress/kendo-angular-dropdowns";
-import * as i5 from "@progress/kendo-angular-inputs";
-import * as i6 from "@memberjunction/ng-code-editor";
-import * as i7 from "@memberjunction/ng-shared-generic";
-import * as i8 from "@angular/common";
+import * as i3 from "@memberjunction/ng-ui-components";
+import * as i4 from "@memberjunction/ng-code-editor";
+import * as i5 from "@memberjunction/ng-shared-generic";
+import * as i6 from "@angular/common";
 const _c0 = () => ({ text: "All Statuses", value: "all" });
 const _c1 = () => ({ text: "Active", value: "Active" });
 const _c2 = () => ({ text: "Pending", value: "Pending" });
@@ -30,13 +28,10 @@ const _c7 = () => ({ text: "Custom", value: "Custom" });
 const _c8 = (a0, a1, a2) => [a0, a1, a2];
 const _forTrack0 = ($index, $item) => $item.categoryId;
 const _forTrack1 = ($index, $item) => $item.ID;
-function ActionsOverviewComponent_ng_template_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 45);
-} }
-function ActionsOverviewComponent_Conditional_79_For_2_Template(rf, ctx) { if (rf & 1) {
+function ActionsOverviewComponent_Conditional_80_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 47);
-    i0.ɵɵlistener("click", function ActionsOverviewComponent_Conditional_79_For_2_Template_div_click_0_listener() { const category_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.openCategory(category_r2.categoryId)); });
+    i0.ɵɵlistener("click", function ActionsOverviewComponent_Conditional_80_For_2_Template_div_click_0_listener() { const category_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.openCategory(category_r2.categoryId)); });
     i0.ɵɵelementStart(1, "div", 48)(2, "div", 49);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
@@ -65,26 +60,26 @@ function ActionsOverviewComponent_Conditional_79_For_2_Template(rf, ctx) { if (r
     i0.ɵɵadvance(3);
     i0.ɵɵstyleProp("width", category_r2.successRate, "%");
 } }
-function ActionsOverviewComponent_Conditional_79_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 36);
-    i0.ɵɵrepeaterCreate(1, ActionsOverviewComponent_Conditional_79_For_2_Template, 14, 6, "div", 46, _forTrack0);
+function ActionsOverviewComponent_Conditional_80_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 37);
+    i0.ɵɵrepeaterCreate(1, ActionsOverviewComponent_Conditional_80_For_2_Template, 14, 6, "div", 46, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r2.categoryStats);
 } }
-function ActionsOverviewComponent_Conditional_80_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 37);
-    i0.ɵɵelement(1, "i", 34);
+function ActionsOverviewComponent_Conditional_81_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 38);
+    i0.ɵɵelement(1, "i", 35);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No category statistics available");
     i0.ɵɵelementEnd()();
 } }
-function ActionsOverviewComponent_Conditional_87_For_2_Template(rf, ctx) { if (rf & 1) {
+function ActionsOverviewComponent_Conditional_88_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 57);
-    i0.ɵɵlistener("click", function ActionsOverviewComponent_Conditional_87_For_2_Template_div_click_0_listener() { const action_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.openAction(action_r5)); });
+    i0.ɵɵlistener("click", function ActionsOverviewComponent_Conditional_88_For_2_Template_div_click_0_listener() { const action_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.openAction(action_r5)); });
     i0.ɵɵelementStart(1, "div", 58);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
@@ -94,7 +89,7 @@ function ActionsOverviewComponent_Conditional_87_For_2_Template(rf, ctx) { if (r
     i0.ɵɵelementStart(6, "div", 61);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 62)(9, "kendo-chip", 63);
+    i0.ɵɵelementStart(8, "div", 62)(9, "span", 63);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -107,27 +102,27 @@ function ActionsOverviewComponent_Conditional_87_For_2_Template(rf, ctx) { if (r
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(action_r5.Description || "No description");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("themeColor", ctx_r2.getStatusColor(action_r5.Status))("size", "small");
+    i0.ɵɵattribute("data-color", ctx_r2.getStatusColor(action_r5.Status));
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", action_r5.Status, " ");
 } }
-function ActionsOverviewComponent_Conditional_87_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 40);
-    i0.ɵɵrepeaterCreate(1, ActionsOverviewComponent_Conditional_87_For_2_Template, 11, 7, "div", 56, _forTrack1);
+function ActionsOverviewComponent_Conditional_88_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 41);
+    i0.ɵɵrepeaterCreate(1, ActionsOverviewComponent_Conditional_88_For_2_Template, 11, 6, "div", 56, _forTrack1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r2.recentActions);
 } }
-function ActionsOverviewComponent_Conditional_88_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 37);
-    i0.ɵɵelement(1, "i", 11);
+function ActionsOverviewComponent_Conditional_89_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 38);
+    i0.ɵɵelement(1, "i", 12);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No recent actions found");
     i0.ɵɵelementEnd()();
 } }
-function ActionsOverviewComponent_Conditional_95_For_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+function ActionsOverviewComponent_Conditional_96_For_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 73)(1, "div", 74)(2, "h5");
     i0.ɵɵelement(3, "i", 75);
@@ -136,7 +131,7 @@ function ActionsOverviewComponent_Conditional_95_For_2_Conditional_15_Template(r
     i0.ɵɵelement(5, "mj-code-editor", 76);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(6, "div", 77)(7, "button", 78);
-    i0.ɵɵlistener("click", function ActionsOverviewComponent_Conditional_95_For_2_Conditional_15_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r8); const execution_r7 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.openExecution(execution_r7)); });
+    i0.ɵɵlistener("click", function ActionsOverviewComponent_Conditional_96_For_2_Conditional_15_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r8); const execution_r7 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.openExecution(execution_r7)); });
     i0.ɵɵelement(8, "i", 79);
     i0.ɵɵtext(9, " Open Details ");
     i0.ɵɵelementEnd()()();
@@ -146,10 +141,10 @@ function ActionsOverviewComponent_Conditional_95_For_2_Conditional_15_Template(r
     i0.ɵɵadvance(5);
     i0.ɵɵproperty("ngModel", ctx_r2.formatJsonParams(execution_r7.Params))("readonly", true)("language", "json")("lineWrapping", true);
 } }
-function ActionsOverviewComponent_Conditional_95_For_2_Template(rf, ctx) { if (rf & 1) {
+function ActionsOverviewComponent_Conditional_96_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 65)(1, "div", 66);
-    i0.ɵɵlistener("click", function ActionsOverviewComponent_Conditional_95_For_2_Template_div_click_1_listener() { const execution_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.toggleExecutionExpanded(execution_r7)); });
+    i0.ɵɵlistener("click", function ActionsOverviewComponent_Conditional_96_For_2_Template_div_click_1_listener() { const execution_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.toggleExecutionExpanded(execution_r7)); });
     i0.ɵɵelementStart(2, "div", 67);
     i0.ɵɵtext(3);
     i0.ɵɵpipe(4, "date");
@@ -160,26 +155,26 @@ function ActionsOverviewComponent_Conditional_95_For_2_Template(rf, ctx) { if (r
     i0.ɵɵelementStart(8, "div", 70);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "div", 71)(11, "kendo-chip", 63);
+    i0.ɵɵelementStart(10, "div", 71)(11, "span", 63);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(13, "div", 72);
     i0.ɵɵelement(14, "i");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(15, ActionsOverviewComponent_Conditional_95_For_2_Conditional_15_Template, 10, 4, "div", 73);
+    i0.ɵɵconditionalCreate(15, ActionsOverviewComponent_Conditional_96_For_2_Conditional_15_Template, 10, 4, "div", 73);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const execution_r7 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵclassProp("expanded", execution_r7.isExpanded);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(4, 11, execution_r7.StartedAt, "MMM d, HH:mm"), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(4, 10, execution_r7.StartedAt, "MMM d, HH:mm"), " ");
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(execution_r7.Action || "Action ID: " + execution_r7.ActionID);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(execution_r7.User || "User ID: " + execution_r7.UserID);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("themeColor", ctx_r2.isExecutionSuccess(execution_r7) ? "success" : "error")("size", "small");
+    i0.ɵɵattribute("data-color", ctx_r2.isExecutionSuccess(execution_r7) ? "success" : "error");
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", execution_r7.ResultCode || "Unknown", " ");
     i0.ɵɵadvance(2);
@@ -187,24 +182,24 @@ function ActionsOverviewComponent_Conditional_95_For_2_Template(rf, ctx) { if (r
     i0.ɵɵadvance();
     i0.ɵɵconditional(execution_r7.isExpanded ? 15 : -1);
 } }
-function ActionsOverviewComponent_Conditional_95_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 43);
-    i0.ɵɵrepeaterCreate(1, ActionsOverviewComponent_Conditional_95_For_2_Template, 16, 14, "div", 64, _forTrack1);
+function ActionsOverviewComponent_Conditional_96_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 44);
+    i0.ɵɵrepeaterCreate(1, ActionsOverviewComponent_Conditional_96_For_2_Template, 16, 13, "div", 64, _forTrack1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r2.recentExecutions);
 } }
-function ActionsOverviewComponent_Conditional_96_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 37);
-    i0.ɵɵelement(1, "i", 42);
+function ActionsOverviewComponent_Conditional_97_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 38);
+    i0.ɵɵelement(1, "i", 43);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No recent executions found");
     i0.ɵɵelementEnd()();
 } }
-function ActionsOverviewComponent_Conditional_97_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 44);
+function ActionsOverviewComponent_Conditional_98_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 45);
     i0.ɵɵelement(1, "mj-loading", 80);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -471,126 +466,127 @@ let ActionsOverviewComponent = class ActionsOverviewComponent extends BaseResour
         return 'fa-solid fa-bolt';
     }
     static ɵfac = function ActionsOverviewComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ActionsOverviewComponent)(i0.ɵɵdirectiveInject(i1.NavigationService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ActionsOverviewComponent, selectors: [["mj-actions-overview"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 98, vars: 37, consts: [[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", "valuePrimitive", "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, "metric-card", "gallery", "clickable", 3, "click"], [1, "fa-solid", "fa-th"], [1, "fa-solid", "fa-sparkles"], [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", 3, "expanded"], [1, "execution-item"], [1, "execution-header", 3, "click"], [1, "execution-time"], [1, "execution-info"], [1, "execution-action"], [1, "execution-user"], [1, "execution-result"], [1, "execution-expand-icon"], [1, "execution-details"], [1, "params-section"], [1, "fa-solid", "fa-sliders"], [2, "height", "150px", "width", "100%", 3, "ngModel", "readonly", "language", "lineWrapping"], [1, "execution-actions"], ["kendoButton", "", "themeColor", "primary", "size", "small", 3, "click"], [1, "fa-solid", "fa-external-link"], ["size", "medium", 3, "showText"]], 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); });
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ActionsOverviewComponent, selectors: [["mj-actions-overview"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 99, vars: 37, consts: [[1, "actions-overview"], [1, "overview-header"], [1, "filters-row"], [1, "search-container"], [1, "search-input-wrapper"], [1, "fa-solid", "fa-search", "search-icon"], ["type", "text", "placeholder", "Search actions...", 1, "mj-input", 3, "input", "value"], [1, "filter-container"], ["TextField", "text", "ValueField", "value", 3, "ValueChange", "Data", "ValuePrimitive", "ngModel"], [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, "metric-card", "gallery", "clickable", 3, "click"], [1, "fa-solid", "fa-th"], [1, "fa-solid", "fa-sparkles"], [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, "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"], [1, "status-chip"], [1, "execution-item", 3, "expanded"], [1, "execution-item"], [1, "execution-header", 3, "click"], [1, "execution-time"], [1, "execution-info"], [1, "execution-action"], [1, "execution-user"], [1, "execution-result"], [1, "execution-expand-icon"], [1, "execution-details"], [1, "params-section"], [1, "fa-solid", "fa-sliders"], [2, "height", "150px", "width", "100%", 3, "ngModel", "readonly", "language", "lineWrapping"], [1, "execution-actions"], ["mjButton", "", "variant", "primary", "size", "sm", 3, "click"], [1, "fa-solid", "fa-external-link"], ["size", "medium", 3, "showText"]], template: function ActionsOverviewComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "div", 4);
+            i0.ɵɵelement(5, "i", 5);
+            i0.ɵɵelementStart(6, "input", 6);
+            i0.ɵɵlistener("input", function ActionsOverviewComponent_Template_input_input_6_listener($event) { return ctx.onSearchChange($event.target.value); });
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(7, "div", 7)(8, "mj-dropdown", 8);
+            i0.ɵɵlistener("ValueChange", function ActionsOverviewComponent_Template_mj_dropdown_ValueChange_8_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.ɵɵelementStart(9, "div", 7)(10, "mj-dropdown", 8);
+            i0.ɵɵlistener("ValueChange", function ActionsOverviewComponent_Template_mj_dropdown_ValueChange_10_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.ɵɵelementStart(11, "div", 9)(12, "div", 10);
+            i0.ɵɵlistener("click", function ActionsOverviewComponent_Template_div_click_12_listener() { return ctx.onTotalActionsClick(); });
+            i0.ɵɵelementStart(13, "div", 11);
+            i0.ɵɵelement(14, "i", 12);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(14, "div", 12)(15, "div", 13);
-            i0.ɵɵtext(16);
+            i0.ɵɵelementStart(15, "div", 13)(16, "div", 14);
+            i0.ɵɵtext(17);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(17, "div", 14);
-            i0.ɵɵtext(18, "Total Actions");
+            i0.ɵɵelementStart(18, "div", 15);
+            i0.ɵɵtext(19, "Total Actions");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(19, "div", 15)(20, "span", 16);
-            i0.ɵɵtext(21);
+            i0.ɵɵelementStart(20, "div", 16)(21, "span", 17);
+            i0.ɵɵtext(22);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(22, "span", 17);
-            i0.ɵɵtext(23);
+            i0.ɵɵelementStart(23, "span", 18);
+            i0.ɵɵtext(24);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(24, "span", 18);
-            i0.ɵɵtext(25);
+            i0.ɵɵelementStart(25, "span", 19);
+            i0.ɵɵtext(26);
             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.ɵɵelementStart(27, "div", 20);
+            i0.ɵɵlistener("click", function ActionsOverviewComponent_Template_div_click_27_listener() { return ctx.onExecutionsClick(); });
+            i0.ɵɵelementStart(28, "div", 11);
+            i0.ɵɵelement(29, "i", 21);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(29, "div", 12)(30, "div", 13);
-            i0.ɵɵtext(31);
+            i0.ɵɵelementStart(30, "div", 13)(31, "div", 14);
+            i0.ɵɵtext(32);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(32, "div", 14);
-            i0.ɵɵtext(33, "Total Executions");
+            i0.ɵɵelementStart(33, "div", 15);
+            i0.ɵɵtext(34, "Total Executions");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(34, "div", 15)(35, "span", 21);
-            i0.ɵɵtext(36);
+            i0.ɵɵelementStart(35, "div", 16)(36, "span", 22);
+            i0.ɵɵtext(37);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(37, "span", 22);
-            i0.ɵɵtext(38);
+            i0.ɵɵelementStart(38, "span", 23);
+            i0.ɵɵtext(39);
             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.ɵɵelementStart(40, "div", 24);
+            i0.ɵɵlistener("click", function ActionsOverviewComponent_Template_div_click_40_listener() { return ctx.onCategoriesClick(); });
+            i0.ɵɵelementStart(41, "div", 11);
+            i0.ɵɵelement(42, "i", 25);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(42, "div", 12)(43, "div", 13);
-            i0.ɵɵtext(44);
+            i0.ɵɵelementStart(43, "div", 13)(44, "div", 14);
+            i0.ɵɵtext(45);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(45, "div", 14);
-            i0.ɵɵtext(46, "Categories");
+            i0.ɵɵelementStart(46, "div", 15);
+            i0.ɵɵtext(47, "Categories");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(47, "div", 15)(48, "span");
-            i0.ɵɵtext(49, "Organized structure");
+            i0.ɵɵelementStart(48, "div", 16)(49, "span");
+            i0.ɵɵtext(50, "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.ɵɵelementStart(51, "div", 26);
+            i0.ɵɵlistener("click", function ActionsOverviewComponent_Template_div_click_51_listener() { return ctx.onAIGeneratedClick(); });
+            i0.ɵɵelementStart(52, "div", 11);
+            i0.ɵɵelement(53, "i", 27);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(53, "div", 12)(54, "div", 13);
-            i0.ɵɵtext(55);
+            i0.ɵɵelementStart(54, "div", 13)(55, "div", 14);
+            i0.ɵɵtext(56);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(56, "div", 14);
-            i0.ɵɵtext(57, "AI Generated");
+            i0.ɵɵelementStart(57, "div", 15);
+            i0.ɵɵtext(58, "AI Generated");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(58, "div", 15)(59, "span", 27);
-            i0.ɵɵtext(60);
+            i0.ɵɵelementStart(59, "div", 16)(60, "span", 28);
+            i0.ɵɵtext(61);
             i0.ɵɵelementEnd()()()();
-            i0.ɵɵelementStart(61, "div", 28);
-            i0.ɵɵlistener("click", function ActionsOverviewComponent_Template_div_click_61_listener() { return ctx.onActionGalleryClick(); });
-            i0.ɵɵelementStart(62, "div", 10);
-            i0.ɵɵelement(63, "i", 29);
+            i0.ɵɵelementStart(62, "div", 29);
+            i0.ɵɵlistener("click", function ActionsOverviewComponent_Template_div_click_62_listener() { return ctx.onActionGalleryClick(); });
+            i0.ɵɵelementStart(63, "div", 11);
+            i0.ɵɵelement(64, "i", 30);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(64, "div", 12)(65, "div", 13);
-            i0.ɵɵelement(66, "i", 30);
+            i0.ɵɵelementStart(65, "div", 13)(66, "div", 14);
+            i0.ɵɵelement(67, "i", 31);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(67, "div", 14);
-            i0.ɵɵtext(68, "Action Gallery");
+            i0.ɵɵelementStart(68, "div", 15);
+            i0.ɵɵtext(69, "Action Gallery");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(69, "div", 15)(70, "span");
-            i0.ɵɵtext(71, "Visual action browser");
+            i0.ɵɵelementStart(70, "div", 16)(71, "span");
+            i0.ɵɵtext(72, "Visual action browser");
             i0.ɵɵelementEnd()()()()();
-            i0.ɵɵelementStart(72, "div", 31)(73, "div", 32)(74, "div", 33)(75, "h3");
-            i0.ɵɵelement(76, "i", 34);
-            i0.ɵɵtext(77, " Category Performance");
+            i0.ɵɵelementStart(73, "div", 32)(74, "div", 33)(75, "div", 34)(76, "h3");
+            i0.ɵɵelement(77, "i", 35);
+            i0.ɵɵtext(78, " Category Performance");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(78, "div", 35);
-            i0.ɵɵconditionalCreate(79, ActionsOverviewComponent_Conditional_79_Template, 3, 0, "div", 36)(80, ActionsOverviewComponent_Conditional_80_Template, 4, 0, "div", 37);
+            i0.ɵɵelementStart(79, "div", 36);
+            i0.ɵɵconditionalCreate(80, ActionsOverviewComponent_Conditional_80_Template, 3, 0, "div", 37)(81, ActionsOverviewComponent_Conditional_81_Template, 4, 0, "div", 38);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(81, "div", 38)(82, "div", 33)(83, "h3");
-            i0.ɵɵelement(84, "i", 39);
-            i0.ɵɵtext(85, " Recent Actions");
+            i0.ɵɵelementStart(82, "div", 39)(83, "div", 34)(84, "h3");
+            i0.ɵɵelement(85, "i", 40);
+            i0.ɵɵtext(86, " Recent Actions");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(86, "div", 35);
-            i0.ɵɵconditionalCreate(87, ActionsOverviewComponent_Conditional_87_Template, 3, 0, "div", 40)(88, ActionsOverviewComponent_Conditional_88_Template, 4, 0, "div", 37);
+            i0.ɵɵelementStart(87, "div", 36);
+            i0.ɵɵconditionalCreate(88, ActionsOverviewComponent_Conditional_88_Template, 3, 0, "div", 41)(89, ActionsOverviewComponent_Conditional_89_Template, 4, 0, "div", 38);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(89, "div", 41)(90, "div", 33)(91, "h3");
-            i0.ɵɵelement(92, "i", 42);
-            i0.ɵɵtext(93, " Recent Executions");
+            i0.ɵɵelementStart(90, "div", 42)(91, "div", 34)(92, "h3");
+            i0.ɵɵelement(93, "i", 43);
+            i0.ɵɵtext(94, " Recent Executions");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(94, "div", 35);
-            i0.ɵɵconditionalCreate(95, ActionsOverviewComponent_Conditional_95_Template, 3, 0, "div", 43)(96, ActionsOverviewComponent_Conditional_96_Template, 4, 0, "div", 37);
+            i0.ɵɵelementStart(95, "div", 36);
+            i0.ɵɵconditionalCreate(96, ActionsOverviewComponent_Conditional_96_Template, 3, 0, "div", 44)(97, ActionsOverviewComponent_Conditional_97_Template, 4, 0, "div", 38);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵconditionalCreate(97, ActionsOverviewComponent_Conditional_97_Template, 2, 1, "div", 44);
+            i0.ɵɵconditionalCreate(98, ActionsOverviewComponent_Conditional_98_Template, 2, 1, "div", 45);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵadvance(4);
+            i0.ɵɵadvance(6);
             i0.ɵɵproperty("value", ctx.searchTerm$.value);
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("data", i0.ɵɵpureFunction4(25, _c4, i0.ɵɵpureFunction0(21, _c0), i0.ɵɵpureFunction0(22, _c1), i0.ɵɵpureFunction0(23, _c2), i0.ɵɵpureFunction0(24, _c3)))("valuePrimitive", true)("value", ctx.selectedStatus$.value);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("data", i0.ɵɵpureFunction3(33, _c8, i0.ɵɵpureFunction0(30, _c5), i0.ɵɵpureFunction0(31, _c6), i0.ɵɵpureFunction0(32, _c7)))("valuePrimitive", true)("value", ctx.selectedType$.value);
+            i0.ɵɵproperty("Data", i0.ɵɵpureFunction4(25, _c4, i0.ɵɵpureFunction0(21, _c0), i0.ɵɵpureFunction0(22, _c1), i0.ɵɵpureFunction0(23, _c2), i0.ɵɵpureFunction0(24, _c3)))("ValuePrimitive", true)("ngModel", ctx.selectedStatus$.value);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("Data", i0.ɵɵpureFunction3(33, _c8, i0.ɵɵpureFunction0(30, _c5), i0.ɵɵpureFunction0(31, _c6), i0.ɵɵpureFunction0(32, _c7)))("ValuePrimitive", true)("ngModel", ctx.selectedType$.value);
             i0.ɵɵadvance(7);
             i0.ɵɵtextInterpolate(ctx.metrics.totalActions);
             i0.ɵɵadvance(5);
@@ -612,14 +608,14 @@ let ActionsOverviewComponent = class ActionsOverviewComponent extends BaseResour
             i0.ɵɵadvance(5);
             i0.ɵɵtextInterpolate1("", ctx.metrics.customActions, " Custom");
             i0.ɵɵadvance(19);
-            i0.ɵɵconditional(ctx.categoryStats.length > 0 ? 79 : 80);
+            i0.ɵɵconditional(ctx.categoryStats.length > 0 ? 80 : 81);
             i0.ɵɵadvance(8);
-            i0.ɵɵconditional(ctx.recentActions.length > 0 ? 87 : 88);
+            i0.ɵɵconditional(ctx.recentActions.length > 0 ? 88 : 89);
             i0.ɵɵadvance(8);
-            i0.ɵɵconditional(ctx.recentExecutions.length > 0 ? 95 : 96);
+            i0.ɵɵconditional(ctx.recentExecutions.length > 0 ? 96 : 97);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.isLoading ? 97 : -1);
-        } }, dependencies: [i2.NgControlStatus, i2.NgModel, i3.ButtonComponent, i3.ChipComponent, i4.DropDownListComponent, i5.TextBoxComponent, i5.TextBoxPrefixTemplateDirective, i6.CodeEditorComponent, i7.LoadingComponent, i8.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  position: relative; \n\n}\n.actions-overview[_ngcontent-%COMP%]   .overview-header[_ngcontent-%COMP%]   .filters-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  flex-wrap: wrap;\n}\n.actions-overview[_ngcontent-%COMP%]   .overview-header[_ngcontent-%COMP%]   .filters-row[_ngcontent-%COMP%]   .search-container[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 200px;\n}\n.actions-overview[_ngcontent-%COMP%]   .overview-header[_ngcontent-%COMP%]   .filters-row[_ngcontent-%COMP%]   .search-container[_ngcontent-%COMP%]   kendo-textbox[_ngcontent-%COMP%] {\n  width: 100%;\n}\n.actions-overview[_ngcontent-%COMP%]   .overview-header[_ngcontent-%COMP%]   .filters-row[_ngcontent-%COMP%]   .filter-container[_ngcontent-%COMP%] {\n  min-width: 150px;\n}\n.actions-overview[_ngcontent-%COMP%]   .overview-header[_ngcontent-%COMP%]   .filters-row[_ngcontent-%COMP%]   .filter-container[_ngcontent-%COMP%]   kendo-dropdownlist[_ngcontent-%COMP%] {\n  width: 100%;\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n  gap: 1.5rem;\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  padding: 1.5rem;\n  border-radius: var(--mj-radius-lg);\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  box-shadow: var(--mj-shadow-sm);\n  transition: all var(--mj-transition-base);\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card.clickable[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card.clickable[_ngcontent-%COMP%]:hover {\n  transform: translateY(-2px);\n  box-shadow: var(--mj-shadow-md);\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%]   .metric-icon[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 3rem;\n  height: 3rem;\n  border-radius: var(--mj-radius-md);\n  font-size: var(--mj-text-xl);\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%]   .metric-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-inverse);\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%]   .metric-content[_ngcontent-%COMP%] {\n  flex: 1;\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%]   .metric-content[_ngcontent-%COMP%]   .metric-value[_ngcontent-%COMP%] {\n  font-size: 1.75rem;\n  font-weight: var(--mj-font-bold);\n  line-height: var(--mj-leading-none);\n  margin-bottom: 0.25rem;\n  color: var(--mj-text-primary);\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%]   .metric-content[_ngcontent-%COMP%]   .metric-label[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-muted);\n  margin-bottom: 0.5rem;\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%]   .metric-content[_ngcontent-%COMP%]   .metric-breakdown[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.125rem;\n  font-size: var(--mj-text-xs);\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%]   .metric-content[_ngcontent-%COMP%]   .metric-breakdown[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%]   .metric-content[_ngcontent-%COMP%]   .metric-breakdown[_ngcontent-%COMP%]   span.active[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%]   .metric-content[_ngcontent-%COMP%]   .metric-breakdown[_ngcontent-%COMP%]   span.pending[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%]   .metric-content[_ngcontent-%COMP%]   .metric-breakdown[_ngcontent-%COMP%]   span.disabled[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%]   .metric-content[_ngcontent-%COMP%]   .metric-breakdown[_ngcontent-%COMP%]   span.recent[_ngcontent-%COMP%] {\n  color: var(--mj-status-info);\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%]   .metric-content[_ngcontent-%COMP%]   .metric-breakdown[_ngcontent-%COMP%]   span.success-rate[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%]   .metric-content[_ngcontent-%COMP%]   .metric-breakdown[_ngcontent-%COMP%]   span.custom[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card.primary[_ngcontent-%COMP%]   .metric-icon[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card.success[_ngcontent-%COMP%]   .metric-icon[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card.info[_ngcontent-%COMP%]   .metric-icon[_ngcontent-%COMP%] {\n  background: var(--mj-status-info);\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card.warning[_ngcontent-%COMP%]   .metric-icon[_ngcontent-%COMP%] {\n  background: var(--mj-status-warning);\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card.gallery[_ngcontent-%COMP%]   .metric-icon[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-template-rows: auto auto;\n  gap: 1.5rem;\n  flex: 1;\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .panel[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  overflow: hidden;\n  box-shadow: var(--mj-shadow-sm);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .panel[_ngcontent-%COMP%]   .panel-header[_ngcontent-%COMP%] {\n  padding: 1rem 1.5rem;\n  background: var(--mj-bg-surface-elevated);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .panel[_ngcontent-%COMP%]   .panel-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: var(--mj-text-base);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .panel[_ngcontent-%COMP%]   .panel-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .panel[_ngcontent-%COMP%]   .panel-content[_ngcontent-%COMP%] {\n  padding: 1.5rem;\n  height: calc(100% - 60px);\n  overflow-y: auto;\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .category-stats[_ngcontent-%COMP%]   .category-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .category-stats[_ngcontent-%COMP%]   .category-list[_ngcontent-%COMP%]   .category-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  padding: 1rem;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  cursor: pointer;\n  transition: all var(--mj-transition-base);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .category-stats[_ngcontent-%COMP%]   .category-list[_ngcontent-%COMP%]   .category-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-brand-primary);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .category-stats[_ngcontent-%COMP%]   .category-list[_ngcontent-%COMP%]   .category-item[_ngcontent-%COMP%]   .category-info[_ngcontent-%COMP%] {\n  flex: 1;\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .category-stats[_ngcontent-%COMP%]   .category-list[_ngcontent-%COMP%]   .category-item[_ngcontent-%COMP%]   .category-info[_ngcontent-%COMP%]   .category-name[_ngcontent-%COMP%] {\n  font-weight: var(--mj-font-semibold);\n  margin-bottom: 0.25rem;\n  color: var(--mj-text-primary);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .category-stats[_ngcontent-%COMP%]   .category-list[_ngcontent-%COMP%]   .category-item[_ngcontent-%COMP%]   .category-info[_ngcontent-%COMP%]   .category-metrics[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 1rem;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .category-stats[_ngcontent-%COMP%]   .category-list[_ngcontent-%COMP%]   .category-item[_ngcontent-%COMP%]   .category-info[_ngcontent-%COMP%]   .category-metrics[_ngcontent-%COMP%]   .metric.success-rate[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n  font-weight: var(--mj-font-semibold);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .category-stats[_ngcontent-%COMP%]   .category-list[_ngcontent-%COMP%]   .category-item[_ngcontent-%COMP%]   .category-chart[_ngcontent-%COMP%] {\n  width: 60px;\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .category-stats[_ngcontent-%COMP%]   .category-list[_ngcontent-%COMP%]   .category-item[_ngcontent-%COMP%]   .category-chart[_ngcontent-%COMP%]   .progress-bar[_ngcontent-%COMP%] {\n  height: 6px;\n  background: var(--mj-border-default);\n  border-radius: var(--mj-radius-full);\n  overflow: hidden;\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .category-stats[_ngcontent-%COMP%]   .category-list[_ngcontent-%COMP%]   .category-item[_ngcontent-%COMP%]   .category-chart[_ngcontent-%COMP%]   .progress-bar[_ngcontent-%COMP%]   .progress-fill[_ngcontent-%COMP%] {\n  height: 100%;\n  background: var(--mj-status-success);\n  transition: width var(--mj-transition-slow);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-actions[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-actions[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .action-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  padding: 1rem;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  cursor: pointer;\n  transition: all var(--mj-transition-base);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-actions[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .action-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-brand-primary);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-actions[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .action-item[_ngcontent-%COMP%]   .action-icon[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.5rem;\n  height: 2.5rem;\n  border-radius: var(--mj-radius-sm);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-actions[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .action-item[_ngcontent-%COMP%]   .action-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: var(--mj-text-base);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-actions[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .action-item[_ngcontent-%COMP%]   .action-info[_ngcontent-%COMP%] {\n  flex: 1;\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-actions[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .action-item[_ngcontent-%COMP%]   .action-info[_ngcontent-%COMP%]   .action-name[_ngcontent-%COMP%] {\n  font-weight: var(--mj-font-semibold);\n  margin-bottom: 0.25rem;\n  color: var(--mj-text-primary);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-actions[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .action-item[_ngcontent-%COMP%]   .action-info[_ngcontent-%COMP%]   .action-description[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n  line-height: var(--mj-leading-snug);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-actions[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .action-item[_ngcontent-%COMP%]   .action-status[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-executions[_ngcontent-%COMP%] {\n  grid-column: 1/-1;\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-executions[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-executions[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  transition: all var(--mj-transition-base);\n  margin-bottom: 0.5rem;\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-executions[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item.expanded[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-sm);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-executions[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  padding: 1rem;\n  cursor: pointer;\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-executions[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-executions[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-header[_ngcontent-%COMP%]   .execution-time[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n  font-weight: var(--mj-font-semibold);\n  min-width: 80px;\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-executions[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-header[_ngcontent-%COMP%]   .execution-info[_ngcontent-%COMP%] {\n  flex: 1;\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-executions[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-header[_ngcontent-%COMP%]   .execution-info[_ngcontent-%COMP%]   .execution-action[_ngcontent-%COMP%] {\n  font-weight: var(--mj-font-semibold);\n  margin-bottom: 0.25rem;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-executions[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-header[_ngcontent-%COMP%]   .execution-info[_ngcontent-%COMP%]   .execution-user[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-executions[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-header[_ngcontent-%COMP%]   .execution-result[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-executions[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-header[_ngcontent-%COMP%]   .execution-expand-icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-xs);\n  margin-left: 0.5rem;\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-executions[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-details[_ngcontent-%COMP%] {\n  padding: 1rem;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-executions[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-details[_ngcontent-%COMP%]   .params-section[_ngcontent-%COMP%] {\n  margin-bottom: 1rem;\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-executions[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-details[_ngcontent-%COMP%]   .params-section[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n  margin: 0 0 0.5rem 0;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-executions[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-details[_ngcontent-%COMP%]   .params-section[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-xs);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-executions[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-details[_ngcontent-%COMP%]   .execution-actions[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n}\n.actions-overview[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%] {\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(--mj-text-muted);\n}\n.actions-overview[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 2.5rem;\n  margin-bottom: 1rem;\n  opacity: 0.5;\n}\n.actions-overview[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: var(--mj-text-sm);\n}\n.actions-overview[_ngcontent-%COMP%]   .loading-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n\n@media (max-width: 1200px) {\n  .actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n  .actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-executions[_ngcontent-%COMP%] {\n    grid-column: 1;\n  }\n}\n@media (max-width: 768px) {\n  .actions-overview[_ngcontent-%COMP%] {\n    padding: 1rem;\n    gap: 1rem;\n  }\n  .actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n    gap: 1rem;\n  }\n  .actions-overview[_ngcontent-%COMP%]   .overview-header[_ngcontent-%COMP%]   .filters-row[_ngcontent-%COMP%] {\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .actions-overview[_ngcontent-%COMP%]   .overview-header[_ngcontent-%COMP%]   .filters-row[_ngcontent-%COMP%]   .search-container[_ngcontent-%COMP%], \n   .actions-overview[_ngcontent-%COMP%]   .overview-header[_ngcontent-%COMP%]   .filters-row[_ngcontent-%COMP%]   .filter-container[_ngcontent-%COMP%] {\n    min-width: unset;\n  }\n}"] });
+            i0.ɵɵconditional(ctx.isLoading ? 98 : -1);
+        } }, dependencies: [i2.NgControlStatus, i2.NgModel, i3.MJButtonDirective, i3.MJDropdownComponent, i4.CodeEditorComponent, i5.LoadingComponent, 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  position: relative; \n\n}\n.actions-overview[_ngcontent-%COMP%]   .overview-header[_ngcontent-%COMP%]   .filters-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  flex-wrap: wrap;\n}\n.actions-overview[_ngcontent-%COMP%]   .overview-header[_ngcontent-%COMP%]   .filters-row[_ngcontent-%COMP%]   .search-container[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 200px;\n}\n.actions-overview[_ngcontent-%COMP%]   .overview-header[_ngcontent-%COMP%]   .filters-row[_ngcontent-%COMP%]   .filter-container[_ngcontent-%COMP%] {\n  min-width: 150px;\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n  gap: 1.5rem;\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  padding: 1.5rem;\n  border-radius: var(--mj-radius-lg);\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  box-shadow: var(--mj-shadow-sm);\n  transition: all var(--mj-transition-base);\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card.clickable[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card.clickable[_ngcontent-%COMP%]:hover {\n  transform: translateY(-2px);\n  box-shadow: var(--mj-shadow-md);\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%]   .metric-icon[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 3rem;\n  height: 3rem;\n  border-radius: var(--mj-radius-md);\n  font-size: var(--mj-text-xl);\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%]   .metric-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-inverse);\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%]   .metric-content[_ngcontent-%COMP%] {\n  flex: 1;\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%]   .metric-content[_ngcontent-%COMP%]   .metric-value[_ngcontent-%COMP%] {\n  font-size: 1.75rem;\n  font-weight: var(--mj-font-bold);\n  line-height: var(--mj-leading-none);\n  margin-bottom: 0.25rem;\n  color: var(--mj-text-primary);\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%]   .metric-content[_ngcontent-%COMP%]   .metric-label[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-muted);\n  margin-bottom: 0.5rem;\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%]   .metric-content[_ngcontent-%COMP%]   .metric-breakdown[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.125rem;\n  font-size: var(--mj-text-xs);\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%]   .metric-content[_ngcontent-%COMP%]   .metric-breakdown[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%]   .metric-content[_ngcontent-%COMP%]   .metric-breakdown[_ngcontent-%COMP%]   span.active[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%]   .metric-content[_ngcontent-%COMP%]   .metric-breakdown[_ngcontent-%COMP%]   span.pending[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%]   .metric-content[_ngcontent-%COMP%]   .metric-breakdown[_ngcontent-%COMP%]   span.disabled[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%]   .metric-content[_ngcontent-%COMP%]   .metric-breakdown[_ngcontent-%COMP%]   span.recent[_ngcontent-%COMP%] {\n  color: var(--mj-status-info);\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%]   .metric-content[_ngcontent-%COMP%]   .metric-breakdown[_ngcontent-%COMP%]   span.success-rate[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card[_ngcontent-%COMP%]   .metric-content[_ngcontent-%COMP%]   .metric-breakdown[_ngcontent-%COMP%]   span.custom[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card.primary[_ngcontent-%COMP%]   .metric-icon[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card.success[_ngcontent-%COMP%]   .metric-icon[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card.info[_ngcontent-%COMP%]   .metric-icon[_ngcontent-%COMP%] {\n  background: var(--mj-status-info);\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card.warning[_ngcontent-%COMP%]   .metric-icon[_ngcontent-%COMP%] {\n  background: var(--mj-status-warning);\n}\n.actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%]   .metric-card.gallery[_ngcontent-%COMP%]   .metric-icon[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-template-rows: auto auto;\n  gap: 1.5rem;\n  flex: 1;\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .panel[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  overflow: hidden;\n  box-shadow: var(--mj-shadow-sm);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .panel[_ngcontent-%COMP%]   .panel-header[_ngcontent-%COMP%] {\n  padding: 1rem 1.5rem;\n  background: var(--mj-bg-surface-elevated);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .panel[_ngcontent-%COMP%]   .panel-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: var(--mj-text-base);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .panel[_ngcontent-%COMP%]   .panel-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .panel[_ngcontent-%COMP%]   .panel-content[_ngcontent-%COMP%] {\n  padding: 1.5rem;\n  height: calc(100% - 60px);\n  overflow-y: auto;\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .category-stats[_ngcontent-%COMP%]   .category-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .category-stats[_ngcontent-%COMP%]   .category-list[_ngcontent-%COMP%]   .category-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  padding: 1rem;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  cursor: pointer;\n  transition: all var(--mj-transition-base);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .category-stats[_ngcontent-%COMP%]   .category-list[_ngcontent-%COMP%]   .category-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-brand-primary);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .category-stats[_ngcontent-%COMP%]   .category-list[_ngcontent-%COMP%]   .category-item[_ngcontent-%COMP%]   .category-info[_ngcontent-%COMP%] {\n  flex: 1;\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .category-stats[_ngcontent-%COMP%]   .category-list[_ngcontent-%COMP%]   .category-item[_ngcontent-%COMP%]   .category-info[_ngcontent-%COMP%]   .category-name[_ngcontent-%COMP%] {\n  font-weight: var(--mj-font-semibold);\n  margin-bottom: 0.25rem;\n  color: var(--mj-text-primary);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .category-stats[_ngcontent-%COMP%]   .category-list[_ngcontent-%COMP%]   .category-item[_ngcontent-%COMP%]   .category-info[_ngcontent-%COMP%]   .category-metrics[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 1rem;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .category-stats[_ngcontent-%COMP%]   .category-list[_ngcontent-%COMP%]   .category-item[_ngcontent-%COMP%]   .category-info[_ngcontent-%COMP%]   .category-metrics[_ngcontent-%COMP%]   .metric.success-rate[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n  font-weight: var(--mj-font-semibold);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .category-stats[_ngcontent-%COMP%]   .category-list[_ngcontent-%COMP%]   .category-item[_ngcontent-%COMP%]   .category-chart[_ngcontent-%COMP%] {\n  width: 60px;\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .category-stats[_ngcontent-%COMP%]   .category-list[_ngcontent-%COMP%]   .category-item[_ngcontent-%COMP%]   .category-chart[_ngcontent-%COMP%]   .progress-bar[_ngcontent-%COMP%] {\n  height: 6px;\n  background: var(--mj-border-default);\n  border-radius: var(--mj-radius-full);\n  overflow: hidden;\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .category-stats[_ngcontent-%COMP%]   .category-list[_ngcontent-%COMP%]   .category-item[_ngcontent-%COMP%]   .category-chart[_ngcontent-%COMP%]   .progress-bar[_ngcontent-%COMP%]   .progress-fill[_ngcontent-%COMP%] {\n  height: 100%;\n  background: var(--mj-status-success);\n  transition: width var(--mj-transition-slow);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-actions[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-actions[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .action-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  padding: 1rem;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  cursor: pointer;\n  transition: all var(--mj-transition-base);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-actions[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .action-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-brand-primary);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-actions[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .action-item[_ngcontent-%COMP%]   .action-icon[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.5rem;\n  height: 2.5rem;\n  border-radius: var(--mj-radius-sm);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-actions[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .action-item[_ngcontent-%COMP%]   .action-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: var(--mj-text-base);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-actions[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .action-item[_ngcontent-%COMP%]   .action-info[_ngcontent-%COMP%] {\n  flex: 1;\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-actions[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .action-item[_ngcontent-%COMP%]   .action-info[_ngcontent-%COMP%]   .action-name[_ngcontent-%COMP%] {\n  font-weight: var(--mj-font-semibold);\n  margin-bottom: 0.25rem;\n  color: var(--mj-text-primary);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-actions[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .action-item[_ngcontent-%COMP%]   .action-info[_ngcontent-%COMP%]   .action-description[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n  line-height: var(--mj-leading-snug);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-actions[_ngcontent-%COMP%]   .actions-list[_ngcontent-%COMP%]   .action-item[_ngcontent-%COMP%]   .action-status[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-executions[_ngcontent-%COMP%] {\n  grid-column: 1/-1;\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-executions[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-executions[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  transition: all var(--mj-transition-base);\n  margin-bottom: 0.5rem;\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-executions[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item.expanded[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-sm);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-executions[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  padding: 1rem;\n  cursor: pointer;\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-executions[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-executions[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-header[_ngcontent-%COMP%]   .execution-time[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n  font-weight: var(--mj-font-semibold);\n  min-width: 80px;\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-executions[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-header[_ngcontent-%COMP%]   .execution-info[_ngcontent-%COMP%] {\n  flex: 1;\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-executions[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-header[_ngcontent-%COMP%]   .execution-info[_ngcontent-%COMP%]   .execution-action[_ngcontent-%COMP%] {\n  font-weight: var(--mj-font-semibold);\n  margin-bottom: 0.25rem;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-executions[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-header[_ngcontent-%COMP%]   .execution-info[_ngcontent-%COMP%]   .execution-user[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-executions[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-header[_ngcontent-%COMP%]   .execution-result[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-executions[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-header[_ngcontent-%COMP%]   .execution-expand-icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-xs);\n  margin-left: 0.5rem;\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-executions[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-details[_ngcontent-%COMP%] {\n  padding: 1rem;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-executions[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-details[_ngcontent-%COMP%]   .params-section[_ngcontent-%COMP%] {\n  margin-bottom: 1rem;\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-executions[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-details[_ngcontent-%COMP%]   .params-section[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n  margin: 0 0 0.5rem 0;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-executions[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-details[_ngcontent-%COMP%]   .params-section[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-xs);\n}\n.actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-executions[_ngcontent-%COMP%]   .executions-list[_ngcontent-%COMP%]   .execution-item[_ngcontent-%COMP%]   .execution-details[_ngcontent-%COMP%]   .execution-actions[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n}\n.actions-overview[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%] {\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(--mj-text-muted);\n}\n.actions-overview[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 2.5rem;\n  margin-bottom: 1rem;\n  opacity: 0.5;\n}\n.actions-overview[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: var(--mj-text-sm);\n}\n.actions-overview[_ngcontent-%COMP%]   .loading-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n\n@media (max-width: 1200px) {\n  .actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n  .actions-overview[_ngcontent-%COMP%]   .content-grid[_ngcontent-%COMP%]   .recent-executions[_ngcontent-%COMP%] {\n    grid-column: 1;\n  }\n}\n@media (max-width: 768px) {\n  .actions-overview[_ngcontent-%COMP%] {\n    padding: 1rem;\n    gap: 1rem;\n  }\n  .actions-overview[_ngcontent-%COMP%]   .metrics-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n    gap: 1rem;\n  }\n  .actions-overview[_ngcontent-%COMP%]   .overview-header[_ngcontent-%COMP%]   .filters-row[_ngcontent-%COMP%] {\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .actions-overview[_ngcontent-%COMP%]   .overview-header[_ngcontent-%COMP%]   .filters-row[_ngcontent-%COMP%]   .search-container[_ngcontent-%COMP%], \n   .actions-overview[_ngcontent-%COMP%]   .overview-header[_ngcontent-%COMP%]   .filters-row[_ngcontent-%COMP%]   .filter-container[_ngcontent-%COMP%] {\n    min-width: unset;\n  }\n}"] });
 };
 ActionsOverviewComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'ActionsOverviewResource')
@@ -627,7 +623,7 @@ ActionsOverviewComponent = __decorate([
 export { ActionsOverviewComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ActionsOverviewComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-actions-overview', template: "<div class=\"actions-overview\" >\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          [valuePrimitive]=\"true\"\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          [valuePrimitive]=\"true\"\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    \n    <div class=\"metric-card gallery clickable\" (click)=\"onActionGalleryClick()\">\n      <div class=\"metric-icon\">\n        <i class=\"fa-solid fa-th\"></i>\n      </div>\n      <div class=\"metric-content\">\n        <div class=\"metric-value\">\n          <i class=\"fa-solid fa-sparkles\"></i>\n        </div>\n        <div class=\"metric-label\">Action Gallery</div>\n        <div class=\"metric-breakdown\">\n          <span>Visual action browser</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]=\"getActionIcon(action)\"></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\" [class.expanded]=\"execution.isExpanded\">\n                <div class=\"execution-header\" (click)=\"toggleExecutionExpanded(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\">{{ execution.Action || 'Action ID: ' + execution.ActionID }}</div>\n                    <div class=\"execution-user\">{{ execution.User || 'User ID: ' + execution.UserID }}</div>\n                  </div>\n                  <div class=\"execution-result\">\n                    <kendo-chip \n                      [themeColor]=\"isExecutionSuccess(execution) ? 'success' : 'error'\"\n                      [size]=\"'small'\">\n                      {{ execution.ResultCode || 'Unknown' }}\n                    </kendo-chip>\n                  </div>\n                  <div class=\"execution-expand-icon\">\n                    <i [class]=\"execution.isExpanded ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'\"></i>\n                  </div>\n                </div>\n                @if (execution.isExpanded) {\n                  <div class=\"execution-details\">\n                    <div class=\"params-section\">\n                      <h5><i class=\"fa-solid fa-sliders\"></i> Parameters</h5>\n                      <mj-code-editor \n                        [ngModel]=\"formatJsonParams(execution.Params)\"\n                        [readonly]=\"true\"\n                        [language]=\"'json'\"\n                        [lineWrapping]=\"true\"\n                        style=\"height: 150px; width: 100%;\">\n                      </mj-code-editor>\n                    </div>\n                    <div class=\"execution-actions\">\n                      <button kendoButton \n                        themeColor=\"primary\" \n                        size=\"small\"\n                        (click)=\"openExecution(execution)\">\n                        <i class=\"fa-solid fa-external-link\"></i> Open Details\n                      </button>\n                    </div>\n                  </div>\n                }\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      <mj-loading [showText]=\"false\" size=\"medium\"></mj-loading>\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  position: relative; /* Required for scoped loading overlay */\n}\n.actions-overview .overview-header .filters-row {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  flex-wrap: wrap;\n}\n.actions-overview .overview-header .filters-row .search-container {\n  flex: 1;\n  min-width: 200px;\n}\n.actions-overview .overview-header .filters-row .search-container kendo-textbox {\n  width: 100%;\n}\n.actions-overview .overview-header .filters-row .filter-container {\n  min-width: 150px;\n}\n.actions-overview .overview-header .filters-row .filter-container kendo-dropdownlist {\n  width: 100%;\n}\n.actions-overview .metrics-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n  gap: 1.5rem;\n}\n.actions-overview .metrics-grid .metric-card {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  padding: 1.5rem;\n  border-radius: var(--mj-radius-lg);\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  box-shadow: var(--mj-shadow-sm);\n  transition: all var(--mj-transition-base);\n}\n.actions-overview .metrics-grid .metric-card.clickable {\n  cursor: pointer;\n}\n.actions-overview .metrics-grid .metric-card.clickable:hover {\n  transform: translateY(-2px);\n  box-shadow: var(--mj-shadow-md);\n}\n.actions-overview .metrics-grid .metric-card .metric-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 3rem;\n  height: 3rem;\n  border-radius: var(--mj-radius-md);\n  font-size: var(--mj-text-xl);\n}\n.actions-overview .metrics-grid .metric-card .metric-icon i {\n  color: var(--mj-text-inverse);\n}\n.actions-overview .metrics-grid .metric-card .metric-content {\n  flex: 1;\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-value {\n  font-size: 1.75rem;\n  font-weight: var(--mj-font-bold);\n  line-height: var(--mj-leading-none);\n  margin-bottom: 0.25rem;\n  color: var(--mj-text-primary);\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-label {\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-muted);\n  margin-bottom: 0.5rem;\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-breakdown {\n  display: flex;\n  flex-direction: column;\n  gap: 0.125rem;\n  font-size: var(--mj-text-xs);\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-breakdown span {\n  color: var(--mj-text-muted);\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-breakdown span.active {\n  color: var(--mj-status-success);\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-breakdown span.pending {\n  color: var(--mj-status-warning);\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-breakdown span.disabled {\n  color: var(--mj-status-error);\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-breakdown span.recent {\n  color: var(--mj-status-info);\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-breakdown span.success-rate {\n  color: var(--mj-status-success);\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-breakdown span.custom {\n  color: var(--mj-brand-primary);\n}\n.actions-overview .metrics-grid .metric-card.primary .metric-icon {\n  background: var(--mj-brand-primary);\n}\n.actions-overview .metrics-grid .metric-card.success .metric-icon {\n  background: var(--mj-status-success);\n}\n.actions-overview .metrics-grid .metric-card.info .metric-icon {\n  background: var(--mj-status-info);\n}\n.actions-overview .metrics-grid .metric-card.warning .metric-icon {\n  background: var(--mj-status-warning);\n}\n.actions-overview .metrics-grid .metric-card.gallery .metric-icon {\n  background: var(--mj-brand-primary);\n}\n.actions-overview .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.actions-overview .content-grid .panel {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  overflow: hidden;\n  box-shadow: var(--mj-shadow-sm);\n}\n.actions-overview .content-grid .panel .panel-header {\n  padding: 1rem 1.5rem;\n  background: var(--mj-bg-surface-elevated);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n.actions-overview .content-grid .panel .panel-header h3 {\n  margin: 0;\n  font-size: var(--mj-text-base);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.actions-overview .content-grid .panel .panel-header h3 i {\n  color: var(--mj-brand-primary);\n}\n.actions-overview .content-grid .panel .panel-content {\n  padding: 1.5rem;\n  height: calc(100% - 60px);\n  overflow-y: auto;\n}\n.actions-overview .content-grid .category-stats .category-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n.actions-overview .content-grid .category-stats .category-list .category-item {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  padding: 1rem;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  cursor: pointer;\n  transition: all var(--mj-transition-base);\n}\n.actions-overview .content-grid .category-stats .category-list .category-item:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-brand-primary);\n}\n.actions-overview .content-grid .category-stats .category-list .category-item .category-info {\n  flex: 1;\n}\n.actions-overview .content-grid .category-stats .category-list .category-item .category-info .category-name {\n  font-weight: var(--mj-font-semibold);\n  margin-bottom: 0.25rem;\n  color: var(--mj-text-primary);\n}\n.actions-overview .content-grid .category-stats .category-list .category-item .category-info .category-metrics {\n  display: flex;\n  gap: 1rem;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n.actions-overview .content-grid .category-stats .category-list .category-item .category-info .category-metrics .metric.success-rate {\n  color: var(--mj-status-success);\n  font-weight: var(--mj-font-semibold);\n}\n.actions-overview .content-grid .category-stats .category-list .category-item .category-chart {\n  width: 60px;\n}\n.actions-overview .content-grid .category-stats .category-list .category-item .category-chart .progress-bar {\n  height: 6px;\n  background: var(--mj-border-default);\n  border-radius: var(--mj-radius-full);\n  overflow: hidden;\n}\n.actions-overview .content-grid .category-stats .category-list .category-item .category-chart .progress-bar .progress-fill {\n  height: 100%;\n  background: var(--mj-status-success);\n  transition: width var(--mj-transition-slow);\n}\n.actions-overview .content-grid .recent-actions .actions-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n.actions-overview .content-grid .recent-actions .actions-list .action-item {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  padding: 1rem;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  cursor: pointer;\n  transition: all var(--mj-transition-base);\n}\n.actions-overview .content-grid .recent-actions .actions-list .action-item:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-brand-primary);\n}\n.actions-overview .content-grid .recent-actions .actions-list .action-item .action-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.5rem;\n  height: 2.5rem;\n  border-radius: var(--mj-radius-sm);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n.actions-overview .content-grid .recent-actions .actions-list .action-item .action-icon i {\n  color: var(--mj-brand-primary);\n  font-size: var(--mj-text-base);\n}\n.actions-overview .content-grid .recent-actions .actions-list .action-item .action-info {\n  flex: 1;\n}\n.actions-overview .content-grid .recent-actions .actions-list .action-item .action-info .action-name {\n  font-weight: var(--mj-font-semibold);\n  margin-bottom: 0.25rem;\n  color: var(--mj-text-primary);\n}\n.actions-overview .content-grid .recent-actions .actions-list .action-item .action-info .action-description {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n  line-height: var(--mj-leading-snug);\n}\n.actions-overview .content-grid .recent-actions .actions-list .action-item .action-status {\n  flex-shrink: 0;\n}\n.actions-overview .content-grid .recent-executions {\n  grid-column: 1/-1;\n}\n.actions-overview .content-grid .recent-executions .executions-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  transition: all var(--mj-transition-base);\n  margin-bottom: 0.5rem;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item.expanded {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-sm);\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-header {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  padding: 1rem;\n  cursor: pointer;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-header:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-header .execution-time {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n  font-weight: var(--mj-font-semibold);\n  min-width: 80px;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-header .execution-info {\n  flex: 1;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-header .execution-info .execution-action {\n  font-weight: var(--mj-font-semibold);\n  margin-bottom: 0.25rem;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-header .execution-info .execution-user {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-header .execution-result {\n  flex-shrink: 0;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-header .execution-expand-icon {\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-xs);\n  margin-left: 0.5rem;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-details {\n  padding: 1rem;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-details .params-section {\n  margin-bottom: 1rem;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-details .params-section h5 {\n  margin: 0 0 0.5rem 0;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-details .params-section h5 i {\n  font-size: var(--mj-text-xs);\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-details .execution-actions {\n  display: flex;\n  justify-content: flex-end;\n}\n.actions-overview .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(--mj-text-muted);\n}\n.actions-overview .empty-state i {\n  font-size: 2.5rem;\n  margin-bottom: 1rem;\n  opacity: 0.5;\n}\n.actions-overview .empty-state p {\n  margin: 0;\n  font-size: var(--mj-text-sm);\n}\n.actions-overview .loading-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n\n@media (max-width: 1200px) {\n  .actions-overview .content-grid {\n    grid-template-columns: 1fr;\n  }\n  .actions-overview .content-grid .recent-executions {\n    grid-column: 1;\n  }\n}\n@media (max-width: 768px) {\n  .actions-overview {\n    padding: 1rem;\n    gap: 1rem;\n  }\n  .actions-overview .metrics-grid {\n    grid-template-columns: 1fr;\n    gap: 1rem;\n  }\n  .actions-overview .overview-header .filters-row {\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .actions-overview .overview-header .filters-row .search-container,\n  .actions-overview .overview-header .filters-row .filter-container {\n    min-width: unset;\n  }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-actions-overview', template: "<div class=\"actions-overview\" >\n  <!-- Header with search and filters -->\n  <div class=\"overview-header\">\n    <div class=\"filters-row\">\n      <div class=\"search-container\">\n        <div class=\"search-input-wrapper\">\n          <i class=\"fa-solid fa-search search-icon\"></i>\n          <input type=\"text\" class=\"mj-input\"\n            placeholder=\"Search actions...\"\n            [value]=\"searchTerm$.value\"\n            (input)=\"onSearchChange($any($event.target).value)\" />\n        </div>\n      </div>\n      \n      <div class=\"filter-container\">\n        <mj-dropdown\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          [ValuePrimitive]=\"true\"\n          [ngModel]=\"selectedStatus$.value\"\n          (ValueChange)=\"onStatusFilterChange($any($event))\">\n        </mj-dropdown>\n      </div>\n      \n      <div class=\"filter-container\">\n        <mj-dropdown\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          [ValuePrimitive]=\"true\"\n          [ngModel]=\"selectedType$.value\"\n          (ValueChange)=\"onTypeFilterChange($any($event))\">\n        </mj-dropdown>\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    \n    <div class=\"metric-card gallery clickable\" (click)=\"onActionGalleryClick()\">\n      <div class=\"metric-icon\">\n        <i class=\"fa-solid fa-th\"></i>\n      </div>\n      <div class=\"metric-content\">\n        <div class=\"metric-value\">\n          <i class=\"fa-solid fa-sparkles\"></i>\n        </div>\n        <div class=\"metric-label\">Action Gallery</div>\n        <div class=\"metric-breakdown\">\n          <span>Visual action browser</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]=\"getActionIcon(action)\"></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                  <span class=\"status-chip\" [attr.data-color]=\"getStatusColor(action.Status)\">\n                    {{ action.Status }}\n                  </span>\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\" [class.expanded]=\"execution.isExpanded\">\n                <div class=\"execution-header\" (click)=\"toggleExecutionExpanded(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\">{{ execution.Action || 'Action ID: ' + execution.ActionID }}</div>\n                    <div class=\"execution-user\">{{ execution.User || 'User ID: ' + execution.UserID }}</div>\n                  </div>\n                  <div class=\"execution-result\">\n                    <span class=\"status-chip\" [attr.data-color]=\"isExecutionSuccess(execution) ? 'success' : 'error'\">\n                      {{ execution.ResultCode || 'Unknown' }}\n                    </span>\n                  </div>\n                  <div class=\"execution-expand-icon\">\n                    <i [class]=\"execution.isExpanded ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'\"></i>\n                  </div>\n                </div>\n                @if (execution.isExpanded) {\n                  <div class=\"execution-details\">\n                    <div class=\"params-section\">\n                      <h5><i class=\"fa-solid fa-sliders\"></i> Parameters</h5>\n                      <mj-code-editor \n                        [ngModel]=\"formatJsonParams(execution.Params)\"\n                        [readonly]=\"true\"\n                        [language]=\"'json'\"\n                        [lineWrapping]=\"true\"\n                        style=\"height: 150px; width: 100%;\">\n                      </mj-code-editor>\n                    </div>\n                    <div class=\"execution-actions\">\n                      <button mjButton\n                        variant=\"primary\"\n                        size=\"sm\"\n                        (click)=\"openExecution(execution)\">\n                        <i class=\"fa-solid fa-external-link\"></i> Open Details\n                      </button>\n                    </div>\n                  </div>\n                }\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      <mj-loading [showText]=\"false\" size=\"medium\"></mj-loading>\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  position: relative; /* Required for scoped loading overlay */\n}\n.actions-overview .overview-header .filters-row {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  flex-wrap: wrap;\n}\n.actions-overview .overview-header .filters-row .search-container {\n  flex: 1;\n  min-width: 200px;\n}\n.actions-overview .overview-header .filters-row .filter-container {\n  min-width: 150px;\n}\n.actions-overview .metrics-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n  gap: 1.5rem;\n}\n.actions-overview .metrics-grid .metric-card {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  padding: 1.5rem;\n  border-radius: var(--mj-radius-lg);\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  box-shadow: var(--mj-shadow-sm);\n  transition: all var(--mj-transition-base);\n}\n.actions-overview .metrics-grid .metric-card.clickable {\n  cursor: pointer;\n}\n.actions-overview .metrics-grid .metric-card.clickable:hover {\n  transform: translateY(-2px);\n  box-shadow: var(--mj-shadow-md);\n}\n.actions-overview .metrics-grid .metric-card .metric-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 3rem;\n  height: 3rem;\n  border-radius: var(--mj-radius-md);\n  font-size: var(--mj-text-xl);\n}\n.actions-overview .metrics-grid .metric-card .metric-icon i {\n  color: var(--mj-text-inverse);\n}\n.actions-overview .metrics-grid .metric-card .metric-content {\n  flex: 1;\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-value {\n  font-size: 1.75rem;\n  font-weight: var(--mj-font-bold);\n  line-height: var(--mj-leading-none);\n  margin-bottom: 0.25rem;\n  color: var(--mj-text-primary);\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-label {\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-muted);\n  margin-bottom: 0.5rem;\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-breakdown {\n  display: flex;\n  flex-direction: column;\n  gap: 0.125rem;\n  font-size: var(--mj-text-xs);\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-breakdown span {\n  color: var(--mj-text-muted);\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-breakdown span.active {\n  color: var(--mj-status-success);\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-breakdown span.pending {\n  color: var(--mj-status-warning);\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-breakdown span.disabled {\n  color: var(--mj-status-error);\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-breakdown span.recent {\n  color: var(--mj-status-info);\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-breakdown span.success-rate {\n  color: var(--mj-status-success);\n}\n.actions-overview .metrics-grid .metric-card .metric-content .metric-breakdown span.custom {\n  color: var(--mj-brand-primary);\n}\n.actions-overview .metrics-grid .metric-card.primary .metric-icon {\n  background: var(--mj-brand-primary);\n}\n.actions-overview .metrics-grid .metric-card.success .metric-icon {\n  background: var(--mj-status-success);\n}\n.actions-overview .metrics-grid .metric-card.info .metric-icon {\n  background: var(--mj-status-info);\n}\n.actions-overview .metrics-grid .metric-card.warning .metric-icon {\n  background: var(--mj-status-warning);\n}\n.actions-overview .metrics-grid .metric-card.gallery .metric-icon {\n  background: var(--mj-brand-primary);\n}\n.actions-overview .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.actions-overview .content-grid .panel {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg);\n  overflow: hidden;\n  box-shadow: var(--mj-shadow-sm);\n}\n.actions-overview .content-grid .panel .panel-header {\n  padding: 1rem 1.5rem;\n  background: var(--mj-bg-surface-elevated);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n.actions-overview .content-grid .panel .panel-header h3 {\n  margin: 0;\n  font-size: var(--mj-text-base);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.actions-overview .content-grid .panel .panel-header h3 i {\n  color: var(--mj-brand-primary);\n}\n.actions-overview .content-grid .panel .panel-content {\n  padding: 1.5rem;\n  height: calc(100% - 60px);\n  overflow-y: auto;\n}\n.actions-overview .content-grid .category-stats .category-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n.actions-overview .content-grid .category-stats .category-list .category-item {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  padding: 1rem;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  cursor: pointer;\n  transition: all var(--mj-transition-base);\n}\n.actions-overview .content-grid .category-stats .category-list .category-item:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-brand-primary);\n}\n.actions-overview .content-grid .category-stats .category-list .category-item .category-info {\n  flex: 1;\n}\n.actions-overview .content-grid .category-stats .category-list .category-item .category-info .category-name {\n  font-weight: var(--mj-font-semibold);\n  margin-bottom: 0.25rem;\n  color: var(--mj-text-primary);\n}\n.actions-overview .content-grid .category-stats .category-list .category-item .category-info .category-metrics {\n  display: flex;\n  gap: 1rem;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n.actions-overview .content-grid .category-stats .category-list .category-item .category-info .category-metrics .metric.success-rate {\n  color: var(--mj-status-success);\n  font-weight: var(--mj-font-semibold);\n}\n.actions-overview .content-grid .category-stats .category-list .category-item .category-chart {\n  width: 60px;\n}\n.actions-overview .content-grid .category-stats .category-list .category-item .category-chart .progress-bar {\n  height: 6px;\n  background: var(--mj-border-default);\n  border-radius: var(--mj-radius-full);\n  overflow: hidden;\n}\n.actions-overview .content-grid .category-stats .category-list .category-item .category-chart .progress-bar .progress-fill {\n  height: 100%;\n  background: var(--mj-status-success);\n  transition: width var(--mj-transition-slow);\n}\n.actions-overview .content-grid .recent-actions .actions-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n.actions-overview .content-grid .recent-actions .actions-list .action-item {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  padding: 1rem;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  cursor: pointer;\n  transition: all var(--mj-transition-base);\n}\n.actions-overview .content-grid .recent-actions .actions-list .action-item:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-brand-primary);\n}\n.actions-overview .content-grid .recent-actions .actions-list .action-item .action-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.5rem;\n  height: 2.5rem;\n  border-radius: var(--mj-radius-sm);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n.actions-overview .content-grid .recent-actions .actions-list .action-item .action-icon i {\n  color: var(--mj-brand-primary);\n  font-size: var(--mj-text-base);\n}\n.actions-overview .content-grid .recent-actions .actions-list .action-item .action-info {\n  flex: 1;\n}\n.actions-overview .content-grid .recent-actions .actions-list .action-item .action-info .action-name {\n  font-weight: var(--mj-font-semibold);\n  margin-bottom: 0.25rem;\n  color: var(--mj-text-primary);\n}\n.actions-overview .content-grid .recent-actions .actions-list .action-item .action-info .action-description {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n  line-height: var(--mj-leading-snug);\n}\n.actions-overview .content-grid .recent-actions .actions-list .action-item .action-status {\n  flex-shrink: 0;\n}\n.actions-overview .content-grid .recent-executions {\n  grid-column: 1/-1;\n}\n.actions-overview .content-grid .recent-executions .executions-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  transition: all var(--mj-transition-base);\n  margin-bottom: 0.5rem;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item.expanded {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-sm);\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-header {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  padding: 1rem;\n  cursor: pointer;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-header:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-header .execution-time {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n  font-weight: var(--mj-font-semibold);\n  min-width: 80px;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-header .execution-info {\n  flex: 1;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-header .execution-info .execution-action {\n  font-weight: var(--mj-font-semibold);\n  margin-bottom: 0.25rem;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-primary);\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-header .execution-info .execution-user {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-header .execution-result {\n  flex-shrink: 0;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-header .execution-expand-icon {\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-xs);\n  margin-left: 0.5rem;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-details {\n  padding: 1rem;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-details .params-section {\n  margin-bottom: 1rem;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-details .params-section h5 {\n  margin: 0 0 0.5rem 0;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-details .params-section h5 i {\n  font-size: var(--mj-text-xs);\n}\n.actions-overview .content-grid .recent-executions .executions-list .execution-item .execution-details .execution-actions {\n  display: flex;\n  justify-content: flex-end;\n}\n.actions-overview .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(--mj-text-muted);\n}\n.actions-overview .empty-state i {\n  font-size: 2.5rem;\n  margin-bottom: 1rem;\n  opacity: 0.5;\n}\n.actions-overview .empty-state p {\n  margin: 0;\n  font-size: var(--mj-text-sm);\n}\n.actions-overview .loading-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n}\n\n@media (max-width: 1200px) {\n  .actions-overview .content-grid {\n    grid-template-columns: 1fr;\n  }\n  .actions-overview .content-grid .recent-executions {\n    grid-column: 1;\n  }\n}\n@media (max-width: 768px) {\n  .actions-overview {\n    padding: 1rem;\n    gap: 1rem;\n  }\n  .actions-overview .metrics-grid {\n    grid-template-columns: 1fr;\n    gap: 1rem;\n  }\n  .actions-overview .overview-header .filters-row {\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .actions-overview .overview-header .filters-row .search-container,\n  .actions-overview .overview-header .filters-row .filter-container {\n    min-width: unset;\n  }\n}\n"] }]
     }], () => [{ type: i1.NavigationService }, { type: i0.ChangeDetectorRef }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ActionsOverviewComponent, { className: "ActionsOverviewComponent", filePath: "src/Actions/components/actions-overview.component.ts", lineNumber: 43 }); })();
 //# sourceMappingURL=actions-overview.component.js.map