@memberjunction/ng-dashboards 2.89.0 → 2.91.0

package/dist/Actions/components/actions-list-view.component.js

@@ -3,107 +3,223 @@ 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 "@progress/kendo-angular-buttons";
-import * as i5 from "@angular/common";
-const _forTrack0 = ($index, $item) => $item.ID;
+import * as i1 from "@angular/common";
+import * as i2 from "@progress/kendo-angular-indicators";
+import * as i3 from "@progress/kendo-angular-dropdowns";
+import * as i4 from "@progress/kendo-angular-inputs";
+import * as i5 from "@progress/kendo-angular-buttons";
+const _forTrack0 = ($index, $item) => $item.category.ID;
+const _forTrack1 = ($index, $item) => $item.ID;
+const _c0 = a0 => ({ nodes: a0 });
 function ActionsListViewComponent_ng_template_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 14);
+    i0.ɵɵelement(0, "i", 19);
 } }
-function ActionsListViewComponent_Conditional_17_For_1_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-chip", 23);
-    i0.ɵɵelement(1, "i", 30);
+function ActionsListViewComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " All Categories ");
+} }
+function ActionsListViewComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.getCategoryName(ctx_r0.selectedCategory$.value), " ");
+} }
+function ActionsListViewComponent_Conditional_21_ng_container_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function ActionsListViewComponent_Conditional_21_ng_template_14_For_1_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 34);
+} }
+function ActionsListViewComponent_Conditional_21_ng_template_14_For_1_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 35);
+} }
+function ActionsListViewComponent_Conditional_21_ng_template_14_For_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 33);
+    i0.ɵɵlistener("click", function ActionsListViewComponent_Conditional_21_ng_template_14_For_1_Conditional_2_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r5); const node_r4 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(3); ctx_r0.toggleCategoryExpanded(node_r4.category.ID); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵtemplate(1, ActionsListViewComponent_Conditional_21_ng_template_14_For_1_Conditional_2_Conditional_1_Template, 1, 0, "i", 34)(2, ActionsListViewComponent_Conditional_21_ng_template_14_For_1_Conditional_2_Conditional_2_Template, 1, 0, "i", 35);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const node_r4 = i0.ɵɵnextContext().$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("fillMode", "flat")("size", "small");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.isCategoryExpanded(node_r4.category.ID) ? 1 : 2);
+} }
+function ActionsListViewComponent_Conditional_21_ng_template_14_For_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 31);
+} }
+function ActionsListViewComponent_Conditional_21_ng_template_14_For_1_Conditional_8_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function ActionsListViewComponent_Conditional_21_ng_template_14_For_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, ActionsListViewComponent_Conditional_21_ng_template_14_For_1_Conditional_8_ng_container_0_Template, 1, 0, "ng-container", 26);
+} if (rf & 2) {
+    const node_r4 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵnextContext(2);
+    const categoryTreeTemplate_r6 = i0.ɵɵreference(15);
+    i0.ɵɵproperty("ngTemplateOutlet", categoryTreeTemplate_r6)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0, node_r4.children));
+} }
+function ActionsListViewComponent_Conditional_21_ng_template_14_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 28)(1, "button", 29);
+    i0.ɵɵlistener("click", function ActionsListViewComponent_Conditional_21_ng_template_14_For_1_Template_button_click_1_listener() { const node_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.selectCategory(node_r4.category.ID)); });
+    i0.ɵɵtemplate(2, ActionsListViewComponent_Conditional_21_ng_template_14_For_1_Conditional_2_Template, 3, 3, "button", 30)(3, ActionsListViewComponent_Conditional_21_ng_template_14_For_1_Conditional_3_Template, 1, 0, "span", 31);
+    i0.ɵɵelement(4, "i", 32);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementStart(6, "span", 14);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(8, ActionsListViewComponent_Conditional_21_ng_template_14_For_1_Conditional_8_Template, 1, 4, "ng-container");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const node_r4 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵstyleProp("padding-left", node_r4.level * 20, "px");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("selected", ctx_r0.selectedCategory$.value === node_r4.category.ID);
+    i0.ɵɵproperty("fillMode", "flat")("size", "small");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(node_r4.children.length > 0 ? 2 : 3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", node_r4.category.Name, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.getCategoryActionCount(node_r4.category.ID));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(node_r4.children.length > 0 && ctx_r0.isCategoryExpanded(node_r4.category.ID) ? 8 : -1);
+} }
+function ActionsListViewComponent_Conditional_21_ng_template_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, ActionsListViewComponent_Conditional_21_ng_template_14_For_1_Template, 9, 10, "div", 27, _forTrack0);
+} if (rf & 2) {
+    const nodes_r7 = ctx.nodes;
+    i0.ɵɵrepeater(nodes_r7);
+} }
+function ActionsListViewComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 15)(1, "div", 20)(2, "h3");
+    i0.ɵɵtext(3, "Select Category");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "button", 21);
+    i0.ɵɵlistener("click", function ActionsListViewComponent_Conditional_21_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleCategoryTree()); });
+    i0.ɵɵelement(5, "i", 22);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 23)(7, "button", 21);
+    i0.ɵɵlistener("click", function ActionsListViewComponent_Conditional_21_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.selectCategory("all")); });
+    i0.ɵɵelement(8, "i", 24);
+    i0.ɵɵtext(9, " All Categories ");
+    i0.ɵɵelementStart(10, "span", 14);
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(12, "div", 25);
+    i0.ɵɵtemplate(13, ActionsListViewComponent_Conditional_21_ng_container_13_Template, 1, 0, "ng-container", 26);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(14, ActionsListViewComponent_Conditional_21_ng_template_14_Template, 2, 0, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const categoryTreeTemplate_r6 = i0.ɵɵreference(15);
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("fillMode", "flat")("size", "small");
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("selected", ctx_r0.selectedCategory$.value === "all");
+    i0.ɵɵproperty("fillMode", "flat")("size", "small");
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r0.actions.length);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngTemplateOutlet", categoryTreeTemplate_r6)("ngTemplateOutletContext", i0.ɵɵpureFunction1(9, _c0, ctx_r0.categoryTree));
+} }
+function ActionsListViewComponent_Conditional_23_For_1_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-chip", 44);
+    i0.ɵɵelement(1, "i", 51);
     i0.ɵɵtext(2, " AI Generated ");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("size", "small");
 } }
-function ActionsListViewComponent_Conditional_17_For_1_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 26);
-    i0.ɵɵelement(1, "i", 31);
+function ActionsListViewComponent_Conditional_23_For_1_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 47);
+    i0.ɵɵelement(1, "i", 52);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵpipe(4, "date");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const action_r2 = i0.ɵɵnextContext().$implicit;
+    const action_r9 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1("Updated ", i0.ɵɵpipeBind2(4, 1, action_r2.__mj_UpdatedAt, "MMM d, yyyy"), "");
+    i0.ɵɵtextInterpolate1("Updated ", i0.ɵɵpipeBind2(4, 1, action_r9.__mj_UpdatedAt, "MMM d, yyyy"), "");
 } }
-function ActionsListViewComponent_Conditional_17_For_1_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 26);
-    i0.ɵɵelement(1, "i", 32);
+function ActionsListViewComponent_Conditional_23_For_1_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 47);
+    i0.ɵɵelement(1, "i", 53);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const action_r2 = i0.ɵɵnextContext().$implicit;
+    const action_r9 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(action_r2.CodeApprovalStatus);
+    i0.ɵɵtextInterpolate(action_r9.CodeApprovalStatus);
 } }
