@memberjunction/ng-dashboards 2.42.0

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

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