@memberjunction/ng-dashboards 5.34.1 → 5.36.0

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

@@ -16,35 +16,26 @@ import * as i2 from "@memberjunction/ng-ui-components";
 import * as i3 from "@memberjunction/ng-code-editor";
 import * as i4 from "@memberjunction/ng-shared-generic";
 import * as i5 from "@angular/common";
-const _c0 = () => ({ text: "All Statuses", value: "all" });
-const _c1 = () => ({ text: "Active", value: "Active" });
-const _c2 = () => ({ text: "Pending", value: "Pending" });
-const _c3 = () => ({ text: "Disabled", value: "Disabled" });
-const _c4 = (a0, a1, a2, a3) => [a0, a1, a2, a3];
-const _c5 = () => ({ text: "All Types", value: "all" });
-const _c6 = () => ({ text: "AI Generated", value: "Generated" });
-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_Conditional_80_For_2_Template(rf, ctx) { if (rf & 1) {
+function ActionsOverviewComponent_Conditional_78_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 47);
-    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.ɵɵelementStart(0, "div", 45);
+    i0.ɵɵlistener("click", function ActionsOverviewComponent_Conditional_78_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", 46)(2, "div", 47);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 50)(5, "span", 51);
+    i0.ɵɵelementStart(4, "div", 48)(5, "span", 49);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "span", 51);
+    i0.ɵɵelementStart(7, "span", 49);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "span", 52);
+    i0.ɵɵelementStart(9, "span", 50);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(11, "div", 53)(12, "div", 54);
-    i0.ɵɵelement(13, "div", 55);
+    i0.ɵɵelementStart(11, "div", 51)(12, "div", 52);
+    i0.ɵɵelement(13, "div", 53);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const category_r2 = ctx.$implicit;
@@ -59,36 +50,36 @@ function ActionsOverviewComponent_Conditional_80_For_2_Template(rf, ctx) { if (r
     i0.ɵɵadvance(3);
     i0.ɵɵstyleProp("width", category_r2.successRate, "%");
 } }
-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);
+function ActionsOverviewComponent_Conditional_78_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 35);
+    i0.ɵɵrepeaterCreate(1, ActionsOverviewComponent_Conditional_78_For_2_Template, 14, 6, "div", 44, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r2.categoryStats);
 } }
-function ActionsOverviewComponent_Conditional_81_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 38);
-    i0.ɵɵelement(1, "i", 35);
+function ActionsOverviewComponent_Conditional_79_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 36);
+    i0.ɵɵelement(1, "i", 33);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No category statistics available");
     i0.ɵɵelementEnd()();
 } }
-function ActionsOverviewComponent_Conditional_88_For_2_Template(rf, ctx) { if (rf & 1) {
+function ActionsOverviewComponent_Conditional_86_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 57);
-    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.ɵɵelementStart(0, "div", 55);
+    i0.ɵɵlistener("click", function ActionsOverviewComponent_Conditional_86_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", 56);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 59)(4, "div", 60);
+    i0.ɵɵelementStart(3, "div", 57)(4, "div", 58);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 61);
+    i0.ɵɵelementStart(6, "div", 59);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 62)(9, "span", 63);
+    i0.ɵɵelementStart(8, "div", 60)(9, "span", 61);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -105,33 +96,33 @@ function ActionsOverviewComponent_Conditional_88_For_2_Template(rf, ctx) { if (r
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", action_r5.Status, " ");
 } }
-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);
+function ActionsOverviewComponent_Conditional_86_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 39);
+    i0.ɵɵrepeaterCreate(1, ActionsOverviewComponent_Conditional_86_For_2_Template, 11, 6, "div", 54, _forTrack1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r2.recentActions);
 } }
-function ActionsOverviewComponent_Conditional_89_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 38);
-    i0.ɵɵelement(1, "i", 12);
+function ActionsOverviewComponent_Conditional_87_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 36);
+    i0.ɵɵelement(1, "i", 10);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No recent actions found");
     i0.ɵɵelementEnd()();
 } }