-function ActionsListViewComponent_Conditional_17_For_1_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 16);
-    i0.ɵɵlistener("click", function ActionsListViewComponent_Conditional_17_For_1_Template_div_click_0_listener() { const action_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.openAction(action_r2)); });
-    i0.ɵɵelementStart(1, "div", 17);
+function ActionsListViewComponent_Conditional_23_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 37);
+    i0.ɵɵlistener("click", function ActionsListViewComponent_Conditional_23_For_1_Template_div_click_0_listener() { const action_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openAction(action_r9)); });
+    i0.ɵɵelementStart(1, "div", 38);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 18)(4, "div", 19)(5, "h3", 20);
+    i0.ɵɵelementStart(3, "div", 39)(4, "div", 40)(5, "h3", 41);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 21)(8, "kendo-chip", 22);
+    i0.ɵɵelementStart(7, "div", 42)(8, "kendo-chip", 43);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(10, ActionsListViewComponent_Conditional_17_For_1_Conditional_10_Template, 3, 1, "kendo-chip", 23);
+    i0.ɵɵtemplate(10, ActionsListViewComponent_Conditional_23_For_1_Conditional_10_Template, 3, 1, "kendo-chip", 44);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 24);
+    i0.ɵɵelementStart(11, "div", 45);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "div", 25)(14, "div", 26);
-    i0.ɵɵelement(15, "i", 27);
+    i0.ɵɵelementStart(13, "div", 46)(14, "div", 47);
+    i0.ɵɵelement(15, "i", 32);
     i0.ɵɵelementStart(16, "span");
     i0.ɵɵtext(17);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(18, ActionsListViewComponent_Conditional_17_For_1_Conditional_18_Template, 5, 4, "div", 26)(19, ActionsListViewComponent_Conditional_17_For_1_Conditional_19_Template, 4, 1, "div", 26);
+    i0.ɵɵtemplate(18, ActionsListViewComponent_Conditional_23_For_1_Conditional_18_Template, 5, 4, "div", 47)(19, ActionsListViewComponent_Conditional_23_For_1_Conditional_19_Template, 4, 1, "div", 47);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(20, "div", 28)(21, "button", 29);
-    i0.ɵɵlistener("click", function ActionsListViewComponent_Conditional_17_For_1_Template_button_click_21_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(20, "div", 48)(21, "button", 49);
+    i0.ɵɵlistener("click", function ActionsListViewComponent_Conditional_23_For_1_Template_button_click_21_listener($event) { i0.ɵɵrestoreView(_r8); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(22, "i", 50);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const action_r2 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const action_r9 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(ctx_r2.getActionIcon(action_r2));
+    i0.ɵɵclassMap(ctx_r0.getActionIcon(action_r9));
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(action_r2.Name);
+    i0.ɵɵtextInterpolate(action_r9.Name);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("themeColor", ctx_r2.getStatusColor(action_r2.Status))("size", "small");
+    i0.ɵɵproperty("themeColor", ctx_r0.getStatusColor(action_r9.Status))("size", "small");
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", action_r2.Status, " ");
+    i0.ɵɵtextInterpolate1(" ", action_r9.Status, " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(action_r2.Type === "Generated" ? 10 : -1);
+    i0.ɵɵconditional(action_r9.Type === "Generated" ? 10 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", action_r2.Description || "No description available", " ");
+    i0.ɵɵtextInterpolate1(" ", action_r9.Description || "No description available", " ");
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r2.getCategoryName(action_r2.CategoryID));
+    i0.ɵɵtextInterpolate(ctx_r0.getCategoryName(action_r9.CategoryID));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(action_r2.__mj_UpdatedAt ? 18 : -1);
+    i0.ɵɵconditional(action_r9.__mj_UpdatedAt ? 18 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(action_r2.CodeApprovalStatus && action_r2.Type === "Generated" ? 19 : -1);
+    i0.ɵɵconditional(action_r9.CodeApprovalStatus && action_r9.Type === "Generated" ? 19 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("fillMode", "flat")("icon", "more-vertical");
+    i0.ɵɵproperty("fillMode", "flat");
 } }
-function ActionsListViewComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, ActionsListViewComponent_Conditional_17_For_1_Template, 22, 13, "div", 15, _forTrack0);
+function ActionsListViewComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, ActionsListViewComponent_Conditional_23_For_1_Template, 23, 12, "div", 36, _forTrack1);
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵrepeater(ctx_r2.filteredActions);
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵrepeater(ctx_r0.filteredActions);
 } }
-function ActionsListViewComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 12);
-    i0.ɵɵelement(1, "i", 14);
+function ActionsListViewComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 17);
+    i0.ɵɵelement(1, "i", 19);
     i0.ɵɵelementStart(2, "h3");
     i0.ɵɵtext(3, "No actions found");
     i0.ɵɵelementEnd();
@@ -111,9 +227,9 @@ function ActionsListViewComponent_Conditional_18_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵtext(5, "Try adjusting your search or filter criteria");
     i0.ɵɵelementEnd()();
 } }
