@memberjunction/ng-dashboards 5.34.0 → 5.35.0

package/dist/Actions/components/actions-overview.component.d.ts

@@ -1,6 +1,7 @@
 import { OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
 import { MJActionEntity, MJActionCategoryEntity, MJActionExecutionLogEntity, ResourceData } from '@memberjunction/core-entities';
 import { BaseResourceComponent } from '@memberjunction/ng-shared';
+import { FilterFieldConfig } from '@memberjunction/ng-ui-components';
 import { Subject, BehaviorSubject } from 'rxjs';
 import * as i0 from "@angular/core";
 interface ActionMetrics {
@@ -52,6 +53,11 @@ export declare class ActionsOverviewComponent extends BaseResourceComponent impl
     onSearchChange(searchTerm: string): void;
     onStatusFilterChange(status: string): void;
     onTypeFilterChange(type: string): void;
+    get FilterFields(): FilterFieldConfig[];
+    get FilterValues(): Record<string, unknown>;
+    get ActiveFilterCount(): number;
+    onFilterValuesChange(v: Record<string, unknown>): void;
+    resetFilters(): void;
     openAction(action: MJActionEntity): void;
     openCategory(categoryId: string): void;
     openExecution(execution: MJActionExecutionLogEntity): void;

package/dist/Actions/components/actions-overview.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"actions-overview.component.d.ts","sourceRoot":"","sources":["../../../src/Actions/components/actions-overview.component.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"actions-overview.component.d.ts","sourceRoot":"","sources":["../../../src/Actions/components/actions-overview.component.ts"],"names":[],"mappings":"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"}

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

@@ -16,15 +16,6 @@ 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) {
@@ -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,19 +512,19 @@ 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: 99, vars: 20, consts: [["Title", "Actions Overview", "Icon", "fa-solid fa-bolt", "Subtitle", "Health and activity for all configured actions"], ["meta", ""], ["Label", "actions", 3, "Count"], ["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);
+            i0.ɵɵelement(3, "mj-stat-badge", 2);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "div", 3)(5, "mj-filter-popover", 4);
+            i0.ɵɵlistener("ClearAllRequested", function ActionsOverviewComponent_Template_mj_filter_popover_ClearAllRequested_5_listener() { return ctx.resetFilters(); });
+            i0.ɵɵelementStart(6, "mj-filter-panel", 5);
+            i0.ɵɵlistener("ValuesChange", function ActionsOverviewComponent_Template_mj_filter_panel_ValuesChange_6_listener($event) { return ctx.onFilterValuesChange($event); })("Reset", function ActionsOverviewComponent_Template_mj_filter_panel_Reset_6_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.ɵɵelementStart(7, "div", 6)(8, "mj-page-search", 7);
+            i0.ɵɵlistener("ValueChange", function ActionsOverviewComponent_Template_mj_page_search_ValueChange_8_listener($event) { return ctx.onSearchChange($event); });
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(9, "mj-page-body")(10, "div", 8)(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);
@@ -578,15 +625,17 @@ let ActionsOverviewComponent = class ActionsOverviewComponent extends BaseResour
             i0.ɵɵconditionalCreate(96, ActionsOverviewComponent_Conditional_96_Template, 3, 0, "div", 44)(97, ActionsOverviewComponent_Conditional_97_Template, 4, 0, "div", 38);
             i0.ɵɵelementEnd()()();
             i0.ɵɵconditionalCreate(98, ActionsOverviewComponent_Conditional_98_Template, 2, 1, "div", 45);
-            i0.ɵɵelementEnd();
+            i0.ɵɵelementEnd()()();
         } if (rf & 2) {
-            i0.ɵɵadvance(6);
-            i0.ɵɵproperty("value", ctx.searchTerm$.value);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("Count", ctx.metrics.totalActions);
             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.ɵɵ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");
@@ -614,7 +663,7 @@ let ActionsOverviewComponent = class ActionsOverviewComponent extends BaseResour
             i0.ɵɵconditional(ctx.recentExecutions.length > 0 ? 96 : 97);
             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}"] });
+        } }, dependencies: [i1.NgControlStatus, i1.NgModel, i2.MJButtonDirective, i2.MJPageBodyComponent, i2.MJPageHeaderComponent, i2.MJPageLayoutComponent, i2.MJPageSearchComponent, i2.MJFilterPopoverComponent, i2.MJFilterPanelComponent, i2.MJStatBadgeComponent, 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 +671,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    <div meta>\n      <mj-stat-badge\n        [Count]=\"metrics.totalActions\"\n        Label=\"actions\">\n      </mj-stat-badge>\n    </div>\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