-function ActionsOverviewComponent_Conditional_96_For_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+function ActionsOverviewComponent_Conditional_94_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);
+    i0.ɵɵelementStart(0, "div", 71)(1, "div", 72)(2, "h5");
+    i0.ɵɵelement(3, "i", 73);
     i0.ɵɵtext(4, " Parameters");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "mj-code-editor", 76);
+    i0.ɵɵelement(5, "mj-code-editor", 74);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 77)(7, "button", 78);
-    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.ɵɵelementStart(6, "div", 75)(7, "button", 76);
+    i0.ɵɵlistener("click", function ActionsOverviewComponent_Conditional_94_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", 77);
     i0.ɵɵtext(9, " Open Details ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -140,27 +131,27 @@ function ActionsOverviewComponent_Conditional_96_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_96_For_2_Template(rf, ctx) { if (rf & 1) {
+function ActionsOverviewComponent_Conditional_94_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_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.ɵɵelementStart(0, "div", 63)(1, "div", 64);
+    i0.ɵɵlistener("click", function ActionsOverviewComponent_Conditional_94_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", 65);
     i0.ɵɵtext(3);
     i0.ɵɵpipe(4, "date");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 68)(6, "div", 69);
+    i0.ɵɵelementStart(5, "div", 66)(6, "div", 67);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 70);
+    i0.ɵɵelementStart(8, "div", 68);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "div", 71)(11, "span", 63);
+    i0.ɵɵelementStart(10, "div", 69)(11, "span", 61);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div", 72);
+    i0.ɵɵelementStart(13, "div", 70);
     i0.ɵɵelement(14, "i");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(15, ActionsOverviewComponent_Conditional_96_For_2_Conditional_15_Template, 10, 4, "div", 73);
+    i0.ɵɵconditionalCreate(15, ActionsOverviewComponent_Conditional_94_For_2_Conditional_15_Template, 10, 4, "div", 71);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const execution_r7 = ctx.$implicit;
@@ -181,25 +172,25 @@ function ActionsOverviewComponent_Conditional_96_For_2_Template(rf, ctx) { if (r
     i0.ɵɵadvance();
     i0.ɵɵconditional(execution_r7.isExpanded ? 15 : -1);
 } }
-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);
+function ActionsOverviewComponent_Conditional_94_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 42);
+    i0.ɵɵrepeaterCreate(1, ActionsOverviewComponent_Conditional_94_For_2_Template, 16, 13, "div", 62, _forTrack1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r2.recentExecutions);
 } }
-function ActionsOverviewComponent_Conditional_97_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 38);
-    i0.ɵɵelement(1, "i", 43);
+function ActionsOverviewComponent_Conditional_95_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 36);
+    i0.ɵɵelement(1, "i", 41);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No recent executions found");
     i0.ɵɵelementEnd()();
 } }
-function ActionsOverviewComponent_Conditional_98_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 45);
-    i0.ɵɵelement(1, "mj-loading", 80);
+function ActionsOverviewComponent_Conditional_96_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 43);
+    i0.ɵɵelement(1, "mj-loading", 78);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵadvance();
@@ -385,6 +376,62 @@ let ActionsOverviewComponent = class ActionsOverviewComponent extends BaseResour
     onTypeFilterChange(type) {
         this.selectedType$.next(type);
     }
