@memberjunction/ng-dashboards 2.129.0 → 2.130.1

package/dist/Testing/components/testing-execution.component.js

@@ -1,97 +1,104 @@
 import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
-import { Subject, combineLatest } from 'rxjs';
+import { Subject, combineLatest, BehaviorSubject } from 'rxjs';
 import { takeUntil, map } from 'rxjs/operators';
-import { CompositeKey } from '@memberjunction/core';
+import { CompositeKey, Metadata } from '@memberjunction/core';
 import { SharedService } from '@memberjunction/ng-shared';
+import { GraphQLTestingClient } from '@memberjunction/graphql-dataprovider';
 import { TestRunDialogComponent } from '@memberjunction/ng-testing';
 import * as i0 from "@angular/core";
 import * as i1 from "../services/testing-instrumentation.service";
 import * as i2 from "@progress/kendo-angular-dialog";
-import * as i3 from "@angular/common";
-import * as i4 from "@angular/forms";
-import * as i5 from "@memberjunction/ng-testing";
+import * as i3 from "@angular/forms";
+import * as i4 from "@memberjunction/ng-testing";
+import * as i5 from "@memberjunction/ng-shared-generic";
+import * as i6 from "@angular/common";
 const _forTrack0 = ($index, $item) => $item.id;
 const _c0 = () => [];
-function TestingExecutionComponent_div_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 51);
-    i0.ɵɵelement(1, "span", 52);
-    i0.ɵɵelementStart(2, "span", 53);
+function TestingExecutionComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 9);
+    i0.ɵɵelement(1, "span", 61);
+    i0.ɵɵelementStart(2, "span", 62);
     i0.ɵɵtext(3, "Live");
     i0.ɵɵelementEnd()();
 } }
-function TestingExecutionComponent_button_48_Template(rf, ctx) { if (rf & 1) {
+function TestingExecutionComponent_Conditional_51_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 54);
-    i0.ɵɵlistener("click", function TestingExecutionComponent_button_48_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.clearSearch()); });
-    i0.ɵɵelement(1, "i", 55);
+    i0.ɵɵelementStart(0, "button", 63);
+    i0.ɵɵlistener("click", function TestingExecutionComponent_Conditional_51_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.clearSearch()); });
+    i0.ɵɵelement(1, "i", 23);
     i0.ɵɵelementEnd();
 } }
-function TestingExecutionComponent_Conditional_103_Template(rf, ctx) { if (rf & 1) {
+function TestingExecutionComponent_Conditional_112_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 58);
+    i0.ɵɵelement(1, "mj-loading", 64);
+    i0.ɵɵelementEnd();
+} }
+function TestingExecutionComponent_Conditional_114_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 49);
-    i0.ɵɵelement(1, "i", 56);
+    i0.ɵɵelementStart(0, "div", 59);
+    i0.ɵɵelement(1, "i", 65);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No test executions found");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 8);
-    i0.ɵɵlistener("click", function TestingExecutionComponent_Conditional_103_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.startNewTest()); });
-    i0.ɵɵelement(5, "i", 9);
+    i0.ɵɵelementStart(4, "button", 66);
+    i0.ɵɵlistener("click", function TestingExecutionComponent_Conditional_114_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.startNewTest()); });
+    i0.ɵɵelement(5, "i", 14);
     i0.ɵɵtext(6, " Run Your First Test ");
     i0.ɵɵelementEnd()();
 } }
-function TestingExecutionComponent_For_106_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 64);
-    i0.ɵɵelement(1, "div", 76);
+function TestingExecutionComponent_For_116_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 74);
+    i0.ɵɵelement(1, "div", 86);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const execution_r5 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
     i0.ɵɵstyleProp("width", execution_r5.progress, "%");
 } }
-function TestingExecutionComponent_For_106_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+function TestingExecutionComponent_For_116_Conditional_22_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 77);
-    i0.ɵɵlistener("click", function TestingExecutionComponent_For_106_Conditional_22_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const execution_r5 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelExecution(execution_r5)); });
-    i0.ɵɵelement(1, "i", 78);
+    i0.ɵɵelementStart(0, "button", 87);
+    i0.ɵɵlistener("click", function TestingExecutionComponent_For_116_Conditional_22_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const execution_r5 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelExecution(execution_r5)); });
+    i0.ɵɵelement(1, "i", 88);
     i0.ɵɵelementEnd();
 } }
-function TestingExecutionComponent_For_106_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+function TestingExecutionComponent_For_116_Conditional_23_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 79);
-    i0.ɵɵlistener("click", function TestingExecutionComponent_For_106_Conditional_23_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const execution_r5 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.rerunTest(execution_r5)); });
-    i0.ɵɵelement(1, "i", 80);
+    i0.ɵɵelementStart(0, "button", 89);
+    i0.ɵɵlistener("click", function TestingExecutionComponent_For_116_Conditional_23_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const execution_r5 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.rerunTest(execution_r5)); });
+    i0.ɵɵelement(1, "i", 90);
     i0.ɵɵelementEnd();
 } }
-function TestingExecutionComponent_For_106_Template(rf, ctx) { if (rf & 1) {
+function TestingExecutionComponent_For_116_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 57)(1, "div", 58)(2, "div", 59)(3, "div", 60);
+    i0.ɵɵelementStart(0, "div", 67)(1, "div", 68)(2, "div", 69)(3, "div", 70);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 61);
+    i0.ɵɵelementStart(5, "div", 71);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(7, "div", 62);
-    i0.ɵɵelement(8, "app-test-status-badge", 63);
-    i0.ɵɵtemplate(9, TestingExecutionComponent_For_106_Conditional_9_Template, 2, 2, "div", 64);
+    i0.ɵɵelementStart(7, "div", 72);
+    i0.ɵɵelement(8, "app-test-status-badge", 73);
+    i0.ɵɵtemplate(9, TestingExecutionComponent_For_116_Conditional_9_Template, 2, 2, "div", 74);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 65);
-    i0.ɵɵelement(11, "app-score-indicator", 66);
+    i0.ɵɵelementStart(10, "div", 75);
+    i0.ɵɵelement(11, "app-score-indicator", 76);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "div", 67);
+    i0.ɵɵelementStart(12, "div", 77);
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "div", 68);
-    i0.ɵɵelement(15, "app-cost-display", 69);
+    i0.ɵɵelementStart(14, "div", 78);
+    i0.ɵɵelement(15, "app-cost-display", 79);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "div", 70);
+    i0.ɵɵelementStart(16, "div", 80);
     i0.ɵɵtext(17);
     i0.ɵɵpipe(18, "date");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "div", 71)(20, "button", 72);