-function ActionsListViewComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 13);
-    i0.ɵɵelement(1, "kendo-loader", 33);
+function ActionsListViewComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 18);
+    i0.ɵɵelement(1, "kendo-loader", 54);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵadvance();
@@ -125,10 +241,13 @@ export class ActionsListViewComponent {
     actions = [];
     filteredActions = [];
     categories = new Map();
+    categoryTree = [];
+    categoryDescendants = new Map();
     searchTerm$ = new BehaviorSubject('');
     selectedStatus$ = new BehaviorSubject('all');
     selectedType$ = new BehaviorSubject('all');
     selectedCategory$ = new BehaviorSubject('all');
+    expandedCategories = new Set();
     statusOptions = [
         { text: 'All Statuses', value: 'all' },
         { text: 'Active', value: 'Active' },
@@ -167,7 +286,6 @@ export class ActionsListViewComponent {
         try {
             this.isLoading = true;
             const rv = new RunView();
-            console.log('Loading Actions list data...');
             const [actionsResult, categoriesResult] = await rv.RunViews([
                 {
                     EntityName: 'Actions',
@@ -206,6 +324,10 @@ export class ActionsListViewComponent {
         categories.forEach(category => {
             this.categories.set(category.ID, category);
         });
+        // Build the category tree
+        this.buildCategoryTree(categories);
+        // Build descendant mapping for efficient filtering
+        this.buildDescendantMapping(categories);
     }
     buildCategoryOptions(categories) {
         this.categoryOptions = [
@@ -216,9 +338,64 @@ export class ActionsListViewComponent {
             }))
         ];
     }
+    buildCategoryTree(categories) {
+        const categoryMap = new Map();
+        // First pass: create all nodes
+        categories.forEach(category => {
+            categoryMap.set(category.ID, {
+                category,
+                children: [],
+                level: 0
+            });
+        });
+        // Second pass: build tree structure
+        const rootNodes = [];
+        categoryMap.forEach(node => {
+            const parentId = node.category.ParentID;
+            if (parentId && categoryMap.has(parentId)) {
+                const parent = categoryMap.get(parentId);
+                parent.children.push(node);
+                node.level = parent.level + 1;
+            }
+            else {
+                rootNodes.push(node);
+            }
+        });
+        // Sort children at each level by name
+        const sortChildren = (nodes) => {
+            nodes.sort((a, b) => a.category.Name.localeCompare(b.category.Name));
+            nodes.forEach(node => sortChildren(node.children));
+        };
+        sortChildren(rootNodes);
+        this.categoryTree = rootNodes;
+    }
+    buildDescendantMapping(categories) {
+        this.categoryDescendants.clear();
+        // Initialize each category with itself
+        categories.forEach(category => {
+            this.categoryDescendants.set(category.ID, new Set([category.ID]));
+        });
+        // Build descendant sets
+        const addDescendants = (categoryId, descendantId) => {
+            const descendants = this.categoryDescendants.get(categoryId);
+            if (descendants) {
+                descendants.add(descendantId);
+            }
+        };
+        categories.forEach(category => {
+            if (category.ParentID) {
+                // Add this category as a descendant of all its ancestors
+                let currentParentId = category.ParentID;
+                while (currentParentId) {
+                    addDescendants(currentParentId, category.ID);
+                    const parent = this.categories.get(currentParentId);
+                    currentParentId = parent?.ParentID || null;
+                }
+            }
+        });
+    }
     applyFilters() {
         let filtered = [...this.actions];
-        console.log('Applying filters to', this.actions.length, 'actions');
         // Apply search filter
         const searchTerm = this.searchTerm$.value.toLowerCase();
         if (searchTerm) {
@@ -235,13 +412,20 @@ export class ActionsListViewComponent {
         if (type !== 'all') {
             filtered = filtered.filter(action => action.Type === type);
         }
-        // Apply category filter
+        // Apply category filter (includes descendants)
         const categoryId = this.selectedCategory$.value;
         if (categoryId !== 'all') {
-            filtered = filtered.filter(action => action.CategoryID === categoryId);
+            const descendantIds = this.categoryDescendants.get(categoryId);
+            if (descendantIds) {
+                // Filter actions that belong to the selected category or any of its descendants
+                filtered = filtered.filter(action => action.CategoryID && descendantIds.has(action.CategoryID));
+            }
+            else {
+                console.warn(`Category ID ${categoryId} not found in category hierarchy`);
+                filtered = [];
+            }
         }
         this.filteredActions = filtered;
-        console.log('Filtered to', this.filteredActions.length, 'actions');
     }
     onSearchChange(searchTerm) {
         this.searchTerm$.next(searchTerm);
@@ -288,32 +472,62 @@ export class ActionsListViewComponent {
     getActionIcon(action) {
         return action?.IconClass || this.getTypeIcon(action.Type);
     }
+    // Tree view methods
+    toggleCategoryExpanded(categoryId) {
+        if (this.expandedCategories.has(categoryId)) {
+            this.expandedCategories.delete(categoryId);
+        }
+        else {
+            this.expandedCategories.add(categoryId);
+        }
+    }
+    isCategoryExpanded(categoryId) {
+        return this.expandedCategories.has(categoryId);
+    }
+    selectCategory(categoryId) {
+        this.selectedCategory$.next(categoryId);
+    }
+    getCategoryActionCount(categoryId) {
+        const descendantIds = this.categoryDescendants.get(categoryId);
+        if (!descendantIds)
+            return 0;
+        return this.actions.filter(action => action.CategoryID && descendantIds.has(action.CategoryID)).length;
+    }
+    showCategoryTree = false;
+    toggleCategoryTree() {
+        this.showCategoryTree = !this.showCategoryTree;
+    }
     static ɵfac = function ActionsListViewComponent_Factory(t) { return new (t || ActionsListViewComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ActionsListViewComponent, selectors: [["mj-actions-list-view"]], outputs: { openEntityRecord: "openEntityRecord" }, decls: 20, vars: 11, consts: [[1, "actions-list-view"], [1, "list-header"], [1, "header-title"], [1, "fa-solid", "fa-cogs"], [1, "results-count"], [1, "filters-row"], [1, "search-container"], ["placeholder", "Search actions...", 3, "valueChange", "value"], ["kendoTextBoxPrefixTemplate", ""], [1, "filter-group"], ["textField", "text", "valueField", "value", 3, "valueChange", "data", "value"], [1, "actions-list"], [1, "empty-state"], [1, "loading-overlay"], [1, "fa-solid", "fa-search"], [1, "action-card"], [1, "action-card", 3, "click"], [1, "action-icon"], [1, "action-main"], [1, "action-header"], [1, "action-name"], [1, "action-badges"], [3, "themeColor", "size"], ["themeColor", "info", 3, "size"], [1, "action-description"], [1, "action-details"], [1, "detail-item"], [1, "fa-solid", "fa-folder"], [1, "action-actions"], ["kendoButton", "", 3, "click", "fillMode", "icon"], [1, "fa-solid", "fa-robot"], [1, "fa-solid", "fa-clock"], [1, "fa-solid", "fa-check-circle"], ["type", "converging-spinner", 3, "themeColor"]], template: function ActionsListViewComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h2");
-            i0.ɵɵelement(4, "i", 3);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ActionsListViewComponent, selectors: [["mj-actions-list-view"]], outputs: { openEntityRecord: "openEntityRecord" }, decls: 26, vars: 15, consts: [["categoryTreeTemplate", ""], [1, "actions-list-view"], [1, "list-header"], [1, "header-title"], [1, "fa-solid", "fa-cogs"], [1, "results-count"], [1, "filters-row"], [1, "search-container"], ["placeholder", "Search actions...", 3, "valueChange", "value"], ["kendoTextBoxPrefixTemplate", ""], [1, "filter-group"], ["textField", "text", "valueField", "value", 3, "valueChange", "data", "valuePrimitive", "value"], ["kendoButton", "", 1, "category-filter-button", 3, "click", "fillMode"], [1, "fa-solid", "fa-folder-tree"], [1, "badge"], [1, "category-tree-panel"], [1, "actions-list"], [1, "empty-state"], [1, "loading-overlay"], [1, "fa-solid", "fa-search"], [1, "tree-header"], ["kendoButton", "", 3, "click", "fillMode", "size"], [1, "fa-solid", "fa-times"], [1, "tree-actions"], [1, "fa-solid", "fa-folder-open"], [1, "tree-content"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "tree-node", 3, "padding-left"], [1, "tree-node"], ["kendoButton", "", 1, "tree-node-button", 3, "click", "fillMode", "size"], ["kendoButton", "", 1, "expand-button", 3, "fillMode", "size"], [1, "no-expand"], [1, "fa-solid", "fa-folder"], ["kendoButton", "", 1, "expand-button", 3, "click", "fillMode", "size"], [1, "fa-solid", "fa-chevron-down"], [1, "fa-solid", "fa-chevron-right"], [1, "action-card"], [1, "action-card", 3, "click"], [1, "action-icon"], [1, "action-main"], [1, "action-header"], [1, "action-name"], [1, "action-badges"], [3, "themeColor", "size"], ["themeColor", "info", 3, "size"], [1, "action-description"], [1, "action-details"], [1, "detail-item"], [1, "action-actions"], ["kendoButton", "", 3, "click", "fillMode"], [1, "fa-solid", "fa-ellipsis-vertical"], [1, "fa-solid", "fa-robot"], [1, "fa-solid", "fa-clock"], [1, "fa-solid", "fa-check-circle"], ["type", "converging-spinner", 3, "themeColor"]], template: function ActionsListViewComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "div", 3)(3, "h2");
+            i0.ɵɵelement(4, "i", 4);
             i0.ɵɵtext(5, " Actions");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(6, "div", 4);
+            i0.ɵɵelementStart(6, "div", 5);
             i0.ɵɵtext(7);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(8, "div", 5)(9, "div", 6)(10, "kendo-textbox", 7);
+            i0.ɵɵelementStart(8, "div", 6)(9, "div", 7)(10, "kendo-textbox", 8);
             i0.ɵɵlistener("valueChange", function ActionsListViewComponent_Template_kendo_textbox_valueChange_10_listener($event) { return ctx.onSearchChange($event); });
-            i0.ɵɵtemplate(11, ActionsListViewComponent_ng_template_11_Template, 1, 0, "ng-template", 8);
+            i0.ɵɵtemplate(11, ActionsListViewComponent_ng_template_11_Template, 1, 0, "ng-template", 9);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(12, "div", 9)(13, "kendo-dropdownlist", 10);
+            i0.ɵɵelementStart(12, "div", 10)(13, "kendo-dropdownlist", 11);
             i0.ɵɵlistener("valueChange", function ActionsListViewComponent_Template_kendo_dropdownlist_valueChange_13_listener($event) { return ctx.onStatusFilterChange($event); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(14, "kendo-dropdownlist", 10);
+            i0.ɵɵelementStart(14, "kendo-dropdownlist", 11);
             i0.ɵɵlistener("valueChange", function ActionsListViewComponent_Template_kendo_dropdownlist_valueChange_14_listener($event) { return ctx.onTypeFilterChange($event); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(15, "kendo-dropdownlist", 10);
-            i0.ɵɵlistener("valueChange", function ActionsListViewComponent_Template_kendo_dropdownlist_valueChange_15_listener($event) { return ctx.onCategoryFilterChange($event); });
-            i0.ɵɵelementEnd()()()();
-            i0.ɵɵelementStart(16, "div", 11);
-            i0.ɵɵtemplate(17, ActionsListViewComponent_Conditional_17_Template, 2, 0)(18, ActionsListViewComponent_Conditional_18_Template, 6, 0, "div", 12);
+            i0.ɵɵelementStart(15, "button", 12);
+            i0.ɵɵlistener("click", function ActionsListViewComponent_Template_button_click_15_listener() { return ctx.toggleCategoryTree(); });
+            i0.ɵɵelement(16, "i", 13);
+            i0.ɵɵtemplate(17, ActionsListViewComponent_Conditional_17_Template, 1, 0)(18, ActionsListViewComponent_Conditional_18_Template, 1, 1);
+            i0.ɵɵelementStart(19, "span", 14);
+            i0.ɵɵtext(20);
+            i0.ɵɵelementEnd()()()()();
+            i0.ɵɵtemplate(21, ActionsListViewComponent_Conditional_21_Template, 16, 11, "div", 15);
+            i0.ɵɵelementStart(22, "div", 16);
+            i0.ɵɵtemplate(23, ActionsListViewComponent_Conditional_23_Template, 2, 0)(24, ActionsListViewComponent_Conditional_24_Template, 6, 0, "div", 17);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(19, ActionsListViewComponent_Conditional_19_Template, 2, 1, "div", 13);
+            i0.ɵɵtemplate(25, ActionsListViewComponent_Conditional_25_Template, 2, 1, "div", 18);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance(7);
@@ -321,22 +535,28 @@ export class ActionsListViewComponent {
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("value", ctx.searchTerm$.value);
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("data", ctx.statusOptions)("value", ctx.selectedStatus$.value);
+            i0.ɵɵproperty("data", ctx.statusOptions)("valuePrimitive", true)("value", ctx.selectedStatus$.value);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("data", ctx.typeOptions)("valuePrimitive", true)("value", ctx.selectedType$.value);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("data", ctx.typeOptions)("value", ctx.selectedType$.value);
+            i0.ɵɵproperty("fillMode", "outline");
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.selectedCategory$.value === "all" ? 17 : 18);
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate(ctx.getCategoryActionCount(ctx.selectedCategory$.value));
             i0.ɵɵadvance();
-            i0.ɵɵproperty("data", ctx.categoryOptions)("value", ctx.selectedCategory$.value);
+            i0.ɵɵconditional(ctx.showCategoryTree ? 21 : -1);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.filteredActions.length > 0 ? 17 : !ctx.isLoading ? 18 : -1);
+            i0.ɵɵconditional(ctx.filteredActions.length > 0 ? 23 : !ctx.isLoading ? 24 : -1);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.isLoading ? 19 : -1);
-        } }, dependencies: [i1.LoaderComponent, i2.DropDownListComponent, i3.TextBoxComponent, i3.TextBoxPrefixTemplateDirective, i4.ButtonComponent, i4.ChipComponent, i5.DatePipe], styles: [".actions-list-view[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--kendo-color-app-surface);\n\n  .list-header {\n    padding: 1.5rem;\n    border-bottom: 1px solid var(--kendo-color-border);\n    background: var(--kendo-color-surface);\n\n    .header-title {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin-bottom: 1rem;\n\n      h2 {\n        margin: 0;\n        font-size: 1.5rem;\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      .results-count {\n        font-size: 0.875rem;\n        color: var(--kendo-color-subtle);\n        font-weight: 600;\n      }\n    }\n\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-group {\n        display: flex;\n        gap: 0.75rem;\n        \n        kendo-dropdownlist {\n          min-width: 140px;\n        }\n      }\n    }\n  }\n\n  .actions-list {\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\n    padding: 1.5rem;\n\n    .action-card {\n      display: flex;\n      align-items: flex-start;\n      gap: 1rem;\n      padding: 1.5rem;\n      background: var(--kendo-color-surface);\n      border: 1px solid var(--kendo-color-border);\n      border-radius: 0.75rem;\n      margin-bottom: 1rem;\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        transform: translateY(-1px);\n        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n      }\n\n      .action-icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 3rem;\n        height: 3rem;\n        border-radius: 0.5rem;\n        background: var(--kendo-color-primary-subtle);\n        flex-shrink: 0;\n\n        i {\n          color: var(--kendo-color-primary);\n          font-size: 1.25rem;\n        }\n      }\n\n      .action-main {\n        flex: 1;\n\n        .action-header {\n          display: flex;\n          align-items: flex-start;\n          justify-content: space-between;\n          margin-bottom: 0.75rem;\n\n          .action-name {\n            margin: 0;\n            font-size: 1.125rem;\n            font-weight: 600;\n            color: var(--kendo-color-on-app-surface);\n          }\n\n          .action-badges {\n            display: flex;\n            gap: 0.5rem;\n            flex-shrink: 0;\n\n            kendo-chip {\n              &:has(i) {\n                display: flex;\n                align-items: center;\n                gap: 0.25rem;\n              }\n            }\n          }\n        }\n\n        .action-description {\n          color: var(--kendo-color-subtle);\n          line-height: 1.5;\n          margin-bottom: 1rem;\n        }\n\n        .action-details {\n          display: flex;\n          gap: 1.5rem;\n          flex-wrap: wrap;\n\n          .detail-item {\n            display: flex;\n            align-items: center;\n            gap: 0.375rem;\n            font-size: 0.75rem;\n            color: var(--kendo-color-subtle);\n\n            i {\n              color: var(--kendo-color-primary);\n              width: 0.75rem;\n            }\n          }\n        }\n      }\n\n      .action-actions {\n        flex-shrink: 0;\n\n        button {\n          opacity: 0;\n          transition: opacity 0.2s ease;\n        }\n      }\n\n      &:hover .action-actions button {\n        opacity: 1;\n      }\n    }\n\n    .empty-state {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 3rem 2rem;\n      text-align: center;\n      color: var(--kendo-color-subtle);\n\n      i {\n        font-size: 3rem;\n        margin-bottom: 1rem;\n        opacity: 0.5;\n      }\n\n      h3 {\n        margin: 0 0 0.5rem 0;\n        font-size: 1.125rem;\n        font-weight: 600;\n      }\n\n      p {\n        margin: 0;\n        font-size: 0.875rem;\n      }\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%]:   768px)[_ngcontent-%COMP%] {\n  .actions-list-view {\n    .list-header {\n      padding: 1rem;\n\n      .header-title {\n        flex-direction: column;\n        align-items: stretch;\n        gap: 0.5rem;\n      }\n\n      .filters-row {\n        flex-direction: column;\n        align-items: stretch;\n\n        .search-container,\n        .filter-group {\n          min-width: unset;\n        }\n\n        .filter-group {\n          display: grid;\n          grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n          gap: 0.5rem;\n        }\n      }\n    }\n\n    .actions-list {\n      padding: 1rem;\n\n      .action-card {\n        padding: 1rem;\n\n        .action-main .action-header {\n          flex-direction: column;\n          align-items: stretch;\n          gap: 0.5rem;\n\n          .action-badges {\n            align-self: flex-start;\n          }\n        }\n\n        .action-main .action-details {\n          gap: 1rem;\n        }\n      }\n    }\n  }\n}"] });
+            i0.ɵɵconditional(ctx.isLoading ? 25 : -1);
+        } }, dependencies: [i1.NgTemplateOutlet, i2.LoaderComponent, i3.DropDownListComponent, i4.TextBoxComponent, i4.TextBoxPrefixTemplateDirective, i5.ButtonComponent, i5.ChipComponent, i1.DatePipe], styles: [".actions-list-view[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--kendo-color-app-surface);\n\n  .list-header {\n    padding: 1.5rem;\n    border-bottom: 1px solid var(--kendo-color-border);\n    background: var(--kendo-color-surface);\n\n    .header-title {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin-bottom: 1rem;\n\n      h2 {\n        margin: 0;\n        font-size: 1.5rem;\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      .results-count {\n        font-size: 0.875rem;\n        color: var(--kendo-color-subtle);\n        font-weight: 600;\n      }\n    }\n\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-group {\n        display: flex;\n        gap: 0.75rem;\n        \n        kendo-dropdownlist {\n          min-width: 140px;\n        }\n        \n        .category-filter-button {\n          display: flex;\n          align-items: center;\n          gap: 8px;\n          \n          i {\n            font-size: 14px;\n          }\n          \n          .badge {\n            background: var(--kendo-color-primary-subtle);\n            color: var(--kendo-color-primary);\n            padding: 2px 8px;\n            border-radius: 12px;\n            font-size: 12px;\n            margin-left: 8px;\n          }\n        }\n      }\n    }\n  }\n  \n  .category-tree-panel {\n    position: absolute;\n    top: 120px;\n    right: 20px;\n    width: 350px;\n    max-height: 70vh;\n    background: var(--kendo-color-surface);\n    border: 1px solid var(--kendo-color-border);\n    border-radius: 8px;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n    z-index: 100;\n    display: flex;\n    flex-direction: column;\n    \n    .tree-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 12px 16px;\n      border-bottom: 1px solid var(--kendo-color-border);\n      \n      h3 {\n        margin: 0;\n        font-size: 16px;\n        font-weight: 600;\n      }\n    }\n    \n    .tree-actions {\n      padding: 8px;\n      border-bottom: 1px solid var(--kendo-color-border);\n      \n      button {\n        width: 100%;\n        justify-content: flex-start;\n        \n        &.selected {\n          background: var(--kendo-color-primary-subtle);\n        }\n        \n        .badge {\n          margin-left: auto;\n          background: var(--kendo-color-base-subtle);\n          color: var(--kendo-color-on-app-surface);\n          padding: 2px 8px;\n          border-radius: 12px;\n          font-size: 11px;\n        }\n      }\n    }\n    \n    .tree-content {\n      flex: 1;\n      overflow-y: auto;\n      padding: 8px;\n      \n      .tree-node {\n        .tree-node-button {\n          width: 100%;\n          justify-content: flex-start;\n          padding-left: 8px;\n          margin-bottom: 2px;\n          \n          &.selected {\n            background: var(--kendo-color-primary-subtle);\n            color: var(--kendo-color-primary);\n          }\n          \n          .expand-button {\n            padding: 0;\n            min-width: 20px;\n            width: 20px;\n            height: 20px;\n            margin-right: 4px;\n            \n            i {\n              font-size: 10px;\n            }\n          }\n          \n          .no-expand {\n            display: inline-block;\n            width: 24px;\n          }\n          \n          i.fa-folder {\n            margin-right: 6px;\n            color: var(--kendo-color-warning);\n          }\n          \n          .badge {\n            margin-left: auto;\n            background: var(--kendo-color-base-subtle);\n            color: var(--kendo-color-on-app-surface);\n            padding: 2px 6px;\n            border-radius: 12px;\n            font-size: 11px;\n          }\n        }\n      }\n    }\n  }\n\n  .actions-list {\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\n    padding: 1.5rem;\n\n    .action-card {\n      display: flex;\n      align-items: flex-start;\n      gap: 1rem;\n      padding: 1.5rem;\n      background: var(--kendo-color-surface);\n      border: 1px solid var(--kendo-color-border);\n      border-radius: 0.75rem;\n      margin-bottom: 1rem;\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        transform: translateY(-1px);\n        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n      }\n\n      .action-icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 3rem;\n        height: 3rem;\n        border-radius: 0.5rem;\n        background: var(--kendo-color-primary-subtle);\n        flex-shrink: 0;\n\n        i {\n          color: var(--kendo-color-primary);\n          font-size: 1.25rem;\n        }\n      }\n\n      .action-main {\n        flex: 1;\n\n        .action-header {\n          display: flex;\n          align-items: flex-start;\n          justify-content: space-between;\n          margin-bottom: 0.75rem;\n\n          .action-name {\n            margin: 0;\n            font-size: 1.125rem;\n            font-weight: 600;\n            color: var(--kendo-color-on-app-surface);\n          }\n\n          .action-badges {\n            display: flex;\n            gap: 0.5rem;\n            flex-shrink: 0;\n\n            kendo-chip {\n              &:has(i) {\n                display: flex;\n                align-items: center;\n                gap: 0.25rem;\n              }\n            }\n          }\n        }\n\n        .action-description {\n          color: var(--kendo-color-subtle);\n          line-height: 1.5;\n          margin-bottom: 1rem;\n        }\n\n        .action-details {\n          display: flex;\n          gap: 1.5rem;\n          flex-wrap: wrap;\n\n          .detail-item {\n            display: flex;\n            align-items: center;\n            gap: 0.375rem;\n            font-size: 0.75rem;\n            color: var(--kendo-color-subtle);\n\n            i {\n              color: var(--kendo-color-primary);\n              width: 0.75rem;\n            }\n          }\n        }\n      }\n\n      .action-actions {\n        flex-shrink: 0;\n\n        button {\n          opacity: 0;\n          transition: opacity 0.2s ease;\n        }\n      }\n\n      &:hover .action-actions button {\n        opacity: 1;\n      }\n    }\n\n    .empty-state {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 3rem 2rem;\n      text-align: center;\n      color: var(--kendo-color-subtle);\n\n      i {\n        font-size: 3rem;\n        margin-bottom: 1rem;\n        opacity: 0.5;\n      }\n\n      h3 {\n        margin: 0 0 0.5rem 0;\n        font-size: 1.125rem;\n        font-weight: 600;\n      }\n\n      p {\n        margin: 0;\n        font-size: 0.875rem;\n      }\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%]:   768px)[_ngcontent-%COMP%] {\n  .actions-list-view {\n    .list-header {\n      padding: 1rem;\n\n      .header-title {\n        flex-direction: column;\n        align-items: stretch;\n        gap: 0.5rem;\n      }\n\n      .filters-row {\n        flex-direction: column;\n        align-items: stretch;\n\n        .search-container,\n        .filter-group {\n          min-width: unset;\n        }\n\n        .filter-group {\n          display: grid;\n          grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n          gap: 0.5rem;\n        }\n      }\n    }\n\n    .actions-list {\n      padding: 1rem;\n\n      .action-card {\n        padding: 1rem;\n\n        .action-main .action-header {\n          flex-direction: column;\n          align-items: stretch;\n          gap: 0.5rem;\n\n          .action-badges {\n            align-self: flex-start;\n          }\n        }\n\n        .action-main .action-details {\n          gap: 1rem;\n        }\n      }\n    }\n  }\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ActionsListViewComponent, [{
         type: Component,
-        args: [{ selector: 'mj-actions-list-view', template: "<div class=\"actions-list-view\" >\n  <!-- Header with filters -->\n  <div class=\"list-header\">\n    <div class=\"header-title\">\n      <h2><i class=\"fa-solid fa-cogs\"></i> Actions</h2>\n      <div class=\"results-count\">{{ filteredActions.length }} of {{ actions.length }} actions</div>\n    </div>\n    \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-group\">\n        <kendo-dropdownlist \n          [data]=\"statusOptions\"\n          textField=\"text\"\n          valueField=\"value\"\n          [value]=\"selectedStatus$.value\"\n          (valueChange)=\"onStatusFilterChange($event)\">\n        </kendo-dropdownlist>\n        \n        <kendo-dropdownlist \n          [data]=\"typeOptions\"\n          textField=\"text\"\n          valueField=\"value\"\n          [value]=\"selectedType$.value\"\n          (valueChange)=\"onTypeFilterChange($event)\">\n        </kendo-dropdownlist>\n        \n        <kendo-dropdownlist \n          [data]=\"categoryOptions\"\n          textField=\"text\"\n          valueField=\"value\"\n          [value]=\"selectedCategory$.value\"\n          (valueChange)=\"onCategoryFilterChange($event)\">\n        </kendo-dropdownlist>\n      </div>\n    </div>\n  </div>\n\n  <!-- Actions List -->\n  <div class=\"actions-list\">\n    @if (filteredActions.length > 0) {\n      @for (action of filteredActions; track action.ID) {\n        <div class=\"action-card\" (click)=\"openAction(action)\">\n          <div class=\"action-icon\">\n            <i [class]=\"getActionIcon(action)\"></i>\n          </div>\n          \n          <div class=\"action-main\">\n            <div class=\"action-header\">\n              <h3 class=\"action-name\">{{ action.Name }}</h3>\n              <div class=\"action-badges\">\n                <kendo-chip \n                  [themeColor]=\"getStatusColor(action.Status)\"\n                  [size]=\"'small'\">\n                  {{ action.Status }}\n                </kendo-chip>\n                @if (action.Type === 'Generated') {\n                  <kendo-chip \n                    themeColor=\"info\"\n                    [size]=\"'small'\">\n                    <i class=\"fa-solid fa-robot\"></i> AI Generated\n                  </kendo-chip>\n                }\n              </div>\n            </div>\n            \n            <div class=\"action-description\">\n              {{ action.Description || 'No description available' }}\n            </div>\n            \n            <div class=\"action-details\">\n              <div class=\"detail-item\">\n                <i class=\"fa-solid fa-folder\"></i>\n                <span>{{ getCategoryName(action.CategoryID) }}</span>\n              </div>\n              @if (action.__mj_UpdatedAt) {\n                <div class=\"detail-item\">\n                  <i class=\"fa-solid fa-clock\"></i>\n                  <span>Updated {{ action.__mj_UpdatedAt | date:'MMM d, yyyy' }}</span>\n                </div>\n              }\n              @if (action.CodeApprovalStatus && action.Type === 'Generated') {\n                <div class=\"detail-item\">\n                  <i class=\"fa-solid fa-check-circle\"></i>\n                  <span>{{ action.CodeApprovalStatus }}</span>\n                </div>\n              }\n            </div>\n          </div>\n          \n          <div class=\"action-actions\">\n            <button kendoButton \n              [fillMode]=\"'flat'\" \n              [icon]=\"'more-vertical'\"\n              (click)=\"$event.stopPropagation()\">\n            </button>\n          </div>\n        </div>\n      }\n    } @else if (!isLoading) {\n      <div class=\"empty-state\">\n        <i class=\"fa-solid fa-search\"></i>\n        <h3>No actions found</h3>\n        <p>Try adjusting your search or filter criteria</p>\n      </div>\n    }\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-list-view {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--kendo-color-app-surface);\n\n  .list-header {\n    padding: 1.5rem;\n    border-bottom: 1px solid var(--kendo-color-border);\n    background: var(--kendo-color-surface);\n\n    .header-title {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin-bottom: 1rem;\n\n      h2 {\n        margin: 0;\n        font-size: 1.5rem;\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      .results-count {\n        font-size: 0.875rem;\n        color: var(--kendo-color-subtle);\n        font-weight: 600;\n      }\n    }\n\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-group {\n        display: flex;\n        gap: 0.75rem;\n        \n        kendo-dropdownlist {\n          min-width: 140px;\n        }\n      }\n    }\n  }\n\n  .actions-list {\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\n    padding: 1.5rem;\n\n    .action-card {\n      display: flex;\n      align-items: flex-start;\n      gap: 1rem;\n      padding: 1.5rem;\n      background: var(--kendo-color-surface);\n      border: 1px solid var(--kendo-color-border);\n      border-radius: 0.75rem;\n      margin-bottom: 1rem;\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        transform: translateY(-1px);\n        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n      }\n\n      .action-icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 3rem;\n        height: 3rem;\n        border-radius: 0.5rem;\n        background: var(--kendo-color-primary-subtle);\n        flex-shrink: 0;\n\n        i {\n          color: var(--kendo-color-primary);\n          font-size: 1.25rem;\n        }\n      }\n\n      .action-main {\n        flex: 1;\n\n        .action-header {\n          display: flex;\n          align-items: flex-start;\n          justify-content: space-between;\n          margin-bottom: 0.75rem;\n\n          .action-name {\n            margin: 0;\n            font-size: 1.125rem;\n            font-weight: 600;\n            color: var(--kendo-color-on-app-surface);\n          }\n\n          .action-badges {\n            display: flex;\n            gap: 0.5rem;\n            flex-shrink: 0;\n\n            kendo-chip {\n              &:has(i) {\n                display: flex;\n                align-items: center;\n                gap: 0.25rem;\n              }\n            }\n          }\n        }\n\n        .action-description {\n          color: var(--kendo-color-subtle);\n          line-height: 1.5;\n          margin-bottom: 1rem;\n        }\n\n        .action-details {\n          display: flex;\n          gap: 1.5rem;\n          flex-wrap: wrap;\n\n          .detail-item {\n            display: flex;\n            align-items: center;\n            gap: 0.375rem;\n            font-size: 0.75rem;\n            color: var(--kendo-color-subtle);\n\n            i {\n              color: var(--kendo-color-primary);\n              width: 0.75rem;\n            }\n          }\n        }\n      }\n\n      .action-actions {\n        flex-shrink: 0;\n\n        button {\n          opacity: 0;\n          transition: opacity 0.2s ease;\n        }\n      }\n\n      &:hover .action-actions button {\n        opacity: 1;\n      }\n    }\n\n    .empty-state {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 3rem 2rem;\n      text-align: center;\n      color: var(--kendo-color-subtle);\n\n      i {\n        font-size: 3rem;\n        margin-bottom: 1rem;\n        opacity: 0.5;\n      }\n\n      h3 {\n        margin: 0 0 0.5rem 0;\n        font-size: 1.125rem;\n        font-weight: 600;\n      }\n\n      p {\n        margin: 0;\n        font-size: 0.875rem;\n      }\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: 768px) {\n  .actions-list-view {\n    .list-header {\n      padding: 1rem;\n\n      .header-title {\n        flex-direction: column;\n        align-items: stretch;\n        gap: 0.5rem;\n      }\n\n      .filters-row {\n        flex-direction: column;\n        align-items: stretch;\n\n        .search-container,\n        .filter-group {\n          min-width: unset;\n        }\n\n        .filter-group {\n          display: grid;\n          grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n          gap: 0.5rem;\n        }\n      }\n    }\n\n    .actions-list {\n      padding: 1rem;\n\n      .action-card {\n        padding: 1rem;\n\n        .action-main .action-header {\n          flex-direction: column;\n          align-items: stretch;\n          gap: 0.5rem;\n\n          .action-badges {\n            align-self: flex-start;\n          }\n        }\n\n        .action-main .action-details {\n          gap: 1rem;\n        }\n      }\n    }\n  }\n}"] }]
+        args: [{ selector: 'mj-actions-list-view', template: "<div class=\"actions-list-view\" >\n  <!-- Header with filters -->\n  <div class=\"list-header\">\n    <div class=\"header-title\">\n      <h2><i class=\"fa-solid fa-cogs\"></i> Actions</h2>\n      <div class=\"results-count\">{{ filteredActions.length }} of {{ actions.length }} actions</div>\n    </div>\n    \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-group\">\n        <kendo-dropdownlist \n          [data]=\"statusOptions\"\n          textField=\"text\"\n          valueField=\"value\"\n          [valuePrimitive]=\"true\"\n          [value]=\"selectedStatus$.value\"\n          (valueChange)=\"onStatusFilterChange($event)\">\n        </kendo-dropdownlist>\n        \n        <kendo-dropdownlist \n          [data]=\"typeOptions\"\n          textField=\"text\"\n          valueField=\"value\"\n          [valuePrimitive]=\"true\"\n          [value]=\"selectedType$.value\"\n          (valueChange)=\"onTypeFilterChange($event)\">\n        </kendo-dropdownlist>\n        \n        <button kendoButton\n          [fillMode]=\"'outline'\"\n          (click)=\"toggleCategoryTree()\"\n          class=\"category-filter-button\">\n          <i class=\"fa-solid fa-folder-tree\"></i>\n          @if (selectedCategory$.value === 'all') {\n            All Categories\n          } @else {\n            {{ getCategoryName(selectedCategory$.value) }}\n          }\n          <span class=\"badge\">{{ getCategoryActionCount(selectedCategory$.value) }}</span>\n        </button>\n      </div>\n    </div>\n  </div>\n  \n  <!-- Category Tree View Panel -->\n  @if (showCategoryTree) {\n    <div class=\"category-tree-panel\">\n      <div class=\"tree-header\">\n        <h3>Select Category</h3>\n        <button kendoButton\n          [fillMode]=\"'flat'\"\n          [size]=\"'small'\"\n          (click)=\"toggleCategoryTree()\">\n          <i class=\"fa-solid fa-times\"></i>\n        </button>\n      </div>\n      \n      <div class=\"tree-actions\">\n        <button kendoButton\n          [fillMode]=\"'flat'\"\n          [size]=\"'small'\"\n          (click)=\"selectCategory('all')\"\n          [class.selected]=\"selectedCategory$.value === 'all'\">\n          <i class=\"fa-solid fa-folder-open\"></i>\n          All Categories\n          <span class=\"badge\">{{ actions.length }}</span>\n        </button>\n      </div>\n      \n      <div class=\"tree-content\">\n        <ng-container *ngTemplateOutlet=\"categoryTreeTemplate; context: { nodes: categoryTree }\"></ng-container>\n      </div>\n      \n      <ng-template #categoryTreeTemplate let-nodes=\"nodes\">\n        @for (node of nodes; track node.category.ID) {\n          <div class=\"tree-node\" [style.padding-left.px]=\"node.level * 20\">\n            <button kendoButton\n              [fillMode]=\"'flat'\"\n              [size]=\"'small'\"\n              class=\"tree-node-button\"\n              [class.selected]=\"selectedCategory$.value === node.category.ID\"\n              (click)=\"selectCategory(node.category.ID)\">\n              \n              @if (node.children.length > 0) {\n                <button kendoButton\n                  [fillMode]=\"'flat'\"\n                  [size]=\"'small'\"\n                  class=\"expand-button\"\n                  (click)=\"toggleCategoryExpanded(node.category.ID); $event.stopPropagation()\">\n                  @if (isCategoryExpanded(node.category.ID)) {\n                    <i class=\"fa-solid fa-chevron-down\"></i>\n                  } @else {\n                    <i class=\"fa-solid fa-chevron-right\"></i>\n                  }\n                </button>\n              } @else {\n                <span class=\"no-expand\"></span>\n              }\n              \n              <i class=\"fa-solid fa-folder\"></i>\n              {{ node.category.Name }}\n              <span class=\"badge\">{{ getCategoryActionCount(node.category.ID) }}</span>\n            </button>\n            \n            @if (node.children.length > 0 && isCategoryExpanded(node.category.ID)) {\n              <ng-container *ngTemplateOutlet=\"categoryTreeTemplate; context: { nodes: node.children }\"></ng-container>\n            }\n          </div>\n        }\n      </ng-template>\n    </div>\n  }\n\n  <!-- Actions List -->\n  <div class=\"actions-list\">\n    @if (filteredActions.length > 0) {\n      @for (action of filteredActions; track action.ID) {\n        <div class=\"action-card\" (click)=\"openAction(action)\">\n          <div class=\"action-icon\">\n            <i [class]=\"getActionIcon(action)\"></i>\n          </div>\n          \n          <div class=\"action-main\">\n            <div class=\"action-header\">\n              <h3 class=\"action-name\">{{ action.Name }}</h3>\n              <div class=\"action-badges\">\n                <kendo-chip \n                  [themeColor]=\"getStatusColor(action.Status)\"\n                  [size]=\"'small'\">\n                  {{ action.Status }}\n                </kendo-chip>\n                @if (action.Type === 'Generated') {\n                  <kendo-chip \n                    themeColor=\"info\"\n                    [size]=\"'small'\">\n                    <i class=\"fa-solid fa-robot\"></i> AI Generated\n                  </kendo-chip>\n                }\n              </div>\n            </div>\n            \n            <div class=\"action-description\">\n              {{ action.Description || 'No description available' }}\n            </div>\n            \n            <div class=\"action-details\">\n              <div class=\"detail-item\">\n                <i class=\"fa-solid fa-folder\"></i>\n                <span>{{ getCategoryName(action.CategoryID) }}</span>\n              </div>\n              @if (action.__mj_UpdatedAt) {\n                <div class=\"detail-item\">\n                  <i class=\"fa-solid fa-clock\"></i>\n                  <span>Updated {{ action.__mj_UpdatedAt | date:'MMM d, yyyy' }}</span>\n                </div>\n              }\n              @if (action.CodeApprovalStatus && action.Type === 'Generated') {\n                <div class=\"detail-item\">\n                  <i class=\"fa-solid fa-check-circle\"></i>\n                  <span>{{ action.CodeApprovalStatus }}</span>\n                </div>\n              }\n            </div>\n          </div>\n          \n          <div class=\"action-actions\">\n            <button kendoButton \n              [fillMode]=\"'flat'\"\n              (click)=\"$event.stopPropagation()\">\n              <i class=\"fa-solid fa-ellipsis-vertical\"></i>\n            </button>\n          </div>\n        </div>\n      }\n    } @else if (!isLoading) {\n      <div class=\"empty-state\">\n        <i class=\"fa-solid fa-search\"></i>\n        <h3>No actions found</h3>\n        <p>Try adjusting your search or filter criteria</p>\n      </div>\n    }\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-list-view {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--kendo-color-app-surface);\n\n  .list-header {\n    padding: 1.5rem;\n    border-bottom: 1px solid var(--kendo-color-border);\n    background: var(--kendo-color-surface);\n\n    .header-title {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin-bottom: 1rem;\n\n      h2 {\n        margin: 0;\n        font-size: 1.5rem;\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      .results-count {\n        font-size: 0.875rem;\n        color: var(--kendo-color-subtle);\n        font-weight: 600;\n      }\n    }\n\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-group {\n        display: flex;\n        gap: 0.75rem;\n        \n        kendo-dropdownlist {\n          min-width: 140px;\n        }\n        \n        .category-filter-button {\n          display: flex;\n          align-items: center;\n          gap: 8px;\n          \n          i {\n            font-size: 14px;\n          }\n          \n          .badge {\n            background: var(--kendo-color-primary-subtle);\n            color: var(--kendo-color-primary);\n            padding: 2px 8px;\n            border-radius: 12px;\n            font-size: 12px;\n            margin-left: 8px;\n          }\n        }\n      }\n    }\n  }\n  \n  .category-tree-panel {\n    position: absolute;\n    top: 120px;\n    right: 20px;\n    width: 350px;\n    max-height: 70vh;\n    background: var(--kendo-color-surface);\n    border: 1px solid var(--kendo-color-border);\n    border-radius: 8px;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n    z-index: 100;\n    display: flex;\n    flex-direction: column;\n    \n    .tree-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 12px 16px;\n      border-bottom: 1px solid var(--kendo-color-border);\n      \n      h3 {\n        margin: 0;\n        font-size: 16px;\n        font-weight: 600;\n      }\n    }\n    \n    .tree-actions {\n      padding: 8px;\n      border-bottom: 1px solid var(--kendo-color-border);\n      \n      button {\n        width: 100%;\n        justify-content: flex-start;\n        \n        &.selected {\n          background: var(--kendo-color-primary-subtle);\n        }\n        \n        .badge {\n          margin-left: auto;\n          background: var(--kendo-color-base-subtle);\n          color: var(--kendo-color-on-app-surface);\n          padding: 2px 8px;\n          border-radius: 12px;\n          font-size: 11px;\n        }\n      }\n    }\n    \n    .tree-content {\n      flex: 1;\n      overflow-y: auto;\n      padding: 8px;\n      \n      .tree-node {\n        .tree-node-button {\n          width: 100%;\n          justify-content: flex-start;\n          padding-left: 8px;\n          margin-bottom: 2px;\n          \n          &.selected {\n            background: var(--kendo-color-primary-subtle);\n            color: var(--kendo-color-primary);\n          }\n          \n          .expand-button {\n            padding: 0;\n            min-width: 20px;\n            width: 20px;\n            height: 20px;\n            margin-right: 4px;\n            \n            i {\n              font-size: 10px;\n            }\n          }\n          \n          .no-expand {\n            display: inline-block;\n            width: 24px;\n          }\n          \n          i.fa-folder {\n            margin-right: 6px;\n            color: var(--kendo-color-warning);\n          }\n          \n          .badge {\n            margin-left: auto;\n            background: var(--kendo-color-base-subtle);\n            color: var(--kendo-color-on-app-surface);\n            padding: 2px 6px;\n            border-radius: 12px;\n            font-size: 11px;\n          }\n        }\n      }\n    }\n  }\n\n  .actions-list {\n    flex: 1;\n    min-height: 0;\n    overflow-y: auto;\n    padding: 1.5rem;\n\n    .action-card {\n      display: flex;\n      align-items: flex-start;\n      gap: 1rem;\n      padding: 1.5rem;\n      background: var(--kendo-color-surface);\n      border: 1px solid var(--kendo-color-border);\n      border-radius: 0.75rem;\n      margin-bottom: 1rem;\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        transform: translateY(-1px);\n        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n      }\n\n      .action-icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 3rem;\n        height: 3rem;\n        border-radius: 0.5rem;\n        background: var(--kendo-color-primary-subtle);\n        flex-shrink: 0;\n\n        i {\n          color: var(--kendo-color-primary);\n          font-size: 1.25rem;\n        }\n      }\n\n      .action-main {\n        flex: 1;\n\n        .action-header {\n          display: flex;\n          align-items: flex-start;\n          justify-content: space-between;\n          margin-bottom: 0.75rem;\n\n          .action-name {\n            margin: 0;\n            font-size: 1.125rem;\n            font-weight: 600;\n            color: var(--kendo-color-on-app-surface);\n          }\n\n          .action-badges {\n            display: flex;\n            gap: 0.5rem;\n            flex-shrink: 0;\n\n            kendo-chip {\n              &:has(i) {\n                display: flex;\n                align-items: center;\n                gap: 0.25rem;\n              }\n            }\n          }\n        }\n\n        .action-description {\n          color: var(--kendo-color-subtle);\n          line-height: 1.5;\n          margin-bottom: 1rem;\n        }\n\n        .action-details {\n          display: flex;\n          gap: 1.5rem;\n          flex-wrap: wrap;\n\n          .detail-item {\n            display: flex;\n            align-items: center;\n            gap: 0.375rem;\n            font-size: 0.75rem;\n            color: var(--kendo-color-subtle);\n\n            i {\n              color: var(--kendo-color-primary);\n              width: 0.75rem;\n            }\n          }\n        }\n      }\n\n      .action-actions {\n        flex-shrink: 0;\n\n        button {\n          opacity: 0;\n          transition: opacity 0.2s ease;\n        }\n      }\n\n      &:hover .action-actions button {\n        opacity: 1;\n      }\n    }\n\n    .empty-state {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 3rem 2rem;\n      text-align: center;\n      color: var(--kendo-color-subtle);\n\n      i {\n        font-size: 3rem;\n        margin-bottom: 1rem;\n        opacity: 0.5;\n      }\n\n      h3 {\n        margin: 0 0 0.5rem 0;\n        font-size: 1.125rem;\n        font-weight: 600;\n      }\n\n      p {\n        margin: 0;\n        font-size: 0.875rem;\n      }\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: 768px) {\n  .actions-list-view {\n    .list-header {\n      padding: 1rem;\n\n      .header-title {\n        flex-direction: column;\n        align-items: stretch;\n        gap: 0.5rem;\n      }\n\n      .filters-row {\n        flex-direction: column;\n        align-items: stretch;\n\n        .search-container,\n        .filter-group {\n          min-width: unset;\n        }\n\n        .filter-group {\n          display: grid;\n          grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n          gap: 0.5rem;\n        }\n      }\n    }\n\n    .actions-list {\n      padding: 1rem;\n\n      .action-card {\n        padding: 1rem;\n\n        .action-main .action-header {\n          flex-direction: column;\n          align-items: stretch;\n          gap: 0.5rem;\n\n          .action-badges {\n            align-self: flex-start;\n          }\n        }\n\n        .action-main .action-details {\n          gap: 1rem;\n        }\n      }\n    }\n  }\n}"] }]
     }], () => [], { openEntityRecord: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ActionsListViewComponent, { className: "ActionsListViewComponent", filePath: "src/Actions/components/actions-list-view.component.ts", lineNumber: 12 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ActionsListViewComponent, { className: "ActionsListViewComponent", filePath: "src/Actions/components/actions-list-view.component.ts", lineNumber: 18 }); })();
 //# sourceMappingURL=actions-list-view.component.js.map