+    // ───── Filter-popover plumbing for the [actions] slot ─────
+    get FilterFields() {
+        return [
+            {
+                key: 'status',
+                type: 'dropdown',
+                label: 'Status',
+                icon: 'fa-solid fa-circle-info',
+                placeholder: 'All Statuses',
+                options: [
+                    { text: 'All Statuses', value: 'all' },
+                    { text: 'Active', value: 'Active' },
+                    { text: 'Pending', value: 'Pending' },
+                    { text: 'Disabled', value: 'Disabled' }
+                ]
+            },
+            {
+                key: 'type',
+                type: 'dropdown',
+                label: 'Type',
+                icon: 'fa-solid fa-shapes',
+                placeholder: 'All Types',
+                options: [
+                    { text: 'All Types', value: 'all' },
+                    { text: 'AI Generated', value: 'Generated' },
+                    { text: 'Custom', value: 'Custom' }
+                ]
+            }
+        ];
+    }
+    get FilterValues() {
+        return { status: this.selectedStatus$.value, type: this.selectedType$.value };
+    }
+    get ActiveFilterCount() {
+        let n = 0;
+        if (this.selectedStatus$.value !== 'all')
+            n++;
+        if (this.selectedType$.value !== 'all')
+            n++;
+        return n;
+    }
+    onFilterValuesChange(v) {
+        const next = (v ?? {});
+        if ((next.status ?? 'all') !== this.selectedStatus$.value) {
+            this.onStatusFilterChange(next.status ?? 'all');
+        }
+        if ((next.type ?? 'all') !== this.selectedType$.value) {
+            this.onTypeFilterChange(next.type ?? 'all');
+        }
+    }
+    resetFilters() {
+        if (this.selectedStatus$.value !== 'all')
+            this.onStatusFilterChange('all');
+        if (this.selectedType$.value !== 'all')
+            this.onTypeFilterChange('all');
+    }
     openAction(action) {
         const key = new CompositeKey([{ FieldName: 'ID', Value: action.ID }]);
         this.navigationService.OpenEntityRecord('MJ: Actions', key);
@@ -465,128 +512,125 @@ let ActionsOverviewComponent = class ActionsOverviewComponent extends BaseResour
         return 'fa-solid fa-bolt';
     }
     static ɵfac = function ActionsOverviewComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ActionsOverviewComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    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); });
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ActionsOverviewComponent, selectors: [["mj-actions-overview"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 97, vars: 19, consts: [["Title", "Actions Overview", "Icon", "fa-solid fa-bolt", "Subtitle", "Health and activity for all configured actions"], ["actions", ""], [3, "ClearAllRequested", "ActiveCount", "ShowClearAll"], [3, "ValuesChange", "Reset", "Fields", "Values"], ["toolbar", ""], ["Placeholder", "Search actions...", 3, "ValueChange", "Value"], [1, "actions-overview"], [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, "mj-page-layout")(1, "mj-page-header", 0)(2, "div", 1)(3, "mj-filter-popover", 2);
+            i0.ɵɵlistener("ClearAllRequested", function ActionsOverviewComponent_Template_mj_filter_popover_ClearAllRequested_3_listener() { return ctx.resetFilters(); });
+            i0.ɵɵelementStart(4, "mj-filter-panel", 3);
+            i0.ɵɵlistener("ValuesChange", function ActionsOverviewComponent_Template_mj_filter_panel_ValuesChange_4_listener($event) { return ctx.onFilterValuesChange($event); })("Reset", function ActionsOverviewComponent_Template_mj_filter_panel_Reset_4_listener() { return ctx.resetFilters(); });
             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(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(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.ɵɵelementStart(5, "div", 4)(6, "mj-page-search", 5);
+            i0.ɵɵlistener("ValueChange", function ActionsOverviewComponent_Template_mj_page_search_ValueChange_6_listener($event) { return ctx.onSearchChange($event); });
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(7, "mj-page-body")(8, "div", 6)(9, "div", 7)(10, "div", 8);
+            i0.ɵɵlistener("click", function ActionsOverviewComponent_Template_div_click_10_listener() { return ctx.onTotalActionsClick(); });
+            i0.ɵɵelementStart(11, "div", 9);
+            i0.ɵɵelement(12, "i", 10);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(15, "div", 13)(16, "div", 14);
-            i0.ɵɵtext(17);
+            i0.ɵɵelementStart(13, "div", 11)(14, "div", 12);
+            i0.ɵɵtext(15);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(18, "div", 15);
-            i0.ɵɵtext(19, "Total Actions");
+            i0.ɵɵelementStart(16, "div", 13);
+            i0.ɵɵtext(17, "Total Actions");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(20, "div", 16)(21, "span", 17);
+            i0.ɵɵelementStart(18, "div", 14)(19, "span", 15);
+            i0.ɵɵtext(20);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(21, "span", 16);
             i0.ɵɵtext(22);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(23, "span", 18);
+            i0.ɵɵelementStart(23, "span", 17);
             i0.ɵɵtext(24);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(25, "span", 19);
-            i0.ɵɵtext(26);
             i0.ɵɵelementEnd()()()();
-            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.ɵɵelementStart(25, "div", 18);
+            i0.ɵɵlistener("click", function ActionsOverviewComponent_Template_div_click_25_listener() { return ctx.onExecutionsClick(); });
+            i0.ɵɵelementStart(26, "div", 9);
+            i0.ɵɵelement(27, "i", 19);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(30, "div", 13)(31, "div", 14);
-            i0.ɵɵtext(32);
+            i0.ɵɵelementStart(28, "div", 11)(29, "div", 12);
+            i0.ɵɵtext(30);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(33, "div", 15);
-            i0.ɵɵtext(34, "Total Executions");
+            i0.ɵɵelementStart(31, "div", 13);
+            i0.ɵɵtext(32, "Total Executions");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(35, "div", 16)(36, "span", 22);
-            i0.ɵɵtext(37);
+            i0.ɵɵelementStart(33, "div", 14)(34, "span", 20);
+            i0.ɵɵtext(35);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(38, "span", 23);
-            i0.ɵɵtext(39);
+            i0.ɵɵelementStart(36, "span", 21);
+            i0.ɵɵtext(37);
             i0.ɵɵelementEnd()()()();
-            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.ɵɵelementStart(38, "div", 22);
+            i0.ɵɵlistener("click", function ActionsOverviewComponent_Template_div_click_38_listener() { return ctx.onCategoriesClick(); });
+            i0.ɵɵelementStart(39, "div", 9);
+            i0.ɵɵelement(40, "i", 23);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(43, "div", 13)(44, "div", 14);
-            i0.ɵɵtext(45);
+            i0.ɵɵelementStart(41, "div", 11)(42, "div", 12);
+            i0.ɵɵtext(43);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(46, "div", 15);
-            i0.ɵɵtext(47, "Categories");
+            i0.ɵɵelementStart(44, "div", 13);
+            i0.ɵɵtext(45, "Categories");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(48, "div", 16)(49, "span");
-            i0.ɵɵtext(50, "Organized structure");
+            i0.ɵɵelementStart(46, "div", 14)(47, "span");
+            i0.ɵɵtext(48, "Organized structure");
             i0.ɵɵelementEnd()()()();
-            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.ɵɵelementStart(49, "div", 24);
+            i0.ɵɵlistener("click", function ActionsOverviewComponent_Template_div_click_49_listener() { return ctx.onAIGeneratedClick(); });
+            i0.ɵɵelementStart(50, "div", 9);
+            i0.ɵɵelement(51, "i", 25);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(54, "div", 13)(55, "div", 14);
-            i0.ɵɵtext(56);
+            i0.ɵɵelementStart(52, "div", 11)(53, "div", 12);
+            i0.ɵɵtext(54);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(57, "div", 15);
-            i0.ɵɵtext(58, "AI Generated");
+            i0.ɵɵelementStart(55, "div", 13);
+            i0.ɵɵtext(56, "AI Generated");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(59, "div", 16)(60, "span", 28);
-            i0.ɵɵtext(61);
+            i0.ɵɵelementStart(57, "div", 14)(58, "span", 26);
+            i0.ɵɵtext(59);
             i0.ɵɵelementEnd()()()();
-            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.ɵɵelementStart(60, "div", 27);
+            i0.ɵɵlistener("click", function ActionsOverviewComponent_Template_div_click_60_listener() { return ctx.onActionGalleryClick(); });
+            i0.ɵɵelementStart(61, "div", 9);
+            i0.ɵɵelement(62, "i", 28);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(65, "div", 13)(66, "div", 14);
-            i0.ɵɵelement(67, "i", 31);
+            i0.ɵɵelementStart(63, "div", 11)(64, "div", 12);
+            i0.ɵɵelement(65, "i", 29);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(68, "div", 15);
-            i0.ɵɵtext(69, "Action Gallery");
+            i0.ɵɵelementStart(66, "div", 13);
+            i0.ɵɵtext(67, "Action Gallery");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(70, "div", 16)(71, "span");
-            i0.ɵɵtext(72, "Visual action browser");
+            i0.ɵɵelementStart(68, "div", 14)(69, "span");
+            i0.ɵɵtext(70, "Visual action browser");
             i0.ɵɵelementEnd()()()()();
-            i0.ɵɵelementStart(73, "div", 32)(74, "div", 33)(75, "div", 34)(76, "h3");
-            i0.ɵɵelement(77, "i", 35);
-            i0.ɵɵtext(78, " Category Performance");
+            i0.ɵɵelementStart(71, "div", 30)(72, "div", 31)(73, "div", 32)(74, "h3");
+            i0.ɵɵelement(75, "i", 33);
+            i0.ɵɵtext(76, " Category Performance");
             i0.ɵɵelementEnd()();
-            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.ɵɵelementStart(77, "div", 34);
+            i0.ɵɵconditionalCreate(78, ActionsOverviewComponent_Conditional_78_Template, 3, 0, "div", 35)(79, ActionsOverviewComponent_Conditional_79_Template, 4, 0, "div", 36);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(82, "div", 39)(83, "div", 34)(84, "h3");
-            i0.ɵɵelement(85, "i", 40);
-            i0.ɵɵtext(86, " Recent Actions");
+            i0.ɵɵelementStart(80, "div", 37)(81, "div", 32)(82, "h3");
+            i0.ɵɵelement(83, "i", 38);
+            i0.ɵɵtext(84, " Recent Actions");
             i0.ɵɵelementEnd()();
-            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.ɵɵelementStart(85, "div", 34);
+            i0.ɵɵconditionalCreate(86, ActionsOverviewComponent_Conditional_86_Template, 3, 0, "div", 39)(87, ActionsOverviewComponent_Conditional_87_Template, 4, 0, "div", 36);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(90, "div", 42)(91, "div", 34)(92, "h3");
-            i0.ɵɵelement(93, "i", 43);
-            i0.ɵɵtext(94, " Recent Executions");
+            i0.ɵɵelementStart(88, "div", 40)(89, "div", 32)(90, "h3");
+            i0.ɵɵelement(91, "i", 41);
+            i0.ɵɵtext(92, " Recent Executions");
             i0.ɵɵelementEnd()();
-            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.ɵɵelementStart(93, "div", 34);
+            i0.ɵɵconditionalCreate(94, ActionsOverviewComponent_Conditional_94_Template, 3, 0, "div", 42)(95, ActionsOverviewComponent_Conditional_95_Template, 4, 0, "div", 36);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵconditionalCreate(96, ActionsOverviewComponent_Conditional_96_Template, 2, 1, "div", 43);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵconditionalCreate(98, ActionsOverviewComponent_Conditional_98_Template, 2, 1, "div", 45);
-            i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵadvance(6);
-            i0.ɵɵproperty("value", ctx.searchTerm$.value);
-            i0.ɵɵadvance(2);
-            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(3);
+            i0.ɵɵproperty("ActiveCount", ctx.ActiveFilterCount)("ShowClearAll", ctx.ActiveFilterCount > 0);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("Fields", ctx.FilterFields)("Values", ctx.FilterValues);
             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.ɵɵproperty("Value", ctx.searchTerm$.value);
+            i0.ɵɵadvance(9);
             i0.ɵɵtextInterpolate(ctx.metrics.totalActions);
             i0.ɵɵadvance(5);
             i0.ɵɵtextInterpolate1("", ctx.metrics.activeActions, " Active");
@@ -607,14 +651,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 ? 80 : 81);
+            i0.ɵɵconditional(ctx.categoryStats.length > 0 ? 78 : 79);
             i0.ɵɵadvance(8);
-            i0.ɵɵconditional(ctx.recentActions.length > 0 ? 88 : 89);
+            i0.ɵɵconditional(ctx.recentActions.length > 0 ? 86 : 87);
             i0.ɵɵadvance(8);
-            i0.ɵɵconditional(ctx.recentExecutions.length > 0 ? 96 : 97);
+            i0.ɵɵconditional(ctx.recentExecutions.length > 0 ? 94 : 95);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.isLoading ? 98 : -1);
-        } }, dependencies: [i1.NgControlStatus, i1.NgModel, i2.MJButtonDirective, i2.MJDropdownComponent, i3.CodeEditorComponent, i4.LoadingComponent, i5.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}"] });
+            i0.ɵɵconditional(ctx.isLoading ? 96 : -1);
+        } }, dependencies: [i1.NgControlStatus, i1.NgModel, i2.MJButtonDirective, i2.MJPageBodyComponent, i2.MJPageHeaderComponent, i2.MJPageLayoutComponent, i2.MJPageSearchComponent, i2.MJFilterPopoverComponent, i2.MJFilterPanelComponent, i3.CodeEditorComponent, i4.LoadingComponent, i5.DatePipe], styles: [".actions-overview[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n  position: relative; \n\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')
@@ -622,7 +666,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        <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"] }]
+        args: [{ standalone: false, selector: 'mj-actions-overview', template: "<mj-page-layout>\n  <mj-page-header\n    Title=\"Actions Overview\"\n    Icon=\"fa-solid fa-bolt\"\n    Subtitle=\"Health and activity for all configured actions\">\n    <!-- [meta] intentionally omitted \u2014 chrome slot discipline audit Task B.\n         totalActions was a single inventory count; the body's KPI cards\n         surface this and other metrics in their proper place. -->\n    <div actions>\n      <mj-filter-popover\n        [ActiveCount]=\"ActiveFilterCount\"\n        [ShowClearAll]=\"ActiveFilterCount > 0\"\n        (ClearAllRequested)=\"resetFilters()\">\n        <mj-filter-panel\n          [Fields]=\"FilterFields\"\n          [Values]=\"FilterValues\"\n          (ValuesChange)=\"onFilterValuesChange($event)\"\n          (Reset)=\"resetFilters()\">\n        </mj-filter-panel>\n      </mj-filter-popover>\n    </div>\n    <div toolbar>\n      <mj-page-search\n        Placeholder=\"Search actions...\"\n        [Value]=\"searchTerm$.value\"\n        (ValueChange)=\"onSearchChange($event)\">\n      </mj-page-search>\n    </div>\n  </mj-page-header>\n\n  <mj-page-body>\n  <div class=\"actions-overview\" >\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>\n  </mj-page-body>\n</mj-page-layout>", styles: [".actions-overview {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n  position: relative; /* Required for scoped loading overlay */\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: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ActionsOverviewComponent, { className: "ActionsOverviewComponent", filePath: "src/Actions/components/actions-overview.component.ts", lineNumber: 43 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ActionsOverviewComponent, { className: "ActionsOverviewComponent", filePath: "src/Actions/components/actions-overview.component.ts", lineNumber: 44 }); })();
 //# sourceMappingURL=actions-overview.component.js.map