-    i0.ɵɵlistener("click", function TestingExecutionComponent_For_106_Template_button_click_20_listener() { const execution_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.viewDetails(execution_r5)); });
-    i0.ɵɵelement(21, "i", 73);
+    i0.ɵɵelementStart(19, "div", 81)(20, "button", 82);
+    i0.ɵɵlistener("click", function TestingExecutionComponent_For_116_Template_button_click_20_listener() { const execution_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.viewDetails(execution_r5)); });
+    i0.ɵɵelement(21, "i", 83);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(22, TestingExecutionComponent_For_106_Conditional_22_Template, 2, 0, "button", 74)(23, TestingExecutionComponent_For_106_Conditional_23_Template, 2, 0, "button", 75);
+    i0.ɵɵtemplate(22, TestingExecutionComponent_For_116_Conditional_22_Template, 2, 0, "button", 84)(23, TestingExecutionComponent_For_116_Conditional_23_Template, 2, 0, "button", 85);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const execution_r5 = ctx.$implicit;
@@ -120,17 +127,24 @@ export class TestingExecutionComponent {
     instrumentationService;
     dialogService;
     cdr;
+    viewContainerRef;
     initialState;
     stateChange = new EventEmitter();
     destroy$ = new Subject();
     activeDialogRef = null;
     isRefreshing = false;
+    isLoading = false;
+    lastUpdated = new Date();
     filters = {
         status: 'all',
         suite: 'all',
-        timeRange: 'today',
+        timeRange: 'month', // Default to "This Month" to show more data
         searchText: ''
     };
+    // Track previous time range to detect changes requiring server re-query
+    previousTimeRange = 'month';
+    // BehaviorSubject to trigger client-side filter updates
+    filterTrigger$ = new BehaviorSubject(undefined);
     executions$;
     filteredExecutions$;
     runningCount$;
@@ -138,16 +152,29 @@ export class TestingExecutionComponent {
     failedTodayCount$;
     avgDurationToday$;
     hasRunningTests$;
-    constructor(instrumentationService, dialogService, cdr) {
+    testingClient;
+    constructor(instrumentationService, dialogService, cdr, viewContainerRef) {
         this.instrumentationService = instrumentationService;
         this.dialogService = dialogService;
         this.cdr = cdr;
+        this.viewContainerRef = viewContainerRef;
+        // Initialize GraphQL testing client for cancel/rerun operations
+        const dataProvider = Metadata.Provider;
+        this.testingClient = new GraphQLTestingClient(dataProvider);
+        // Subscribe to loading state
+        this.instrumentationService.isLoading$.pipe(takeUntil(this.destroy$)).subscribe(loading => {
+            this.isLoading = loading;
+            this.cdr.markForCheck();
+        });
     }
     ngOnInit() {
-        this.setupObservables();
+        // Apply initial state if provided
         if (this.initialState) {
             this.filters = { ...this.filters, ...this.initialState.filters };
         }
+        // Set the service date range based on the selected time range filter
+        this.updateServiceDateRange();
+        this.setupObservables();
     }
     ngOnDestroy() {
         // Close any open dialog when component is destroyed
@@ -165,30 +192,22 @@ export class TestingExecutionComponent {
     }
     setupObservables() {
         this.executions$ = this.instrumentationService.testRuns$.pipe(map(runs => runs.map(run => this.mapToExecutionItem(run))), takeUntil(this.destroy$));
+        // Combine executions with filter trigger to react to client-side filter changes
         this.filteredExecutions$ = combineLatest([
-            this.executions$
+            this.executions$,
+            this.filterTrigger$
         ]).pipe(map(([executions]) => this.applyFilters(executions)), takeUntil(this.destroy$));
+        // KPI counts are now based on the full executions$ (which respects the service date range)
+        // This means the counts will match the selected time range filter
         this.runningCount$ = this.executions$.pipe(map(execs => execs.filter(e => e.status === 'Running').length));
-        this.completedTodayCount$ = this.executions$.pipe(map(execs => {
-            const today = new Date();
-            today.setHours(0, 0, 0, 0);
-            return execs.filter(e => e.status === 'Passed' &&
-                e.startedAt >= today).length;
-        }));
-        this.failedTodayCount$ = this.executions$.pipe(map(execs => {
-            const today = new Date();
-            today.setHours(0, 0, 0, 0);
-            return execs.filter(e => e.status === 'Failed' &&
-                e.startedAt >= today).length;
-        }));
+        this.completedTodayCount$ = this.executions$.pipe(map(execs => execs.filter(e => e.status === 'Passed').length));
+        this.failedTodayCount$ = this.executions$.pipe(map(execs => execs.filter(e => e.status === 'Failed' || e.status === 'Error').length));
         this.avgDurationToday$ = this.executions$.pipe(map(execs => {
-            const today = new Date();
-            today.setHours(0, 0, 0, 0);
-            const todayExecs = execs.filter(e => e.startedAt >= today && e.completedAt);
-            if (todayExecs.length === 0)
+            const completedExecs = execs.filter(e => e.completedAt || e.status !== 'Running');
+            if (completedExecs.length === 0)
                 return 0;
-            const totalDuration = todayExecs.reduce((sum, e) => sum + e.duration, 0);
-            return totalDuration / todayExecs.length;
+            const totalDuration = completedExecs.reduce((sum, e) => sum + e.duration, 0);
+            return totalDuration / completedExecs.length;
         }));
         this.hasRunningTests$ = this.runningCount$.pipe(map(count => count > 0));
     }
@@ -199,6 +218,7 @@ export class TestingExecutionComponent {
         const progress = run.status === 'Running' ? Math.random() * 100 : 100;
         return {
             id: run.id,
+            testId: run.testId,
             testName: run.testName,
             suiteName: run.suiteName,
             status: run.status,
@@ -212,6 +232,7 @@ export class TestingExecutionComponent {
     }
     applyFilters(executions) {
         let filtered = [...executions];
+        // Apply status filter
         if (this.filters.status !== 'all') {
             if (this.filters.status === 'running') {
                 filtered = filtered.filter(e => e.status === 'Running');
@@ -226,32 +247,51 @@ export class TestingExecutionComponent {
                 filtered = filtered.filter(e => e.status === 'Passed');
             }
         }
-        if (this.filters.timeRange !== 'all') {
-            const now = new Date();
-            let startDate = new Date();
-            if (this.filters.timeRange === 'today') {
-                startDate.setHours(0, 0, 0, 0);
-            }
-            else if (this.filters.timeRange === 'week') {
-                startDate = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
-            }
-            else if (this.filters.timeRange === 'month') {
-                startDate = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
-            }
-            filtered = filtered.filter(e => e.startedAt >= startDate);
-        }
+        // Note: Time range filtering is now handled by the service via updateServiceDateRange()
+        // This ensures the KPIs and list use the same data set
+        // Apply search text filter
         if (this.filters.searchText) {
             const searchLower = this.filters.searchText.toLowerCase();
             filtered = filtered.filter(e => e.testName.toLowerCase().includes(searchLower) ||
                 e.suiteName.toLowerCase().includes(searchLower));
         }
+        // Sort by most recent first
         filtered.sort((a, b) => b.startedAt.getTime() - a.startedAt.getTime());
         return filtered;
     }
     onFilterChange() {
+        // Only re-query server when time range changes - status/search filtering is client-side only
+        if (this.filters.timeRange !== this.previousTimeRange) {
+            this.previousTimeRange = this.filters.timeRange;
+            this.updateServiceDateRange();
+        }
+        // Trigger client-side filter update via observable
+        this.filterTrigger$.next();
         this.emitStateChange();
         this.cdr.markForCheck();
     }
+    updateServiceDateRange() {
+        const now = new Date();
+        let startDate;
+        switch (this.filters.timeRange) {
+            case 'today':
+                startDate = new Date(now);
+                startDate.setHours(0, 0, 0, 0);
+                break;
+            case 'week':
+                startDate = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
+                break;
+            case 'month':
+                startDate = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
+                break;
+            case 'all':
+            default:
+                // For "all time", use a very old date (e.g., 1 year ago)
+                startDate = new Date(now.getTime() - 365 * 24 * 60 * 60 * 1000);
+                break;
+        }
+        this.instrumentationService.setDateRange(startDate, now);
+    }
     clearSearch() {
         this.filters.searchText = '';
         this.onFilterChange();
@@ -261,9 +301,14 @@ export class TestingExecutionComponent {
         this.instrumentationService.refresh();
         setTimeout(() => {
             this.isRefreshing = false;
+            this.lastUpdated = new Date();
             this.cdr.markForCheck();
         }, 1000);
     }
+    filterByStatus(status) {
+        this.filters.status = status;
+        this.onFilterChange();
+    }
     startNewTest() {
         this.activeDialogRef = this.dialogService.open({
             content: TestRunDialogComponent,
@@ -289,11 +334,44 @@ export class TestingExecutionComponent {
     viewDetails(execution) {
         SharedService.Instance.OpenEntityRecord('MJ: Test Runs', CompositeKey.FromID(execution.id));
     }
-    cancelExecution(execution) {
-        console.log('Cancel execution:', execution);
+    async cancelExecution(execution) {
+        // For now, show a notification - full cancel support requires server-side CancelTest mutation
+        // which we documented in the plan but haven't implemented yet
+        SharedService.Instance.CreateSimpleNotification(`Cancellation requested for "${execution.testName}". Full cancellation support coming soon.`, 'warning', 3000);
+        // Refresh after a delay to pick up any status changes
+        setTimeout(() => this.refresh(), 1500);
     }
-    rerunTest(execution) {
-        console.log('Re-run test:', execution);
+    async rerunTest(execution) {
+        if (!execution.testId) {
+            SharedService.Instance.CreateSimpleNotification('Cannot re-run: Test ID not available', 'error', 3000);
+            return;
+        }
+        // Open the test run dialog with the test pre-selected
+        this.activeDialogRef = this.dialogService.open({
+            content: TestRunDialogComponent,
+            width: 1000,
+            height: 750,
+            title: 'Re-run Test',
+            actions: []
+        });
+        // Pre-configure the dialog with the test
+        const dialogComponent = this.activeDialogRef.content.instance;
+        dialogComponent.runMode = 'test';
+        dialogComponent.selectedTestId = execution.testId;
+        this.activeDialogRef.result.pipe(takeUntil(this.destroy$)).subscribe({
+            next: (result) => {
+                if (result && typeof result === 'object' && 'testExecuted' in result && result.testExecuted) {
+                    SharedService.Instance.CreateSimpleNotification(`Test "${execution.testName}" completed`, 'success', 3000);
+                    this.refresh();
+                }
+            },
+            error: () => {
+                this.activeDialogRef = null;
+            },
+            complete: () => {
+                this.activeDialogRef = null;
+            }
+        });
     }
     formatDuration(milliseconds) {
         if (milliseconds < 1000)
@@ -304,227 +382,304 @@ export class TestingExecutionComponent {
             return `${minutes}m ${seconds % 60}s`;
         return `${seconds}s`;
     }
+    getTimeRangeLabel() {
+        switch (this.filters.timeRange) {
+            case 'today': return 'Today';
+            case 'week': return 'This Week';
+            case 'month': return 'This Month';
+            case 'all': return 'All Time';
+            default: return '';
+        }
+    }
     emitStateChange() {
         this.stateChange.emit({
             filters: this.filters
         });
     }
-    static ɵfac = function TestingExecutionComponent_Factory(t) { return new (t || TestingExecutionComponent)(i0.ɵɵdirectiveInject(i1.TestingInstrumentationService), i0.ɵɵdirectiveInject(i2.DialogService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TestingExecutionComponent, selectors: [["app-testing-execution"]], inputs: { initialState: "initialState" }, outputs: { stateChange: "stateChange" }, decls: 108, vars: 28, consts: [["kendoDialogContainer", "", 1, "testing-execution"], [1, "execution-header"], [1, "header-left"], [1, "fa-solid", "fa-play-circle"], ["class", "live-indicator", 4, "ngIf"], [1, "header-actions"], [1, "action-btn", "refresh", 3, "click", "disabled"], [1, "fa-solid", "fa-refresh"], [1, "action-btn", "primary", 3, "click"], [1, "fa-solid", "fa-play"], [1, "execution-filters"], [1, "filter-group"], [3, "ngModelChange", "change", "ngModel"], ["value", "all"], ["value", "running"], ["value", "completed"], ["value", "failed"], ["value", "passed"], ["value", "today"], ["value", "week"], ["value", "month"], [1, "filter-group", "search"], [1, "search-input-wrapper"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search tests...", 3, "ngModelChange", "input", "ngModel"], ["class", "clear-btn", 3, "click", 4, "ngIf"], [1, "execution-summary"], [1, "summary-card"], [1, "summary-icon", "running"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "summary-content"], [1, "summary-value"], [1, "summary-label"], [1, "summary-icon", "completed"], [1, "fa-solid", "fa-check-circle"], [1, "summary-icon", "failed"], [1, "fa-solid", "fa-exclamation-circle"], [1, "summary-icon", "duration"], [1, "fa-solid", "fa-clock"], [1, "execution-content"], [1, "execution-list"], [1, "list-header"], [1, "header-cell", "test-name"], [1, "header-cell", "status"], [1, "header-cell", "score"], [1, "header-cell", "duration"], [1, "header-cell", "cost"], [1, "header-cell", "timestamp"], [1, "header-cell", "actions"], [1, "no-data"], [1, "execution-row", 3, "running"], [1, "live-indicator"], [1, "pulse"], [1, "text"], [1, "clear-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "fa-solid", "fa-inbox"], [1, "execution-row"], [1, "cell", "test-name"], [1, "test-info"], [1, "name"], [1, "suite"], [1, "cell", "status"], [3, "status"], [1, "progress-bar"], [1, "cell", "score"], [3, "score", "showBar", "showIcon"], [1, "cell", "duration"], [1, "cell", "cost"], [3, "cost", "showIcon"], [1, "cell", "timestamp"], [1, "cell", "actions"], ["title", "View Details", 1, "icon-btn", 3, "click"], [1, "fa-solid", "fa-eye"], ["title", "Cancel", 1, "icon-btn", "danger"], ["title", "Re-run", 1, "icon-btn"], [1, "progress-fill"], ["title", "Cancel", 1, "icon-btn", "danger", 3, "click"], [1, "fa-solid", "fa-stop"], ["title", "Re-run", 1, "icon-btn", 3, "click"], [1, "fa-solid", "fa-redo"]], template: function TestingExecutionComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h2");
-            i0.ɵɵelement(4, "i", 3);
-            i0.ɵɵtext(5, " Test Execution Monitor ");
+    static ɵfac = function TestingExecutionComponent_Factory(t) { return new (t || TestingExecutionComponent)(i0.ɵɵdirectiveInject(i1.TestingInstrumentationService), i0.ɵɵdirectiveInject(i2.DialogService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ViewContainerRef)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TestingExecutionComponent, selectors: [["app-testing-execution"]], inputs: { initialState: "initialState" }, outputs: { stateChange: "stateChange" }, decls: 118, vars: 41, consts: [["kendoDialogContainer", "", 1, "testing-execution"], [1, "execution-header"], [1, "header-left"], [1, "header-icon"], [1, "fa-solid", "fa-play-circle"], [1, "header-text"], [1, "header-meta"], [1, "last-updated"], [1, "fa-solid", "fa-clock"], [1, "live-indicator"], [1, "header-actions"], [1, "action-btn", "refresh-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-sync-alt"], [1, "action-btn", "primary-btn", 3, "click"], [1, "fa-solid", "fa-play"], [1, "filter-bar"], [1, "filter-chips"], [1, "filter-chip", 3, "click"], [1, "filter-chip", "running", 3, "click"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "filter-chip", "passed", 3, "click"], [1, "fa-solid", "fa-check"], [1, "filter-chip", "failed", 3, "click"], [1, "fa-solid", "fa-times"], [1, "filter-controls"], [1, "time-select"], [3, "ngModelChange", "change", "ngModel"], ["value", "today"], ["value", "week"], ["value", "month"], ["value", "all"], [1, "search-input"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search tests...", 3, "ngModelChange", "input", "ngModel"], [1, "clear-btn"], [1, "kpi-grid"], [1, "kpi-card", "running", "clickable", 3, "click"], [1, "kpi-icon"], [1, "kpi-content"], [1, "kpi-value"], [1, "kpi-label"], [1, "kpi-arrow"], [1, "fa-solid", "fa-chevron-right"], [1, "kpi-card", "passed", "clickable", 3, "click"], [1, "fa-solid", "fa-check-circle"], [1, "kpi-card", "failed", "clickable", 3, "click"], [1, "fa-solid", "fa-exclamation-circle"], [1, "kpi-card", "duration"], [1, "execution-content"], [1, "execution-list"], [1, "list-header"], [1, "header-cell", "test-name"], [1, "header-cell", "status"], [1, "header-cell", "score"], [1, "header-cell", "duration"], [1, "header-cell", "cost"], [1, "header-cell", "timestamp"], [1, "header-cell", "actions"], [1, "loading-placeholder"], [1, "no-data"], [1, "execution-row", 3, "running"], [1, "pulse"], [1, "text"], [1, "clear-btn", 3, "click"], ["text", "Loading test executions..."], [1, "fa-solid", "fa-inbox"], [1, "action-btn", "primary", 3, "click"], [1, "execution-row"], [1, "cell", "test-name"], [1, "test-info"], [1, "name"], [1, "suite"], [1, "cell", "status"], [3, "status"], [1, "progress-bar"], [1, "cell", "score"], [3, "score", "showBar", "showIcon"], [1, "cell", "duration"], [1, "cell", "cost"], [3, "cost", "showIcon"], [1, "cell", "timestamp"], [1, "cell", "actions"], ["title", "View Details", 1, "icon-btn", 3, "click"], [1, "fa-solid", "fa-eye"], ["title", "Cancel", 1, "icon-btn", "danger"], ["title", "Re-run", 1, "icon-btn"], [1, "progress-fill"], ["title", "Cancel", 1, "icon-btn", "danger", 3, "click"], [1, "fa-solid", "fa-stop"], ["title", "Re-run", 1, "icon-btn", 3, "click"], [1, "fa-solid", "fa-redo"]], template: function TestingExecutionComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3);
+            i0.ɵɵelement(4, "i", 4);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(6, TestingExecutionComponent_div_6_Template, 4, 0, "div", 4);
-            i0.ɵɵpipe(7, "async");
+            i0.ɵɵelementStart(5, "div", 5)(6, "h2");
+            i0.ɵɵtext(7, "Test Execution Monitor");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(8, "div", 5)(9, "button", 6);
-            i0.ɵɵlistener("click", function TestingExecutionComponent_Template_button_click_9_listener() { return ctx.refresh(); });
-            i0.ɵɵelement(10, "i", 7);
-            i0.ɵɵtext(11, " Refresh ");
+            i0.ɵɵelementStart(8, "div", 6)(9, "span", 7);
+            i0.ɵɵelement(10, "i", 8);
+            i0.ɵɵtext(11);
+            i0.ɵɵpipe(12, "date");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(12, "button", 8);
-            i0.ɵɵlistener("click", function TestingExecutionComponent_Template_button_click_12_listener() { return ctx.startNewTest(); });
-            i0.ɵɵelement(13, "i", 9);
-            i0.ɵɵtext(14, " Run Test ");
+            i0.ɵɵtemplate(13, TestingExecutionComponent_Conditional_13_Template, 4, 0, "div", 9);
+            i0.ɵɵpipe(14, "async");
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(15, "div", 10)(16, "div", 11)(17, "label");
-            i0.ɵɵtext(18, "Status");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(19, "select", 12);
-            i0.ɵɵtwoWayListener("ngModelChange", function TestingExecutionComponent_Template_select_ngModelChange_19_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.filters.status, $event) || (ctx.filters.status = $event); return $event; });
-            i0.ɵɵlistener("change", function TestingExecutionComponent_Template_select_change_19_listener() { return ctx.onFilterChange(); });
-            i0.ɵɵelementStart(20, "option", 13);
-            i0.ɵɵtext(21, "All Statuses");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(22, "option", 14);
-            i0.ɵɵtext(23, "Running");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(24, "option", 15);
-            i0.ɵɵtext(25, "Completed");
+            i0.ɵɵelementStart(15, "div", 10)(16, "button", 11);
+            i0.ɵɵlistener("click", function TestingExecutionComponent_Template_button_click_16_listener() { return ctx.refresh(); });
+            i0.ɵɵelement(17, "i", 12);
+            i0.ɵɵelementStart(18, "span");
+            i0.ɵɵtext(19, "Refresh");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(20, "button", 13);
+            i0.ɵɵlistener("click", function TestingExecutionComponent_Template_button_click_20_listener() { return ctx.startNewTest(); });
+            i0.ɵɵelement(21, "i", 14);
+            i0.ɵɵelementStart(22, "span");
+            i0.ɵɵtext(23, "Run Test");
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(24, "div", 15)(25, "div", 16)(26, "button", 17);
+            i0.ɵɵlistener("click", function TestingExecutionComponent_Template_button_click_26_listener() { ctx.filters.status = "all"; return ctx.onFilterChange(); });
+            i0.ɵɵtext(27, " All ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(26, "option", 16);
-            i0.ɵɵtext(27, "Failed");
+            i0.ɵɵelementStart(28, "button", 18);
+            i0.ɵɵlistener("click", function TestingExecutionComponent_Template_button_click_28_listener() { ctx.filters.status = "running"; return ctx.onFilterChange(); });
+            i0.ɵɵelement(29, "i", 19);
+            i0.ɵɵtext(30, " Running ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(28, "option", 17);
-            i0.ɵɵtext(29, "Passed");
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(30, "div", 11)(31, "label");
-            i0.ɵɵtext(32, "Time Range");
+            i0.ɵɵelementStart(31, "button", 20);
+            i0.ɵɵlistener("click", function TestingExecutionComponent_Template_button_click_31_listener() { ctx.filters.status = "passed"; return ctx.onFilterChange(); });
+            i0.ɵɵelement(32, "i", 21);
+            i0.ɵɵtext(33, " Passed ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(33, "select", 12);
-            i0.ɵɵtwoWayListener("ngModelChange", function TestingExecutionComponent_Template_select_ngModelChange_33_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.filters.timeRange, $event) || (ctx.filters.timeRange = $event); return $event; });
-            i0.ɵɵlistener("change", function TestingExecutionComponent_Template_select_change_33_listener() { return ctx.onFilterChange(); });
-            i0.ɵɵelementStart(34, "option", 18);
-            i0.ɵɵtext(35, "Today");
+            i0.ɵɵelementStart(34, "button", 22);
+            i0.ɵɵlistener("click", function TestingExecutionComponent_Template_button_click_34_listener() { ctx.filters.status = "failed"; return ctx.onFilterChange(); });
+            i0.ɵɵelement(35, "i", 23);
+            i0.ɵɵtext(36, " Failed ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(37, "div", 24)(38, "div", 25)(39, "select", 26);
+            i0.ɵɵtwoWayListener("ngModelChange", function TestingExecutionComponent_Template_select_ngModelChange_39_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.filters.timeRange, $event) || (ctx.filters.timeRange = $event); return $event; });
+            i0.ɵɵlistener("change", function TestingExecutionComponent_Template_select_change_39_listener() { return ctx.onFilterChange(); });
+            i0.ɵɵelementStart(40, "option", 27);
+            i0.ɵɵtext(41, "Today");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(36, "option", 19);
-            i0.ɵɵtext(37, "This Week");
+            i0.ɵɵelementStart(42, "option", 28);
+            i0.ɵɵtext(43, "This Week");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(38, "option", 20);
-            i0.ɵɵtext(39, "This Month");
+            i0.ɵɵelementStart(44, "option", 29);
+            i0.ɵɵtext(45, "This Month");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(40, "option", 13);
-            i0.ɵɵtext(41, "All Time");
+            i0.ɵɵelementStart(46, "option", 30);
+            i0.ɵɵtext(47, "All Time");
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(42, "div", 21)(43, "label");
-            i0.ɵɵtext(44, "Search");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(45, "div", 22);
-            i0.ɵɵelement(46, "i", 23);
-            i0.ɵɵelementStart(47, "input", 24);
-            i0.ɵɵtwoWayListener("ngModelChange", function TestingExecutionComponent_Template_input_ngModelChange_47_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.filters.searchText, $event) || (ctx.filters.searchText = $event); return $event; });
-            i0.ɵɵlistener("input", function TestingExecutionComponent_Template_input_input_47_listener() { return ctx.onFilterChange(); });
+            i0.ɵɵelementStart(48, "div", 31);
+            i0.ɵɵelement(49, "i", 32);
+            i0.ɵɵelementStart(50, "input", 33);
+            i0.ɵɵtwoWayListener("ngModelChange", function TestingExecutionComponent_Template_input_ngModelChange_50_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.filters.searchText, $event) || (ctx.filters.searchText = $event); return $event; });
+            i0.ɵɵlistener("input", function TestingExecutionComponent_Template_input_input_50_listener() { return ctx.onFilterChange(); });
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(48, TestingExecutionComponent_button_48_Template, 2, 0, "button", 25);
+            i0.ɵɵtemplate(51, TestingExecutionComponent_Conditional_51_Template, 2, 0, "button", 34);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(49, "div", 26)(50, "div", 27)(51, "div", 28);
-            i0.ɵɵelement(52, "i", 29);
+            i0.ɵɵelementStart(52, "div", 35)(53, "div", 36);
+            i0.ɵɵlistener("click", function TestingExecutionComponent_Template_div_click_53_listener() { return ctx.filterByStatus("running"); });
+            i0.ɵɵelementStart(54, "div", 37);
+            i0.ɵɵelement(55, "i", 19);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(53, "div", 30)(54, "div", 31);
-            i0.ɵɵtext(55);
-            i0.ɵɵpipe(56, "async");
+            i0.ɵɵelementStart(56, "div", 38)(57, "div", 39);
+            i0.ɵɵtext(58);
+            i0.ɵɵpipe(59, "async");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(57, "div", 32);
-            i0.ɵɵtext(58, "Running Now");
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(59, "div", 27)(60, "div", 33);
-            i0.ɵɵelement(61, "i", 34);
+            i0.ɵɵelementStart(60, "div", 40);
+            i0.ɵɵtext(61, "Running Now");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(62, "div", 41);
+            i0.ɵɵelement(63, "i", 42);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(64, "div", 43);
+            i0.ɵɵlistener("click", function TestingExecutionComponent_Template_div_click_64_listener() { return ctx.filterByStatus("passed"); });
+            i0.ɵɵelementStart(65, "div", 37);
+            i0.ɵɵelement(66, "i", 44);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(62, "div", 30)(63, "div", 31);
-            i0.ɵɵtext(64);
-            i0.ɵɵpipe(65, "async");
+            i0.ɵɵelementStart(67, "div", 38)(68, "div", 39);
+            i0.ɵɵtext(69);
+            i0.ɵɵpipe(70, "async");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(66, "div", 32);
-            i0.ɵɵtext(67, "Completed Today");
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(68, "div", 27)(69, "div", 35);
-            i0.ɵɵelement(70, "i", 36);
+            i0.ɵɵelementStart(71, "div", 40);
+            i0.ɵɵtext(72);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(73, "div", 41);
+            i0.ɵɵelement(74, "i", 42);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(75, "div", 45);
+            i0.ɵɵlistener("click", function TestingExecutionComponent_Template_div_click_75_listener() { return ctx.filterByStatus("failed"); });
+            i0.ɵɵelementStart(76, "div", 37);
+            i0.ɵɵelement(77, "i", 46);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(71, "div", 30)(72, "div", 31);
-            i0.ɵɵtext(73);
-            i0.ɵɵpipe(74, "async");
+            i0.ɵɵelementStart(78, "div", 38)(79, "div", 39);
+            i0.ɵɵtext(80);
+            i0.ɵɵpipe(81, "async");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(75, "div", 32);
-            i0.ɵɵtext(76, "Failed Today");
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(77, "div", 27)(78, "div", 37);
-            i0.ɵɵelement(79, "i", 38);
+            i0.ɵɵelementStart(82, "div", 40);
+            i0.ɵɵtext(83);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(84, "div", 41);
+            i0.ɵɵelement(85, "i", 42);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(86, "div", 47)(87, "div", 37);
+            i0.ɵɵelement(88, "i", 8);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(80, "div", 30)(81, "div", 31);
-            i0.ɵɵtext(82);
-            i0.ɵɵpipe(83, "async");
+            i0.ɵɵelementStart(89, "div", 38)(90, "div", 39);
+            i0.ɵɵtext(91);
+            i0.ɵɵpipe(92, "async");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(84, "div", 32);
-            i0.ɵɵtext(85, "Avg Duration Today");
+            i0.ɵɵelementStart(93, "div", 40);
+            i0.ɵɵtext(94, "Avg Duration");
             i0.ɵɵelementEnd()()()();
-            i0.ɵɵelementStart(86, "div", 39)(87, "div", 40)(88, "div", 41)(89, "div", 42);
-            i0.ɵɵtext(90, "Test Name");
+            i0.ɵɵelementStart(95, "div", 48)(96, "div", 49)(97, "div", 50)(98, "div", 51);
+            i0.ɵɵtext(99, "Test Name");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(91, "div", 43);
-            i0.ɵɵtext(92, "Status");
+            i0.ɵɵelementStart(100, "div", 52);
+            i0.ɵɵtext(101, "Status");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(93, "div", 44);
-            i0.ɵɵtext(94, "Score");
+            i0.ɵɵelementStart(102, "div", 53);
+            i0.ɵɵtext(103, "Score");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(95, "div", 45);
-            i0.ɵɵtext(96, "Duration");
+            i0.ɵɵelementStart(104, "div", 54);
+            i0.ɵɵtext(105, "Duration");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(97, "div", 46);
-            i0.ɵɵtext(98, "Cost");
+            i0.ɵɵelementStart(106, "div", 55);
+            i0.ɵɵtext(107, "Cost");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(99, "div", 47);
-            i0.ɵɵtext(100, "Started At");
+            i0.ɵɵelementStart(108, "div", 56);
+            i0.ɵɵtext(109, "Started At");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(101, "div", 48);
-            i0.ɵɵtext(102, "Actions");
+            i0.ɵɵelementStart(110, "div", 57);
+            i0.ɵɵtext(111, "Actions");
             i0.ɵɵelementEnd()();
-            i0.ɵɵtemplate(103, TestingExecutionComponent_Conditional_103_Template, 7, 0, "div", 49);
-            i0.ɵɵpipe(104, "async");
-            i0.ɵɵrepeaterCreate(105, TestingExecutionComponent_For_106_Template, 24, 17, "div", 50, _forTrack0);
-            i0.ɵɵpipe(107, "async");
+            i0.ɵɵtemplate(112, TestingExecutionComponent_Conditional_112_Template, 2, 0, "div", 58);
+            i0.ɵɵpipe(113, "async");
+            i0.ɵɵtemplate(114, TestingExecutionComponent_Conditional_114_Template, 7, 0, "div", 59);
+            i0.ɵɵrepeaterCreate(115, TestingExecutionComponent_For_116_Template, 24, 17, "div", 60, _forTrack0);
+            i0.ɵɵpipe(117, "async");
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             let tmp_11_0;
             let tmp_12_0;
-            i0.ɵɵadvance(6);
-            i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(7, 13, ctx.hasRunningTests$));
+            let tmp_14_0;
+            let tmp_16_0;
+            let tmp_17_0;
+            let tmp_18_0;
+            i0.ɵɵadvance(11);
+            i0.ɵɵtextInterpolate1(" Updated ", i0.ɵɵpipeBind2(12, 23, ctx.lastUpdated, "shortTime"), " ");
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(i0.ɵɵpipeBind1(14, 26, ctx.hasRunningTests$) ? 13 : -1);
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("disabled", ctx.isRefreshing);
             i0.ɵɵadvance();
             i0.ɵɵclassProp("spinning", ctx.isRefreshing);
             i0.ɵɵadvance(9);
-            i0.ɵɵtwoWayProperty("ngModel", ctx.filters.status);
-            i0.ɵɵadvance(14);
+            i0.ɵɵclassProp("active", ctx.filters.status === "all");
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("active", ctx.filters.status === "running");
+            i0.ɵɵadvance(3);
+            i0.ɵɵclassProp("active", ctx.filters.status === "passed");
+            i0.ɵɵadvance(3);
+            i0.ɵɵclassProp("active", ctx.filters.status === "failed");
+            i0.ɵɵadvance(5);
             i0.ɵɵtwoWayProperty("ngModel", ctx.filters.timeRange);
-            i0.ɵɵadvance(14);
+            i0.ɵɵadvance(11);
             i0.ɵɵtwoWayProperty("ngModel", ctx.filters.searchText);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.filters.searchText);
+            i0.ɵɵconditional(ctx.filters.searchText ? 51 : -1);
             i0.ɵɵadvance(7);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(56, 15, ctx.runningCount$) || 0);
-            i0.ɵɵadvance(9);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(65, 17, ctx.completedTodayCount$) || 0);
-            i0.ɵɵadvance(9);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(74, 19, ctx.failedTodayCount$) || 0);
-            i0.ɵɵadvance(9);
-            i0.ɵɵtextInterpolate(ctx.formatDuration(i0.ɵɵpipeBind1(83, 21, ctx.avgDurationToday$) || 0));
+            i0.ɵɵtextInterpolate((tmp_11_0 = i0.ɵɵpipeBind1(59, 28, ctx.runningCount$)) !== null && tmp_11_0 !== undefined ? tmp_11_0 : 0);
+            i0.ɵɵadvance(11);
+            i0.ɵɵtextInterpolate((tmp_12_0 = i0.ɵɵpipeBind1(70, 30, ctx.completedTodayCount$)) !== null && tmp_12_0 !== undefined ? tmp_12_0 : 0);
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate1("Passed ", ctx.getTimeRangeLabel(), "");
+            i0.ɵɵadvance(8);
+            i0.ɵɵtextInterpolate((tmp_14_0 = i0.ɵɵpipeBind1(81, 32, ctx.failedTodayCount$)) !== null && tmp_14_0 !== undefined ? tmp_14_0 : 0);
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate1("Failed ", ctx.getTimeRangeLabel(), "");
+            i0.ɵɵadvance(8);
+            i0.ɵɵtextInterpolate(ctx.formatDuration((tmp_16_0 = i0.ɵɵpipeBind1(92, 34, ctx.avgDurationToday$)) !== null && tmp_16_0 !== undefined ? tmp_16_0 : 0));
             i0.ɵɵadvance(21);
-            i0.ɵɵconditional(((tmp_11_0 = i0.ɵɵpipeBind1(104, 23, ctx.filteredExecutions$)) == null ? null : tmp_11_0.length) === 0 ? 103 : -1);
-            i0.ɵɵadvance(2);
-            i0.ɵɵrepeater((tmp_12_0 = i0.ɵɵpipeBind1(107, 25, ctx.filteredExecutions$)) !== null && tmp_12_0 !== undefined ? tmp_12_0 : i0.ɵɵpureFunction0(27, _c0));
-        } }, dependencies: [i3.NgIf, i4.NgSelectOption, i4.ɵNgSelectMultipleOption, i4.DefaultValueAccessor, i4.SelectControlValueAccessor, i4.NgControlStatus, i4.NgModel, i2.DialogContainerDirective, i5.TestStatusBadgeComponent, i5.ScoreIndicatorComponent, i5.CostDisplayComponent, i3.AsyncPipe, i3.DatePipe], styles: [".testing-execution[_ngcontent-%COMP%] {\n      padding: 20px;\n      height: 100%;\n      overflow-y: auto;\n      background: #f8f9fa;\n    }\n\n    .execution-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 20px;\n      background: white;\n      padding: 20px;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n    }\n\n    .header-left[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n    }\n\n    .header-left[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .header-left[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #2196f3;\n    }\n\n    .live-indicator[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 4px 12px;\n      background: #e3f2fd;\n      border-radius: 12px;\n      font-size: 11px;\n      font-weight: 600;\n      color: #2196f3;\n    }\n\n    .pulse[_ngcontent-%COMP%] {\n      width: 8px;\n      height: 8px;\n      background: #2196f3;\n      border-radius: 50%;\n      animation: _ngcontent-%COMP%_pulse 2s infinite;\n    }\n\n    @keyframes _ngcontent-%COMP%_pulse {\n      0%, 100% { opacity: 1; transform: scale(1); }\n      50% { opacity: 0.5; transform: scale(1.2); }\n    }\n\n    .header-actions[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n    }\n\n    .action-btn[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 16px;\n      border: none;\n      border-radius: 4px;\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .action-btn.refresh[_ngcontent-%COMP%] {\n      background: white;\n      border: 1px solid #ddd;\n      color: #666;\n    }\n\n    .action-btn.refresh[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background: #f5f5f5;\n    }\n\n    .action-btn.primary[_ngcontent-%COMP%] {\n      background: #2196f3;\n      color: white;\n    }\n\n    .action-btn.primary[_ngcontent-%COMP%]:hover {\n      background: #1976d2;\n    }\n\n    .action-btn[_ngcontent-%COMP%]:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n\n    .action-btn[_ngcontent-%COMP%]   i.spinning[_ngcontent-%COMP%] {\n      animation: _ngcontent-%COMP%_spin 1s linear infinite;\n    }\n\n    @keyframes _ngcontent-%COMP%_spin {\n      from { transform: rotate(0deg); }\n      to { transform: rotate(360deg); }\n    }\n\n    .execution-filters[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 16px;\n      margin-bottom: 20px;\n      background: white;\n      padding: 16px;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n    }\n\n    .filter-group[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n      min-width: 150px;\n    }\n\n    .filter-group.search[_ngcontent-%COMP%] {\n      flex: 1;\n    }\n\n    .filter-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      font-weight: 600;\n      color: #666;\n      text-transform: uppercase;\n    }\n\n    .filter-group[_ngcontent-%COMP%]   select[_ngcontent-%COMP%] {\n      padding: 8px 12px;\n      border: 1px solid #ddd;\n      border-radius: 4px;\n      font-size: 13px;\n      color: #333;\n      background: white;\n    }\n\n    .search-input-wrapper[_ngcontent-%COMP%] {\n      position: relative;\n      display: flex;\n      align-items: center;\n    }\n\n    .search-input-wrapper[_ngcontent-%COMP%]   i.fa-search[_ngcontent-%COMP%] {\n      position: absolute;\n      left: 12px;\n      color: #999;\n      font-size: 12px;\n    }\n\n    .search-input-wrapper[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n      flex: 1;\n      padding: 8px 40px 8px 36px;\n      border: 1px solid #ddd;\n      border-radius: 4px;\n      font-size: 13px;\n    }\n\n    .clear-btn[_ngcontent-%COMP%] {\n      position: absolute;\n      right: 8px;\n      background: none;\n      border: none;\n      color: #999;\n      cursor: pointer;\n      padding: 4px;\n    }\n\n    .clear-btn[_ngcontent-%COMP%]:hover {\n      color: #333;\n    }\n\n    .execution-summary[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n      gap: 16px;\n      margin-bottom: 20px;\n    }\n\n    .summary-card[_ngcontent-%COMP%] {\n      background: white;\n      padding: 16px;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      display: flex;\n      align-items: center;\n      gap: 16px;\n    }\n\n    .summary-icon[_ngcontent-%COMP%] {\n      width: 48px;\n      height: 48px;\n      border-radius: 8px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 20px;\n    }\n\n    .summary-icon.running[_ngcontent-%COMP%] {\n      background: #e3f2fd;\n      color: #2196f3;\n    }\n\n    .summary-icon.completed[_ngcontent-%COMP%] {\n      background: #e8f5e9;\n      color: #4caf50;\n    }\n\n    .summary-icon.failed[_ngcontent-%COMP%] {\n      background: #ffebee;\n      color: #f44336;\n    }\n\n    .summary-icon.duration[_ngcontent-%COMP%] {\n      background: #fff3e0;\n      color: #ff9800;\n    }\n\n    .summary-content[_ngcontent-%COMP%] {\n      flex: 1;\n    }\n\n    .summary-value[_ngcontent-%COMP%] {\n      font-size: 24px;\n      font-weight: 700;\n      color: #333;\n      line-height: 1;\n      margin-bottom: 4px;\n    }\n\n    .summary-label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: #666;\n      text-transform: uppercase;\n      font-weight: 600;\n    }\n\n    .execution-content[_ngcontent-%COMP%] {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      overflow: hidden;\n    }\n\n    .execution-list[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n    }\n\n    .list-header[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 2fr 140px 100px 100px 100px 150px 100px;\n      gap: 16px;\n      padding: 16px;\n      background: #f8f9fa;\n      border-bottom: 2px solid #e0e0e0;\n      font-size: 11px;\n      font-weight: 600;\n      color: #666;\n      text-transform: uppercase;\n    }\n\n    .execution-row[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 2fr 140px 100px 100px 100px 150px 100px;\n      gap: 16px;\n      padding: 16px;\n      border-bottom: 1px solid #f0f0f0;\n      transition: background 0.2s ease;\n    }\n\n    .execution-row[_ngcontent-%COMP%]:hover {\n      background: #f8f9fa;\n    }\n\n    .execution-row.running[_ngcontent-%COMP%] {\n      background: #e3f2fd;\n    }\n\n    .execution-row.running[_ngcontent-%COMP%]:hover {\n      background: #bbdefb;\n    }\n\n    .cell[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      font-size: 13px;\n      color: #333;\n    }\n\n    .cell.test-name[_ngcontent-%COMP%] {\n      flex-direction: column;\n      align-items: flex-start;\n      gap: 4px;\n    }\n\n    .test-info[_ngcontent-%COMP%]   .name[_ngcontent-%COMP%] {\n      font-weight: 500;\n      color: #333;\n    }\n\n    .test-info[_ngcontent-%COMP%]   .suite[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: #666;\n    }\n\n    .cell.status[_ngcontent-%COMP%] {\n      flex-direction: column;\n      gap: 6px;\n      align-items: flex-start;\n    }\n\n    .progress-bar[_ngcontent-%COMP%] {\n      width: 100%;\n      height: 4px;\n      background: #e0e0e0;\n      border-radius: 2px;\n      overflow: hidden;\n    }\n\n    .progress-fill[_ngcontent-%COMP%] {\n      height: 100%;\n      background: #2196f3;\n      transition: width 0.3s ease;\n    }\n\n    .cell.actions[_ngcontent-%COMP%] {\n      gap: 8px;\n    }\n\n    .icon-btn[_ngcontent-%COMP%] {\n      background: none;\n      border: none;\n      color: #666;\n      cursor: pointer;\n      padding: 6px;\n      border-radius: 4px;\n      transition: all 0.2s ease;\n      font-size: 14px;\n    }\n\n    .icon-btn[_ngcontent-%COMP%]:hover {\n      background: #f0f0f0;\n      color: #2196f3;\n    }\n\n    .icon-btn.danger[_ngcontent-%COMP%]:hover {\n      background: #ffebee;\n      color: #f44336;\n    }\n\n    .no-data[_ngcontent-%COMP%] {\n      padding: 60px 20px;\n      text-align: center;\n      color: #999;\n    }\n\n    .no-data[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 48px;\n      margin-bottom: 16px;\n      opacity: 0.5;\n    }\n\n    .no-data[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      font-size: 14px;\n      margin-bottom: 20px;\n    }\n\n    @media (max-width: 1200px) {\n      .execution-filters[_ngcontent-%COMP%] {\n        flex-wrap: wrap;\n      }\n\n      .filter-group[_ngcontent-%COMP%] {\n        min-width: 120px;\n      }\n    }"], changeDetection: 0 });
+            i0.ɵɵconditional(ctx.isLoading ? 112 : ((tmp_17_0 = i0.ɵɵpipeBind1(113, 36, ctx.filteredExecutions$)) == null ? null : tmp_17_0.length) === 0 ? 114 : -1);
+            i0.ɵɵadvance(3);
+            i0.ɵɵrepeater((tmp_18_0 = i0.ɵɵpipeBind1(117, 38, ctx.filteredExecutions$)) !== null && tmp_18_0 !== undefined ? tmp_18_0 : i0.ɵɵpureFunction0(40, _c0));
+        } }, dependencies: [i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.DefaultValueAccessor, i3.SelectControlValueAccessor, i3.NgControlStatus, i3.NgModel, i2.DialogContainerDirective, i4.TestStatusBadgeComponent, i4.ScoreIndicatorComponent, i4.CostDisplayComponent, i5.LoadingComponent, i6.AsyncPipe, i6.DatePipe], styles: ["\n\n\n\n\n    .testing-execution[_ngcontent-%COMP%] {\n      padding: 24px;\n      height: 100%;\n      overflow-y: auto;\n      background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);\n    }\n\n    \n\n    .execution-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 20px;\n      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\n      padding: 24px 28px;\n      border-radius: 16px;\n      box-shadow: 0 8px 32px rgba(99, 102, 241, 0.25);\n    }\n\n    .header-left[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n    }\n\n    .header-icon[_ngcontent-%COMP%] {\n      width: 48px;\n      height: 48px;\n      background: rgba(255, 255, 255, 0.2);\n      border-radius: 12px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 22px;\n      color: white;\n    }\n\n    .header-text[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n      margin: 0 0 4px 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: white;\n    }\n\n    .header-meta[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .last-updated[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: rgba(255, 255, 255, 0.8);\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .last-updated[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 11px;\n    }\n\n    .live-indicator[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 4px 12px;\n      background: rgba(255, 255, 255, 0.2);\n      border-radius: 12px;\n      font-size: 11px;\n      font-weight: 600;\n      color: white;\n    }\n\n    .pulse[_ngcontent-%COMP%] {\n      width: 8px;\n      height: 8px;\n      background: #22c55e;\n      border-radius: 50%;\n      animation: _ngcontent-%COMP%_pulse 2s infinite;\n      box-shadow: 0 0 8px #22c55e;\n    }\n\n    @keyframes _ngcontent-%COMP%_pulse {\n      0%, 100% { opacity: 1; transform: scale(1); }\n      50% { opacity: 0.5; transform: scale(1.3); }\n    }\n\n    .header-actions[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n    }\n\n    .action-btn[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 18px;\n      border: none;\n      border-radius: 10px;\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .refresh-btn[_ngcontent-%COMP%] {\n      background: rgba(255, 255, 255, 0.15);\n      color: white;\n      border: 1px solid rgba(255, 255, 255, 0.25);\n    }\n\n    .refresh-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background: rgba(255, 255, 255, 0.25);\n      transform: translateY(-1px);\n    }\n\n    .primary-btn[_ngcontent-%COMP%] {\n      background: white;\n      color: #6366f1;\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n    }\n\n    .primary-btn[_ngcontent-%COMP%]:hover {\n      background: #f8f9ff;\n      transform: translateY(-2px);\n      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);\n    }\n\n    .action-btn[_ngcontent-%COMP%]:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n      transform: none !important;\n    }\n\n    .spinning[_ngcontent-%COMP%] {\n      animation: _ngcontent-%COMP%_spin 1s linear infinite;\n    }\n\n    @keyframes _ngcontent-%COMP%_spin {\n      from { transform: rotate(0deg); }\n      to { transform: rotate(360deg); }\n    }\n\n    \n\n    .filter-bar[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      gap: 16px;\n      margin-bottom: 20px;\n      padding: 16px 20px;\n      background: white;\n      border-radius: 14px;\n      box-shadow: 0 2px 12px rgba(99, 102, 241, 0.06);\n    }\n\n    .filter-chips[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 8px;\n    }\n\n    .filter-chip[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 16px;\n      background: #f1f5f9;\n      border: 2px solid transparent;\n      border-radius: 20px;\n      font-size: 12px;\n      font-weight: 600;\n      color: #64748b;\n      cursor: pointer;\n      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .filter-chip[_ngcontent-%COMP%]:hover {\n      background: #e2e8f0;\n      color: #475569;\n    }\n\n    .filter-chip.active[_ngcontent-%COMP%] {\n      background: #6366f1;\n      color: white;\n      border-color: #6366f1;\n    }\n\n    .filter-chip.running.active[_ngcontent-%COMP%] {\n      background: #3b82f6;\n      border-color: #3b82f6;\n    }\n\n    .filter-chip.passed.active[_ngcontent-%COMP%] {\n      background: #22c55e;\n      border-color: #22c55e;\n    }\n\n    .filter-chip.failed.active[_ngcontent-%COMP%] {\n      background: #ef4444;\n      border-color: #ef4444;\n    }\n\n    .filter-chip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 11px;\n    }\n\n    .filter-controls[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n    }\n\n    .time-select[_ngcontent-%COMP%]   select[_ngcontent-%COMP%] {\n      padding: 10px 14px;\n      border: 2px solid #e2e8f0;\n      border-radius: 10px;\n      font-size: 13px;\n      font-weight: 500;\n      color: #475569;\n      background: white;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .time-select[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]:focus {\n      outline: none;\n      border-color: #6366f1;\n      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);\n    }\n\n    .search-input[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding: 10px 16px;\n      background: #f8fafc;\n      border: 2px solid #e2e8f0;\n      border-radius: 10px;\n      min-width: 250px;\n      transition: all 0.2s ease;\n    }\n\n    .search-input[_ngcontent-%COMP%]:focus-within {\n      border-color: #6366f1;\n      background: white;\n      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);\n    }\n\n    .search-input[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #94a3b8;\n      font-size: 14px;\n    }\n\n    .search-input[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n      flex: 1;\n      border: none;\n      background: transparent;\n      outline: none;\n      font-size: 13px;\n      color: #334155;\n    }\n\n    .search-input[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]::placeholder {\n      color: #94a3b8;\n    }\n\n    .clear-btn[_ngcontent-%COMP%] {\n      padding: 4px 8px;\n      border: none;\n      background: transparent;\n      color: #94a3b8;\n      cursor: pointer;\n      border-radius: 4px;\n      transition: all 0.2s ease;\n    }\n\n    .clear-btn[_ngcontent-%COMP%]:hover {\n      background: #e2e8f0;\n      color: #64748b;\n    }\n\n    \n\n    .kpi-grid[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(4, 1fr);\n      gap: 16px;\n      margin-bottom: 20px;\n    }\n\n    .kpi-card[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n      padding: 20px;\n      background: white;\n      border-radius: 14px;\n      box-shadow: 0 2px 12px rgba(99, 102, 241, 0.06);\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n      position: relative;\n      overflow: hidden;\n    }\n\n    .kpi-card[_ngcontent-%COMP%]::before {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 4px;\n      height: 100%;\n      border-radius: 4px 0 0 4px;\n    }\n\n    .kpi-card.clickable[_ngcontent-%COMP%] {\n      cursor: pointer;\n    }\n\n    .kpi-card.clickable[_ngcontent-%COMP%]:hover {\n      transform: translateY(-3px);\n      box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15);\n    }\n\n    .kpi-card.running[_ngcontent-%COMP%]::before { background: linear-gradient(180deg, #3b82f6, #60a5fa); }\n    .kpi-card.passed[_ngcontent-%COMP%]::before { background: linear-gradient(180deg, #22c55e, #4ade80); }\n    .kpi-card.failed[_ngcontent-%COMP%]::before { background: linear-gradient(180deg, #ef4444, #f87171); }\n    .kpi-card.duration[_ngcontent-%COMP%]::before { background: linear-gradient(180deg, #8b5cf6, #a78bfa); }\n\n    .kpi-icon[_ngcontent-%COMP%] {\n      width: 48px;\n      height: 48px;\n      border-radius: 12px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 20px;\n    }\n\n    .kpi-card.running[_ngcontent-%COMP%]   .kpi-icon[_ngcontent-%COMP%] {\n      background: rgba(59, 130, 246, 0.1);\n      color: #3b82f6;\n    }\n\n    .kpi-card.passed[_ngcontent-%COMP%]   .kpi-icon[_ngcontent-%COMP%] {\n      background: rgba(34, 197, 94, 0.1);\n      color: #22c55e;\n    }\n\n    .kpi-card.failed[_ngcontent-%COMP%]   .kpi-icon[_ngcontent-%COMP%] {\n      background: rgba(239, 68, 68, 0.1);\n      color: #ef4444;\n    }\n\n    .kpi-card.duration[_ngcontent-%COMP%]   .kpi-icon[_ngcontent-%COMP%] {\n      background: rgba(139, 92, 246, 0.1);\n      color: #8b5cf6;\n    }\n\n    .kpi-content[_ngcontent-%COMP%] {\n      flex: 1;\n    }\n\n    .kpi-value[_ngcontent-%COMP%] {\n      font-size: 26px;\n      font-weight: 700;\n      color: #1e293b;\n      line-height: 1;\n      margin-bottom: 4px;\n    }\n\n    .kpi-label[_ngcontent-%COMP%] {\n      font-size: 12px;\n      font-weight: 500;\n      color: #64748b;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .kpi-arrow[_ngcontent-%COMP%] {\n      color: #cbd5e1;\n      font-size: 14px;\n      opacity: 0;\n      transition: all 0.3s ease;\n    }\n\n    .kpi-card.clickable[_ngcontent-%COMP%]:hover   .kpi-arrow[_ngcontent-%COMP%] {\n      opacity: 1;\n      color: #6366f1;\n      transform: translateX(4px);\n    }\n\n    \n\n    .execution-content[_ngcontent-%COMP%] {\n      background: white;\n      border-radius: 14px;\n      box-shadow: 0 2px 12px rgba(99, 102, 241, 0.06);\n      overflow: hidden;\n    }\n\n    .execution-list[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n    }\n\n    \n\n    .list-header[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 2fr 120px 100px 100px 140px 100px;\n      gap: 20px;\n      padding: 16px 24px;\n      background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);\n      border-bottom: 1px solid #e2e8f0;\n      font-size: 11px;\n      font-weight: 700;\n      color: #64748b;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .header-cell[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n    }\n\n    \n\n    .execution-row[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 2fr 120px 100px 100px 140px 100px;\n      gap: 20px;\n      padding: 18px 24px;\n      border-bottom: 1px solid #f1f5f9;\n      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .execution-row[_ngcontent-%COMP%]:last-child {\n      border-bottom: none;\n    }\n\n    .execution-row[_ngcontent-%COMP%]:hover {\n      background: linear-gradient(90deg, rgba(99, 102, 241, 0.03) 0%, rgba(139, 92, 246, 0.03) 100%);\n    }\n\n    .execution-row.running[_ngcontent-%COMP%] {\n      background: linear-gradient(90deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.04) 100%);\n      border-left: 3px solid #3b82f6;\n    }\n\n    .execution-row.running[_ngcontent-%COMP%]:hover {\n      background: linear-gradient(90deg, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0.06) 100%);\n    }\n\n    \n\n    .cell[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      font-size: 13px;\n      color: #334155;\n    }\n\n    .cell.test-name[_ngcontent-%COMP%] {\n      flex-direction: column;\n      align-items: flex-start;\n      gap: 4px;\n    }\n\n    .test-info[_ngcontent-%COMP%]   .name[_ngcontent-%COMP%] {\n      font-weight: 600;\n      color: #1e293b;\n      font-size: 14px;\n    }\n\n    .test-info[_ngcontent-%COMP%]   .suite[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: #64748b;\n    }\n\n    .cell.status[_ngcontent-%COMP%] {\n      flex-direction: column;\n      gap: 8px;\n      align-items: flex-start;\n    }\n\n    .progress-bar[_ngcontent-%COMP%] {\n      width: 100%;\n      height: 4px;\n      background: #e2e8f0;\n      border-radius: 2px;\n      overflow: hidden;\n    }\n\n    .progress-fill[_ngcontent-%COMP%] {\n      height: 100%;\n      background: linear-gradient(90deg, #3b82f6, #60a5fa);\n      border-radius: 2px;\n      transition: width 0.3s ease;\n    }\n\n    .cell.actions[_ngcontent-%COMP%] {\n      gap: 8px;\n      justify-content: flex-end;\n    }\n\n    \n\n    .icon-btn[_ngcontent-%COMP%] {\n      width: 36px;\n      height: 36px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: #f8fafc;\n      border: 1px solid #e2e8f0;\n      color: #64748b;\n      cursor: pointer;\n      border-radius: 10px;\n      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n      font-size: 14px;\n    }\n\n    .icon-btn[_ngcontent-%COMP%]:hover {\n      background: #6366f1;\n      border-color: #6366f1;\n      color: white;\n      transform: translateY(-2px);\n      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);\n    }\n\n    .icon-btn.danger[_ngcontent-%COMP%]:hover {\n      background: #ef4444;\n      border-color: #ef4444;\n      box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);\n    }\n\n    \n\n    .loading-placeholder[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      padding: 80px 40px;\n      background: linear-gradient(180deg, #fafbff 0%, #f8fafc 100%);\n    }\n\n    \n\n    .no-data[_ngcontent-%COMP%] {\n      padding: 80px 40px;\n      text-align: center;\n      background: linear-gradient(180deg, #fafbff 0%, #f8fafc 100%);\n    }\n\n    .no-data[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 64px;\n      color: #cbd5e1;\n      margin-bottom: 20px;\n    }\n\n    .no-data[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      font-size: 16px;\n      color: #64748b;\n      margin-bottom: 24px;\n    }\n\n    .no-data[_ngcontent-%COMP%]   .action-btn[_ngcontent-%COMP%] {\n      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\n      color: white;\n      padding: 12px 24px;\n      border-radius: 12px;\n      font-weight: 600;\n      box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);\n    }\n\n    .no-data[_ngcontent-%COMP%]   .action-btn[_ngcontent-%COMP%]:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 6px 24px rgba(99, 102, 241, 0.4);\n    }\n\n    \n\n    @media (max-width: 1400px) {\n      .kpi-grid[_ngcontent-%COMP%] {\n        grid-template-columns: repeat(2, 1fr);\n      }\n    }\n\n    @media (max-width: 1200px) {\n      .filter-bar[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: stretch;\n      }\n\n      .filter-chips[_ngcontent-%COMP%] {\n        justify-content: center;\n      }\n\n      .filter-controls[_ngcontent-%COMP%] {\n        justify-content: center;\n      }\n\n      .list-header[_ngcontent-%COMP%], \n   .execution-row[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr 100px 80px 100px;\n      }\n\n      .header-cell.cost[_ngcontent-%COMP%], \n   .header-cell.timestamp[_ngcontent-%COMP%], \n   .cell.cost[_ngcontent-%COMP%], \n   .cell.timestamp[_ngcontent-%COMP%] {\n        display: none;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .kpi-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n      }\n\n      .search-input[_ngcontent-%COMP%] {\n        min-width: 200px;\n      }\n    }"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TestingExecutionComponent, [{
         type: Component,
         args: [{ selector: 'app-testing-execution', changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div class="testing-execution" kendoDialogContainer>
+      <!-- Premium Header with Gradient -->
       <div class="execution-header">
         <div class="header-left">
-          <h2>
+          <div class="header-icon">
             <i class="fa-solid fa-play-circle"></i>
-            Test Execution Monitor
-          </h2>
-          <div class="live-indicator" *ngIf="hasRunningTests$ | async">
-            <span class="pulse"></span>
-            <span class="text">Live</span>
+          </div>
+          <div class="header-text">
+            <h2>Test Execution Monitor</h2>
+            <div class="header-meta">
+              <span class="last-updated">
+                <i class="fa-solid fa-clock"></i>
+                Updated {{ lastUpdated | date:'shortTime' }}
+              </span>
+              @if (hasRunningTests$ | async) {
+                <div class="live-indicator">
+                  <span class="pulse"></span>
+                  <span class="text">Live</span>
+                </div>
+              }
+            </div>
           </div>
         </div>
         <div class="header-actions">
-          <button class="action-btn refresh" (click)="refresh()" [disabled]="isRefreshing">
-            <i class="fa-solid fa-refresh" [class.spinning]="isRefreshing"></i>
-            Refresh
+          <button class="action-btn refresh-btn" (click)="refresh()" [disabled]="isRefreshing">
+            <i class="fa-solid fa-sync-alt" [class.spinning]="isRefreshing"></i>
+            <span>Refresh</span>
           </button>
-          <button class="action-btn primary" (click)="startNewTest()">
+          <button class="action-btn primary-btn" (click)="startNewTest()">
             <i class="fa-solid fa-play"></i>
-            Run Test
+            <span>Run Test</span>
           </button>
         </div>
       </div>
 
-      <div class="execution-filters">
-        <div class="filter-group">
-          <label>Status</label>
-          <select [(ngModel)]="filters.status" (change)="onFilterChange()">
-            <option value="all">All Statuses</option>
-            <option value="running">Running</option>
-            <option value="completed">Completed</option>
-            <option value="failed">Failed</option>
-            <option value="passed">Passed</option>
-          </select>
-        </div>
-        <div class="filter-group">
-          <label>Time Range</label>
-          <select [(ngModel)]="filters.timeRange" (change)="onFilterChange()">
-            <option value="today">Today</option>
-            <option value="week">This Week</option>
-            <option value="month">This Month</option>
-            <option value="all">All Time</option>
-          </select>
+      <!-- Smart Filter Bar -->
+      <div class="filter-bar">
+        <div class="filter-chips">
+          <button
+            class="filter-chip"
+            [class.active]="filters.status === 'all'"
+            (click)="filters.status = 'all'; onFilterChange()"
+          >
+            All
+          </button>
+          <button
+            class="filter-chip running"
+            [class.active]="filters.status === 'running'"
+            (click)="filters.status = 'running'; onFilterChange()"
+          >
+            <i class="fa-solid fa-spinner fa-spin"></i>
+            Running
+          </button>
+          <button
+            class="filter-chip passed"
+            [class.active]="filters.status === 'passed'"
+            (click)="filters.status = 'passed'; onFilterChange()"
+          >
+            <i class="fa-solid fa-check"></i>
+            Passed
+          </button>
+          <button
+            class="filter-chip failed"
+            [class.active]="filters.status === 'failed'"
+            (click)="filters.status = 'failed'; onFilterChange()"
+          >
+            <i class="fa-solid fa-times"></i>
+            Failed
+          </button>
         </div>
-        <div class="filter-group search">
-          <label>Search</label>
-          <div class="search-input-wrapper">
+
+        <div class="filter-controls">
+          <div class="time-select">
+            <select [(ngModel)]="filters.timeRange" (change)="onFilterChange()">
+              <option value="today">Today</option>
+              <option value="week">This Week</option>
+              <option value="month">This Month</option>
+              <option value="all">All Time</option>
+            </select>
+          </div>
+
+          <div class="search-input">
             <i class="fa-solid fa-search"></i>
             <input
               type="text"
@@ -532,52 +687,72 @@ export class TestingExecutionComponent {
               (input)="onFilterChange()"
               placeholder="Search tests..."
             />
-            <button
-              class="clear-btn"
-              *ngIf="filters.searchText"
-              (click)="clearSearch()"
-            >
-              <i class="fa-solid fa-times"></i>
-            </button>
+            @if (filters.searchText) {
+              <button class="clear-btn" (click)="clearSearch()">
+                <i class="fa-solid fa-times"></i>
+              </button>
+            }
           </div>
         </div>
       </div>
 
-      <div class="execution-summary">
-        <div class="summary-card">
-          <div class="summary-icon running">
+      <!-- KPI Cards (Actionable) -->
+      <div class="kpi-grid">
+        <div
+          class="kpi-card running clickable"
+          (click)="filterByStatus('running')"
+        >
+          <div class="kpi-icon">
             <i class="fa-solid fa-spinner fa-spin"></i>
           </div>
-          <div class="summary-content">
-            <div class="summary-value">{{ (runningCount$ | async) || 0 }}</div>
-            <div class="summary-label">Running Now</div>
+          <div class="kpi-content">
+            <div class="kpi-value">{{ (runningCount$ | async) ?? 0 }}</div>
+            <div class="kpi-label">Running Now</div>
+          </div>
+          <div class="kpi-arrow">
+            <i class="fa-solid fa-chevron-right"></i>
           </div>
         </div>
-        <div class="summary-card">
-          <div class="summary-icon completed">
+
+        <div
+          class="kpi-card passed clickable"
+          (click)="filterByStatus('passed')"
+        >
+          <div class="kpi-icon">
             <i class="fa-solid fa-check-circle"></i>
           </div>
-          <div class="summary-content">
-            <div class="summary-value">{{ (completedTodayCount$ | async) || 0 }}</div>
-            <div class="summary-label">Completed Today</div>
+          <div class="kpi-content">
+            <div class="kpi-value">{{ (completedTodayCount$ | async) ?? 0 }}</div>
+            <div class="kpi-label">Passed {{ getTimeRangeLabel() }}</div>
+          </div>
+          <div class="kpi-arrow">
+            <i class="fa-solid fa-chevron-right"></i>
           </div>
         </div>
-        <div class="summary-card">
-          <div class="summary-icon failed">
+
+        <div
+          class="kpi-card failed clickable"
+          (click)="filterByStatus('failed')"
+        >
+          <div class="kpi-icon">
             <i class="fa-solid fa-exclamation-circle"></i>
           </div>
-          <div class="summary-content">
-            <div class="summary-value">{{ (failedTodayCount$ | async) || 0 }}</div>
-            <div class="summary-label">Failed Today</div>
+          <div class="kpi-content">
+            <div class="kpi-value">{{ (failedTodayCount$ | async) ?? 0 }}</div>
+            <div class="kpi-label">Failed {{ getTimeRangeLabel() }}</div>
+          </div>
+          <div class="kpi-arrow">
+            <i class="fa-solid fa-chevron-right"></i>
           </div>
         </div>
-        <div class="summary-card">
-          <div class="summary-icon duration">
+
+        <div class="kpi-card duration">
+          <div class="kpi-icon">
             <i class="fa-solid fa-clock"></i>
           </div>
-          <div class="summary-content">
-            <div class="summary-value">{{ formatDuration((avgDurationToday$ | async) || 0) }}</div>
-            <div class="summary-label">Avg Duration Today</div>
+          <div class="kpi-content">
+            <div class="kpi-value">{{ formatDuration((avgDurationToday$ | async) ?? 0) }}</div>
+            <div class="kpi-label">Avg Duration</div>
           </div>
         </div>
       </div>
@@ -594,7 +769,11 @@ export class TestingExecutionComponent {
             <div class="header-cell actions">Actions</div>
           </div>
 
-          @if ((filteredExecutions$ | async)?.length === 0) {
+          @if (isLoading) {
+            <div class="loading-placeholder">
+              <mj-loading text="Loading test executions..."></mj-loading>
+            </div>
+          } @else if ((filteredExecutions$ | async)?.length === 0) {
             <div class="no-data">
               <i class="fa-solid fa-inbox"></i>
               <p>No test executions found</p>
@@ -656,11 +835,11 @@ export class TestingExecutionComponent {
         </div>
       </div>
     </div>
-  `, styles: ["\n    .testing-execution {\n      padding: 20px;\n      height: 100%;\n      overflow-y: auto;\n      background: #f8f9fa;\n    }\n\n    .execution-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 20px;\n      background: white;\n      padding: 20px;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n    }\n\n    .header-left {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n    }\n\n    .header-left h2 {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .header-left h2 i {\n      color: #2196f3;\n    }\n\n    .live-indicator {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 4px 12px;\n      background: #e3f2fd;\n      border-radius: 12px;\n      font-size: 11px;\n      font-weight: 600;\n      color: #2196f3;\n    }\n\n    .pulse {\n      width: 8px;\n      height: 8px;\n      background: #2196f3;\n      border-radius: 50%;\n      animation: pulse 2s infinite;\n    }\n\n    @keyframes pulse {\n      0%, 100% { opacity: 1; transform: scale(1); }\n      50% { opacity: 0.5; transform: scale(1.2); }\n    }\n\n    .header-actions {\n      display: flex;\n      gap: 12px;\n    }\n\n    .action-btn {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 16px;\n      border: none;\n      border-radius: 4px;\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .action-btn.refresh {\n      background: white;\n      border: 1px solid #ddd;\n      color: #666;\n    }\n\n    .action-btn.refresh:hover:not(:disabled) {\n      background: #f5f5f5;\n    }\n\n    .action-btn.primary {\n      background: #2196f3;\n      color: white;\n    }\n\n    .action-btn.primary:hover {\n      background: #1976d2;\n    }\n\n    .action-btn:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n\n    .action-btn i.spinning {\n      animation: spin 1s linear infinite;\n    }\n\n    @keyframes spin {\n      from { transform: rotate(0deg); }\n      to { transform: rotate(360deg); }\n    }\n\n    .execution-filters {\n      display: flex;\n      gap: 16px;\n      margin-bottom: 20px;\n      background: white;\n      padding: 16px;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n    }\n\n    .filter-group {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n      min-width: 150px;\n    }\n\n    .filter-group.search {\n      flex: 1;\n    }\n\n    .filter-group label {\n      font-size: 11px;\n      font-weight: 600;\n      color: #666;\n      text-transform: uppercase;\n    }\n\n    .filter-group select {\n      padding: 8px 12px;\n      border: 1px solid #ddd;\n      border-radius: 4px;\n      font-size: 13px;\n      color: #333;\n      background: white;\n    }\n\n    .search-input-wrapper {\n      position: relative;\n      display: flex;\n      align-items: center;\n    }\n\n    .search-input-wrapper i.fa-search {\n      position: absolute;\n      left: 12px;\n      color: #999;\n      font-size: 12px;\n    }\n\n    .search-input-wrapper input {\n      flex: 1;\n      padding: 8px 40px 8px 36px;\n      border: 1px solid #ddd;\n      border-radius: 4px;\n      font-size: 13px;\n    }\n\n    .clear-btn {\n      position: absolute;\n      right: 8px;\n      background: none;\n      border: none;\n      color: #999;\n      cursor: pointer;\n      padding: 4px;\n    }\n\n    .clear-btn:hover {\n      color: #333;\n    }\n\n    .execution-summary {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n      gap: 16px;\n      margin-bottom: 20px;\n    }\n\n    .summary-card {\n      background: white;\n      padding: 16px;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      display: flex;\n      align-items: center;\n      gap: 16px;\n    }\n\n    .summary-icon {\n      width: 48px;\n      height: 48px;\n      border-radius: 8px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 20px;\n    }\n\n    .summary-icon.running {\n      background: #e3f2fd;\n      color: #2196f3;\n    }\n\n    .summary-icon.completed {\n      background: #e8f5e9;\n      color: #4caf50;\n    }\n\n    .summary-icon.failed {\n      background: #ffebee;\n      color: #f44336;\n    }\n\n    .summary-icon.duration {\n      background: #fff3e0;\n      color: #ff9800;\n    }\n\n    .summary-content {\n      flex: 1;\n    }\n\n    .summary-value {\n      font-size: 24px;\n      font-weight: 700;\n      color: #333;\n      line-height: 1;\n      margin-bottom: 4px;\n    }\n\n    .summary-label {\n      font-size: 11px;\n      color: #666;\n      text-transform: uppercase;\n      font-weight: 600;\n    }\n\n    .execution-content {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n      overflow: hidden;\n    }\n\n    .execution-list {\n      display: flex;\n      flex-direction: column;\n    }\n\n    .list-header {\n      display: grid;\n      grid-template-columns: 2fr 140px 100px 100px 100px 150px 100px;\n      gap: 16px;\n      padding: 16px;\n      background: #f8f9fa;\n      border-bottom: 2px solid #e0e0e0;\n      font-size: 11px;\n      font-weight: 600;\n      color: #666;\n      text-transform: uppercase;\n    }\n\n    .execution-row {\n      display: grid;\n      grid-template-columns: 2fr 140px 100px 100px 100px 150px 100px;\n      gap: 16px;\n      padding: 16px;\n      border-bottom: 1px solid #f0f0f0;\n      transition: background 0.2s ease;\n    }\n\n    .execution-row:hover {\n      background: #f8f9fa;\n    }\n\n    .execution-row.running {\n      background: #e3f2fd;\n    }\n\n    .execution-row.running:hover {\n      background: #bbdefb;\n    }\n\n    .cell {\n      display: flex;\n      align-items: center;\n      font-size: 13px;\n      color: #333;\n    }\n\n    .cell.test-name {\n      flex-direction: column;\n      align-items: flex-start;\n      gap: 4px;\n    }\n\n    .test-info .name {\n      font-weight: 500;\n      color: #333;\n    }\n\n    .test-info .suite {\n      font-size: 11px;\n      color: #666;\n    }\n\n    .cell.status {\n      flex-direction: column;\n      gap: 6px;\n      align-items: flex-start;\n    }\n\n    .progress-bar {\n      width: 100%;\n      height: 4px;\n      background: #e0e0e0;\n      border-radius: 2px;\n      overflow: hidden;\n    }\n\n    .progress-fill {\n      height: 100%;\n      background: #2196f3;\n      transition: width 0.3s ease;\n    }\n\n    .cell.actions {\n      gap: 8px;\n    }\n\n    .icon-btn {\n      background: none;\n      border: none;\n      color: #666;\n      cursor: pointer;\n      padding: 6px;\n      border-radius: 4px;\n      transition: all 0.2s ease;\n      font-size: 14px;\n    }\n\n    .icon-btn:hover {\n      background: #f0f0f0;\n      color: #2196f3;\n    }\n\n    .icon-btn.danger:hover {\n      background: #ffebee;\n      color: #f44336;\n    }\n\n    .no-data {\n      padding: 60px 20px;\n      text-align: center;\n      color: #999;\n    }\n\n    .no-data i {\n      font-size: 48px;\n      margin-bottom: 16px;\n      opacity: 0.5;\n    }\n\n    .no-data p {\n      font-size: 14px;\n      margin-bottom: 20px;\n    }\n\n    @media (max-width: 1200px) {\n      .execution-filters {\n        flex-wrap: wrap;\n      }\n\n      .filter-group {\n        min-width: 120px;\n      }\n    }\n  "] }]
-    }], () => [{ type: i1.TestingInstrumentationService }, { type: i2.DialogService }, { type: i0.ChangeDetectorRef }], { initialState: [{
+  `, styles: ["\n    /* ============================================\n       Testing Execution - Premium Design System\n       ============================================ */\n\n    .testing-execution {\n      padding: 24px;\n      height: 100%;\n      overflow-y: auto;\n      background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);\n    }\n\n    /* Premium Header */\n    .execution-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 20px;\n      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\n      padding: 24px 28px;\n      border-radius: 16px;\n      box-shadow: 0 8px 32px rgba(99, 102, 241, 0.25);\n    }\n\n    .header-left {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n    }\n\n    .header-icon {\n      width: 48px;\n      height: 48px;\n      background: rgba(255, 255, 255, 0.2);\n      border-radius: 12px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 22px;\n      color: white;\n    }\n\n    .header-text h2 {\n      margin: 0 0 4px 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: white;\n    }\n\n    .header-meta {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .last-updated {\n      font-size: 12px;\n      color: rgba(255, 255, 255, 0.8);\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .last-updated i {\n      font-size: 11px;\n    }\n\n    .live-indicator {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 4px 12px;\n      background: rgba(255, 255, 255, 0.2);\n      border-radius: 12px;\n      font-size: 11px;\n      font-weight: 600;\n      color: white;\n    }\n\n    .pulse {\n      width: 8px;\n      height: 8px;\n      background: #22c55e;\n      border-radius: 50%;\n      animation: pulse 2s infinite;\n      box-shadow: 0 0 8px #22c55e;\n    }\n\n    @keyframes pulse {\n      0%, 100% { opacity: 1; transform: scale(1); }\n      50% { opacity: 0.5; transform: scale(1.3); }\n    }\n\n    .header-actions {\n      display: flex;\n      gap: 12px;\n    }\n\n    .action-btn {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 18px;\n      border: none;\n      border-radius: 10px;\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .refresh-btn {\n      background: rgba(255, 255, 255, 0.15);\n      color: white;\n      border: 1px solid rgba(255, 255, 255, 0.25);\n    }\n\n    .refresh-btn:hover:not(:disabled) {\n      background: rgba(255, 255, 255, 0.25);\n      transform: translateY(-1px);\n    }\n\n    .primary-btn {\n      background: white;\n      color: #6366f1;\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n    }\n\n    .primary-btn:hover {\n      background: #f8f9ff;\n      transform: translateY(-2px);\n      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);\n    }\n\n    .action-btn:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n      transform: none !important;\n    }\n\n    .spinning {\n      animation: spin 1s linear infinite;\n    }\n\n    @keyframes spin {\n      from { transform: rotate(0deg); }\n      to { transform: rotate(360deg); }\n    }\n\n    /* Smart Filter Bar */\n    .filter-bar {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      gap: 16px;\n      margin-bottom: 20px;\n      padding: 16px 20px;\n      background: white;\n      border-radius: 14px;\n      box-shadow: 0 2px 12px rgba(99, 102, 241, 0.06);\n    }\n\n    .filter-chips {\n      display: flex;\n      gap: 8px;\n    }\n\n    .filter-chip {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 16px;\n      background: #f1f5f9;\n      border: 2px solid transparent;\n      border-radius: 20px;\n      font-size: 12px;\n      font-weight: 600;\n      color: #64748b;\n      cursor: pointer;\n      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .filter-chip:hover {\n      background: #e2e8f0;\n      color: #475569;\n    }\n\n    .filter-chip.active {\n      background: #6366f1;\n      color: white;\n      border-color: #6366f1;\n    }\n\n    .filter-chip.running.active {\n      background: #3b82f6;\n      border-color: #3b82f6;\n    }\n\n    .filter-chip.passed.active {\n      background: #22c55e;\n      border-color: #22c55e;\n    }\n\n    .filter-chip.failed.active {\n      background: #ef4444;\n      border-color: #ef4444;\n    }\n\n    .filter-chip i {\n      font-size: 11px;\n    }\n\n    .filter-controls {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n    }\n\n    .time-select select {\n      padding: 10px 14px;\n      border: 2px solid #e2e8f0;\n      border-radius: 10px;\n      font-size: 13px;\n      font-weight: 500;\n      color: #475569;\n      background: white;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .time-select select:focus {\n      outline: none;\n      border-color: #6366f1;\n      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);\n    }\n\n    .search-input {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding: 10px 16px;\n      background: #f8fafc;\n      border: 2px solid #e2e8f0;\n      border-radius: 10px;\n      min-width: 250px;\n      transition: all 0.2s ease;\n    }\n\n    .search-input:focus-within {\n      border-color: #6366f1;\n      background: white;\n      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);\n    }\n\n    .search-input i {\n      color: #94a3b8;\n      font-size: 14px;\n    }\n\n    .search-input input {\n      flex: 1;\n      border: none;\n      background: transparent;\n      outline: none;\n      font-size: 13px;\n      color: #334155;\n    }\n\n    .search-input input::placeholder {\n      color: #94a3b8;\n    }\n\n    .clear-btn {\n      padding: 4px 8px;\n      border: none;\n      background: transparent;\n      color: #94a3b8;\n      cursor: pointer;\n      border-radius: 4px;\n      transition: all 0.2s ease;\n    }\n\n    .clear-btn:hover {\n      background: #e2e8f0;\n      color: #64748b;\n    }\n\n    /* KPI Cards Grid */\n    .kpi-grid {\n      display: grid;\n      grid-template-columns: repeat(4, 1fr);\n      gap: 16px;\n      margin-bottom: 20px;\n    }\n\n    .kpi-card {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n      padding: 20px;\n      background: white;\n      border-radius: 14px;\n      box-shadow: 0 2px 12px rgba(99, 102, 241, 0.06);\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n      position: relative;\n      overflow: hidden;\n    }\n\n    .kpi-card::before {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 4px;\n      height: 100%;\n      border-radius: 4px 0 0 4px;\n    }\n\n    .kpi-card.clickable {\n      cursor: pointer;\n    }\n\n    .kpi-card.clickable:hover {\n      transform: translateY(-3px);\n      box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15);\n    }\n\n    .kpi-card.running::before { background: linear-gradient(180deg, #3b82f6, #60a5fa); }\n    .kpi-card.passed::before { background: linear-gradient(180deg, #22c55e, #4ade80); }\n    .kpi-card.failed::before { background: linear-gradient(180deg, #ef4444, #f87171); }\n    .kpi-card.duration::before { background: linear-gradient(180deg, #8b5cf6, #a78bfa); }\n\n    .kpi-icon {\n      width: 48px;\n      height: 48px;\n      border-radius: 12px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 20px;\n    }\n\n    .kpi-card.running .kpi-icon {\n      background: rgba(59, 130, 246, 0.1);\n      color: #3b82f6;\n    }\n\n    .kpi-card.passed .kpi-icon {\n      background: rgba(34, 197, 94, 0.1);\n      color: #22c55e;\n    }\n\n    .kpi-card.failed .kpi-icon {\n      background: rgba(239, 68, 68, 0.1);\n      color: #ef4444;\n    }\n\n    .kpi-card.duration .kpi-icon {\n      background: rgba(139, 92, 246, 0.1);\n      color: #8b5cf6;\n    }\n\n    .kpi-content {\n      flex: 1;\n    }\n\n    .kpi-value {\n      font-size: 26px;\n      font-weight: 700;\n      color: #1e293b;\n      line-height: 1;\n      margin-bottom: 4px;\n    }\n\n    .kpi-label {\n      font-size: 12px;\n      font-weight: 500;\n      color: #64748b;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .kpi-arrow {\n      color: #cbd5e1;\n      font-size: 14px;\n      opacity: 0;\n      transition: all 0.3s ease;\n    }\n\n    .kpi-card.clickable:hover .kpi-arrow {\n      opacity: 1;\n      color: #6366f1;\n      transform: translateX(4px);\n    }\n\n    /* Execution List Container */\n    .execution-content {\n      background: white;\n      border-radius: 14px;\n      box-shadow: 0 2px 12px rgba(99, 102, 241, 0.06);\n      overflow: hidden;\n    }\n\n    .execution-list {\n      display: flex;\n      flex-direction: column;\n    }\n\n    /* List Header */\n    .list-header {\n      display: grid;\n      grid-template-columns: 2fr 120px 100px 100px 140px 100px;\n      gap: 20px;\n      padding: 16px 24px;\n      background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);\n      border-bottom: 1px solid #e2e8f0;\n      font-size: 11px;\n      font-weight: 700;\n      color: #64748b;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .header-cell {\n      display: flex;\n      align-items: center;\n    }\n\n    /* Execution Row */\n    .execution-row {\n      display: grid;\n      grid-template-columns: 2fr 120px 100px 100px 140px 100px;\n      gap: 20px;\n      padding: 18px 24px;\n      border-bottom: 1px solid #f1f5f9;\n      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .execution-row:last-child {\n      border-bottom: none;\n    }\n\n    .execution-row:hover {\n      background: linear-gradient(90deg, rgba(99, 102, 241, 0.03) 0%, rgba(139, 92, 246, 0.03) 100%);\n    }\n\n    .execution-row.running {\n      background: linear-gradient(90deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.04) 100%);\n      border-left: 3px solid #3b82f6;\n    }\n\n    .execution-row.running:hover {\n      background: linear-gradient(90deg, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0.06) 100%);\n    }\n\n    /* Cells */\n    .cell {\n      display: flex;\n      align-items: center;\n      font-size: 13px;\n      color: #334155;\n    }\n\n    .cell.test-name {\n      flex-direction: column;\n      align-items: flex-start;\n      gap: 4px;\n    }\n\n    .test-info .name {\n      font-weight: 600;\n      color: #1e293b;\n      font-size: 14px;\n    }\n\n    .test-info .suite {\n      font-size: 12px;\n      color: #64748b;\n    }\n\n    .cell.status {\n      flex-direction: column;\n      gap: 8px;\n      align-items: flex-start;\n    }\n\n    .progress-bar {\n      width: 100%;\n      height: 4px;\n      background: #e2e8f0;\n      border-radius: 2px;\n      overflow: hidden;\n    }\n\n    .progress-fill {\n      height: 100%;\n      background: linear-gradient(90deg, #3b82f6, #60a5fa);\n      border-radius: 2px;\n      transition: width 0.3s ease;\n    }\n\n    .cell.actions {\n      gap: 8px;\n      justify-content: flex-end;\n    }\n\n    /* Action Buttons */\n    .icon-btn {\n      width: 36px;\n      height: 36px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: #f8fafc;\n      border: 1px solid #e2e8f0;\n      color: #64748b;\n      cursor: pointer;\n      border-radius: 10px;\n      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n      font-size: 14px;\n    }\n\n    .icon-btn:hover {\n      background: #6366f1;\n      border-color: #6366f1;\n      color: white;\n      transform: translateY(-2px);\n      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);\n    }\n\n    .icon-btn.danger:hover {\n      background: #ef4444;\n      border-color: #ef4444;\n      box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);\n    }\n\n    /* Loading State */\n    .loading-placeholder {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      padding: 80px 40px;\n      background: linear-gradient(180deg, #fafbff 0%, #f8fafc 100%);\n    }\n\n    /* Empty State */\n    .no-data {\n      padding: 80px 40px;\n      text-align: center;\n      background: linear-gradient(180deg, #fafbff 0%, #f8fafc 100%);\n    }\n\n    .no-data i {\n      font-size: 64px;\n      color: #cbd5e1;\n      margin-bottom: 20px;\n    }\n\n    .no-data p {\n      font-size: 16px;\n      color: #64748b;\n      margin-bottom: 24px;\n    }\n\n    .no-data .action-btn {\n      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\n      color: white;\n      padding: 12px 24px;\n      border-radius: 12px;\n      font-weight: 600;\n      box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);\n    }\n\n    .no-data .action-btn:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 6px 24px rgba(99, 102, 241, 0.4);\n    }\n\n    /* Responsive */\n    @media (max-width: 1400px) {\n      .kpi-grid {\n        grid-template-columns: repeat(2, 1fr);\n      }\n    }\n\n    @media (max-width: 1200px) {\n      .filter-bar {\n        flex-direction: column;\n        align-items: stretch;\n      }\n\n      .filter-chips {\n        justify-content: center;\n      }\n\n      .filter-controls {\n        justify-content: center;\n      }\n\n      .list-header,\n      .execution-row {\n        grid-template-columns: 1fr 100px 80px 100px;\n      }\n\n      .header-cell.cost,\n      .header-cell.timestamp,\n      .cell.cost,\n      .cell.timestamp {\n        display: none;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .kpi-grid {\n        grid-template-columns: 1fr;\n      }\n\n      .search-input {\n        min-width: 200px;\n      }\n    }\n  "] }]
+    }], () => [{ type: i1.TestingInstrumentationService }, { type: i2.DialogService }, { type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }], { initialState: [{
             type: Input
         }], stateChange: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TestingExecutionComponent, { className: "TestingExecutionComponent", filePath: "src/Testing/components/testing-execution.component.ts", lineNumber: 608 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TestingExecutionComponent, { className: "TestingExecutionComponent", filePath: "src/Testing/components/testing-execution.component.ts", lineNumber: 897 }); })();
 //# sourceMappingURL=testing-execution.component.js.map