@acorex/modules 20.0.25 → 20.1.0

package/fesm2022/acorex-modules-report-management.mjs

@@ -1,37 +1,42 @@
 import { AXPSessionService, AXPAuthGuard } from '@acorex/platform/auth';
-import { AXP_REPORT_DEFINITION_PROVIDER, AXP_REPORT_CATEGORY_PROVIDER, createAllQueryView, AXPEntityCommandScope, AXPEntityQueryType, AXPLockService, AXP_MENU_PROVIDER, AXPReportDefinitionService } from '@acorex/platform/common';
+import { AXP_REPORT_DEFINITION_PROVIDER, AXP_REPORT_CATEGORY_PROVIDER, createAllQueryView, AXPEntityCommandScope, AXPEntityQueryType, AXPLockService, AXP_MENU_PROVIDER, AXPReportDefinitionService, AXPieChartReportMapper } from '@acorex/platform/common';
 import { AXPDomainModule, provideEntity } from '@acorex/platform/domain';
 import { AXPRootLayoutComponent } from '@acorex/platform/themes/default';
 import * as i0 from '@angular/core';
-import { inject, Injectable, NgModule, computed, output, ViewEncapsulation, ChangeDetectionStrategy, Component, input, viewChild } from '@angular/core';
+import { inject, Injectable, NgModule, computed, viewChild, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, input } from '@angular/core';
 import { ROUTES, ActivatedRoute, Router } from '@angular/router';
 import { AXPQueryService, AXPCommandService } from '@acorex/platform/runtime';
-import { AXP_EXPRESSION_EVALUATOR_SCOPE_PROVIDER } from '@acorex/platform/core';
+import { AXP_EXPRESSION_EVALUATOR_SCOPE_PROVIDER, getSystemActions, applySystemActionDefault } from '@acorex/platform/core';
 import * as i1 from '@acorex/platform/workflow';
 import { AXPWorkflowAction, AXPWorkflowModule } from '@acorex/platform/workflow';
+import * as i2 from '@acorex/platform/layout/builder';
 import { AXPWidgetsCatalog, AXPPageStatus, AXPLayoutBuilderModule } from '@acorex/platform/layout/builder';
 import { AXMEntityCrudServiceImpl } from '@acorex/platform/layout/entity';
-import * as i5 from '@acorex/core/translation';
+import * as i1$3 from '@acorex/core/translation';
 import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
 import { AXDataSource } from '@acorex/cdk/common';
-import { AXMDataSourceService } from '@acorex/modules/platform-management';
+import { AXMDataSourceService } from '@acorex/modules/data-management';
 import { AXPopupService } from '@acorex/components/popup';
 import { signalStore, withState, withComputed, withMethods, patchState, withHooks } from '@ngrx/signals';
 import { AXLocaleService } from '@acorex/core/locale';
 import * as i2$1 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
-import * as i4 from '@acorex/components/decorators';
+import * as i3 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
-import * as i3 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
 import { AXUnsubscriber } from '@acorex/core/utils';
 import { AXPDynamicFormComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutFooterComponent } from '@acorex/platform/layout/components';
 import { AXPPageLayoutBaseComponent, AXPPageLayoutComponent, AXPPageLayoutBase } from '@acorex/platform/layout/views';
 import { AXPLayoutThemeService } from '@acorex/platform/themes/shared';
-import * as i1$1 from '@angular/common';
+import * as i1$2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2 from '@acorex/components/data-table';
+import * as i1$1 from '@acorex/components/data-table';
 import { AXDataTableModule } from '@acorex/components/data-table';
+import { AXDonutChartComponent } from '@acorex/charts/donut-chart';
+import { AXChartLegendComponent } from '@acorex/charts/chart-legend';
+import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
+import * as i5 from '@acorex/components/dropdown';
+import { AXDropdownModule } from '@acorex/components/dropdown';
 
 const config = {
     i18n: 'report-management',
@@ -83,10 +88,10 @@ class AXMReportDefinitionProvider {
         const result = await this.queryService.fetch(`${this.entityName}:GetById`, id);
         return result ?? undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMReportDefinitionProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMReportDefinitionProvider }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMReportDefinitionProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMReportDefinitionProvider }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMReportDefinitionProvider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMReportDefinitionProvider, decorators: [{
             type: Injectable
         }] });
 const AXM_REPORT_DEFINITION_PROVIDER = {
@@ -113,10 +118,10 @@ class AXMReportCategoryProvider {
     async getById(id) {
         return this.getList().then(cats => cats.find(cat => cat.id === id));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMReportCategoryProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMReportCategoryProvider }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMReportCategoryProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMReportCategoryProvider }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMReportCategoryProvider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMReportCategoryProvider, decorators: [{
             type: Injectable
         }] });
 const AXM_REPORT_CATEGORY_PROVIDER = {
@@ -148,10 +153,10 @@ class AXMDataSetServiceImpl extends AXMDataSetService {
     constructor() {
         super(`${RootConfig.module.name}.${RootConfig.entities.dataSet.name}`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMDataSetServiceImpl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMDataSetServiceImpl }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMDataSetServiceImpl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMDataSetServiceImpl }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMDataSetServiceImpl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMDataSetServiceImpl, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -976,7 +981,7 @@ class AXMReportCreateRootWorkflowAction extends AXPWorkflowAction {
     }
     async execute(context) {
         //  const refId = context.getVariable<string>('options.refId');
-        const comp = await import('./acorex-modules-report-management-report-create-root.component-DqrLa6vh.mjs').then(m => m.AXPReportCreateRootComponent);
+        const comp = await import('./acorex-modules-report-management-report-create-root.component-DgouOz2M.mjs').then(m => m.AXPReportCreateRootComponent);
         this.popupService.open(comp, await this.translationService.translateAsync('report.create.title', { scope: 'report-management' }));
     }
 }
@@ -1044,7 +1049,7 @@ function routesFacory() {
             children: [
                 {
                     path: '**',
-                    loadComponent: () => import('./acorex-modules-report-management-report-runner-root-page.component-C3UP9Jsi.mjs').then((c) => c.AXMReportRunnerRootPageComponent),
+                    loadComponent: () => import('./acorex-modules-report-management-report-runner-root-page.component-DHu-kyCd.mjs').then((c) => c.AXMReportRunnerRootPageComponent),
                     data: { reuse: true },
                 },
             ],
@@ -1053,9 +1058,9 @@ function routesFacory() {
     return routes;
 }
 class AXMReportManagementModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMReportManagementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.7", ngImport: i0, type: AXMReportManagementModule, imports: [AXPDomainModule, i1.AXPWorkflowModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMReportManagementModule, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMReportManagementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: AXMReportManagementModule, imports: [AXPDomainModule, i1.AXPWorkflowModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMReportManagementModule, providers: [
             {
                 provide: AXMDataSetService,
                 useClass: AXMDataSetServiceImpl,
@@ -1098,7 +1103,7 @@ class AXMReportManagementModule {
                 },
             })] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMReportManagementModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMReportManagementModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1153,30 +1158,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
 
 const AXPReportViewerViewModel = signalStore(withState(() => ({
     reportDefinition: null,
-    reportData: [],
+    currentLayout: null,
     filterContext: {},
-    previousFilterContext: {},
     categoriesPath: [],
+    allowFetchData: false,
     status: AXPPageStatus.Idle,
-    totalRecords: 0,
-    currentPage: 1,
-    pageSize: 10,
     error: null,
-    showResults: false,
 })), withComputed((store) => ({
-    //#region ----   Layout Type Detection   ----
-    layoutType: computed(() => store.reportDefinition()?.layout?.type),
+    //#region ----   Layout Management   ----
+    availableLayouts: computed(() => {
+        const report = store.reportDefinition();
+        if (!report?.layouts)
+            return [];
+        return report.layouts.map(layout => ({
+            id: layout.id,
+            title: layout.title,
+            icon: layout.icon,
+            type: layout.layout.type
+        }));
+    }),
+    defaultLayout: computed(() => {
+        const report = store.reportDefinition();
+        if (!report?.layouts?.length)
+            return null;
+        // Find layout marked as default, or use first layout
+        return report.layouts.find(l => l.isDefault) || report.layouts[0];
+    }),
+    activeLayoutId: computed(() => store.currentLayout()?.id || null),
+    layoutType: computed(() => store.currentLayout()?.layout?.type || null),
     //#endregion
-    //#region ----   Table Layout Configuration   ----
-    tableLayoutConfig: computed(() => store.reportDefinition()?.layout?.type === 'table'
-        ? store.reportDefinition()?.layout
-        : null),
+    //#region ----   Layout-Specific Configurations   ----
+    tableLayoutConfig: computed(() => {
+        const layout = store.currentLayout();
+        return layout?.layout?.type === 'table'
+            ? layout.layout
+            : null;
+    }),
+    chartLayoutConfig: computed(() => {
+        const layout = store.currentLayout();
+        return layout?.layout?.type === 'chart'
+            ? layout.layout
+            : null;
+    }),
     //#endregion
     //#region ----   State Indicators   ----
     isLoading: computed(() => store.status() === AXPPageStatus.Processing),
     isExecuting: computed(() => store.status() === AXPPageStatus.Submitting),
-    hasData: computed(() => store.reportData().length > 0),
     hasError: computed(() => store.error() !== null),
+    hasMultipleLayouts: computed(() => {
+        const report = store.reportDefinition();
+        return (report?.layouts?.length ?? 0) > 1;
+    }),
     title: computed(() => store.reportDefinition()?.title ?? 'Report Viewer'),
     description: computed(() => store.reportDefinition()?.description ?? null),
     //#endregion
@@ -1201,184 +1233,200 @@ const AXPReportViewerViewModel = signalStore(withState(() => ({
         };
     }),
     //#endregion
-    //#region ----   Data Source   ----
-    dataSource: computed(() => new AXDataSource({
-        load: async () => {
-            debugger;
-            const data = store.reportData();
-            return {
-                items: data,
-                total: store.totalRecords()
-            };
-        },
-        pageSize: store.pageSize(),
-        key: 'id'
-    }))
+    //#region ----   Layout Type Detection   ----
+    isTableLayout: computed(() => store.currentLayout()?.layout?.type === 'table'),
+    isChartLayout: computed(() => store.currentLayout()?.layout?.type === 'chart'),
     //#endregion
-})), withComputed((store) => ({
-    //#region ----   Derived Layout Properties   ----
-    isTableLayout: computed(() => store.layoutType() === 'table'),
-    isChartLayout: computed(() => store.layoutType() === 'chart'),
-    isCardsLayout: computed(() => store.layoutType() === 'cards'),
-    isCustomLayout: computed(() => store.layoutType() === 'custom'),
-    columns: computed(() => {
-        const layout = store.tableLayoutConfig();
-        return layout?.columns?.map((col) => ({
-            field: col.field,
-            title: col.title || col.field,
-            width: col.width || '150px',
-            visible: col.visible !== false,
-            align: col.align || 'left',
-            widget: col.widget
-        })) || [];
-    }),
-    paginationEnabled: computed(() => {
-        const layout = store.tableLayoutConfig();
-        return layout?.options?.pagination !== false;
+    //#region ----   Action States   ----
+    canExecute: computed(() => store.reportDefinition() !== null &&
+        store.currentLayout() !== null &&
+        store.status() !== AXPPageStatus.Processing &&
+        store.status() !== AXPPageStatus.Submitting),
+    canSwitchLayout: computed(() => (store.reportDefinition()?.layouts?.length ?? 0) > 1 &&
+        store.status() !== AXPPageStatus.Submitting),
+    canSelectRows: computed(() => {
+        const layout = store.currentLayout();
+        return layout?.layout?.type === 'table' &&
+            layout.layout.options?.selectable?.mode &&
+            layout.layout.options?.selectable?.mode !== 'none';
     }),
-    canExecute: computed(() => store.reportDefinition() !== null && !store.isLoading() && !store.isExecuting()),
     //#endregion
-})), withMethods((store, reportDefinitionService = inject(AXPReportDefinitionService), commandService = inject(AXPCommandService)) => ({
-    //#region ----   Report Loading   ----
-    async loadReport(reportId) {
+})), withMethods((store, reportDefinitionService = inject(AXPReportDefinitionService), commandService = inject(AXPCommandService)) => {
+    const executeReport = async () => {
+        const report = store.reportDefinition();
+        const layout = store.currentLayout();
+        if (!report || !layout)
+            return;
+        patchState(store, {
+            status: AXPPageStatus.Submitting,
+            error: null
+        });
+        patchState(store, {
+            allowFetchData: true
+        });
+        patchState(store, {
+            status: AXPPageStatus.Submitted,
+            error: null
+        });
+    };
+    const fetchData = async (parameters = {}) => {
+        const report = store.reportDefinition();
+        const layout = store.currentLayout();
+        if (!report || !layout) {
+            return null;
+        }
         patchState(store, {
             status: AXPPageStatus.Processing,
             error: null
         });
         try {
-            const report = await reportDefinitionService.getReportById(reportId);
-            if (report) {
-                // Configure parameter widgets with proper paths
-                report.parameterGroups.forEach(group => {
-                    group.parameters.forEach(param => {
-                        param.widget.path = param.path;
-                    });
-                });
-                // Load categories path for breadcrumbs
-                const categoriesPath = await reportDefinitionService.getCategoriesPathByReportId(reportId);
-                patchState(store, {
-                    reportDefinition: report,
-                    categoriesPath: categoriesPath || [],
-                    reportData: [],
-                    totalRecords: 0,
-                    currentPage: 1,
-                    filterContext: {}, // Reset context when loading new report
-                    previousFilterContext: {}
-                });
-            }
+            // Create execution context - ensure dataSource is provided
+            const dataSource = layout.dataSource || {
+                type: 'query',
+                name: 'getEmployeeList'
+            };
+            const context = {
+                reportId: report.id,
+                layoutId: layout.id,
+                dataSource: dataSource,
+                parameters: {
+                    ...store.filterContext(),
+                    ...parameters
+                }
+            };
+            return await commandService.execute('ReportManagement.Report:Execute', context);
         }
         catch (error) {
             patchState(store, {
-                error: 'Failed to load report definition'
+                error: 'Failed to execute report',
             });
-            console.error('Error loading report:', error);
+            console.error('Error executing report:', error);
+            return null;
         }
         finally {
             patchState(store, {
                 status: AXPPageStatus.Idle
             });
         }
-    },
-    //#endregion
-    //#region ----   Data Execution   ----
-    async executeReport() {
-        const report = store.reportDefinition();
-        if (!report)
-            return;
-        patchState(store, {
-            status: AXPPageStatus.Submitting,
-            error: null
-        });
-        try {
-            const result = await commandService.execute('ReportManagement.Report:Execute', {
-                reportId: report.id,
-                parameters: store.filterContext(),
-                page: store.currentPage(),
-                pageSize: store.pageSize()
+    };
+    return {
+        //#region ----   Report Loading   ----
+        async loadReport(reportId) {
+            patchState(store, {
+                status: AXPPageStatus.Processing,
+                error: null
             });
+            try {
+                const report = await reportDefinitionService.getReportById(reportId);
+                if (report) {
+                    console.log('report', report);
+                    // Configure parameter widgets with proper paths
+                    report.parameterGroups.forEach(group => {
+                        group.parameters.forEach(param => {
+                            param.widget.path = param.path;
+                        });
+                    });
+                    // Load categories path for breadcrumbs
+                    const categoriesPath = await reportDefinitionService.getCategoriesPathByReportId(reportId);
+                    // Set default layout
+                    const defaultLayout = report.layouts.find(l => l.isDefault) || report.layouts[0];
+                    patchState(store, {
+                        reportDefinition: report,
+                        currentLayout: defaultLayout,
+                        categoriesPath: categoriesPath || [],
+                        filterContext: {}, // Reset context when loading new report
+                        allowFetchData: false,
+                    });
+                }
+            }
+            catch (error) {
+                patchState(store, {
+                    error: 'Failed to load report definition'
+                });
+                console.error('Error loading report:', error);
+            }
+            finally {
+                patchState(store, {
+                    status: AXPPageStatus.Idle
+                });
+            }
+        },
+        //#endregion
+        //#region ----   Layout Management   ----
+        switchLayout(layoutId) {
+            const report = store.reportDefinition();
+            if (!report)
+                return;
+            const layout = report.layouts.find(l => l.id === layoutId);
+            if (layout) {
+                patchState(store, {
+                    currentLayout: layout,
+                });
+            }
+        },
+        //#endregion
+        //#region ----   Data Execution   ----
+        executeReport,
+        fetchData,
+        //#endregion
+        //#region ----   Filter Management   ----
+        updateFilterContext(context) {
             patchState(store, {
-                showResults: true,
-                reportData: result.data || [],
-                totalRecords: result.total || 0,
-                previousFilterContext: { ...store.filterContext() }
+                filterContext: { ...store.filterContext(), ...context },
             });
-        }
-        catch (error) {
+        },
+        clearFilters() {
             patchState(store, {
-                error: 'Failed to execute report',
-                showResults: false,
+                allowFetchData: false,
+                filterContext: {},
             });
-            console.error('Error executing report:', error);
-        }
-        finally {
+        },
+        resetFilters() {
             patchState(store, {
-                status: AXPPageStatus.Idle
+                allowFetchData: false
+            });
+        },
+        //#endregion
+        //#region ----   Export Management   ----
+        async exportReport(format) {
+            const layout = store.currentLayout();
+            if (!layout?.export) {
+                console.warn('Export not configured for current layout');
+                return;
+            }
+            try {
+                // Export logic would go here
+                // This would typically call a different command for export
+                console.log(`Exporting report in ${format} format`);
+            }
+            catch (error) {
+                console.error('Error exporting report:', error);
+            }
+        },
+        //#endregion
+        //#region ----   Utility Methods   ----
+        refresh() {
+            return executeReport();
+        },
+        clearError() {
+            patchState(store, {
+                error: null
+            });
+        },
+        reset() {
+            patchState(store, {
+                reportDefinition: null,
+                currentLayout: null,
+                filterContext: {},
+                allowFetchData: false,
+                categoriesPath: [],
+                status: AXPPageStatus.Idle,
+                error: null,
             });
         }
-    },
-    //#endregion
-    //#region ----   Filter Management   ----
-    updateFilterContext(context) {
-        patchState(store, {
-            filterContext: { ...store.filterContext(), ...context },
-        });
-    },
-    clearFilters() {
-        patchState(store, {
-            filterContext: {},
-            reportData: [],
-            totalRecords: 0,
-            currentPage: 1
-        });
-    },
-    resetFilters() {
-        patchState(store, {
-            filterContext: { ...store.previousFilterContext() }
-        });
-    },
-    //#endregion
-    //#region ----   Pagination   ----
-    changePage(page) {
-        patchState(store, {
-            currentPage: page
-        });
-        // Call executeReport method
-        this.executeReport();
-    },
-    changePageSize(pageSize) {
-        patchState(store, {
-            pageSize: pageSize,
-            currentPage: 1
-        });
-        // Call executeReport method
-        this.executeReport();
-    },
-    //#endregion
-    //#region ----   Utility Methods   ----
-    refresh() {
-        // Call executeReport method
-        this.executeReport();
-    },
-    clearError() {
-        patchState(store, {
-            error: null
-        });
-    },
-    reset() {
-        patchState(store, {
-            reportDefinition: null,
-            reportData: [],
-            filterContext: {},
-            previousFilterContext: {},
-            categoriesPath: [],
-            status: AXPPageStatus.Idle,
-            totalRecords: 0,
-            currentPage: 1,
-            error: null
-        });
-    }
-    //#endregion
-})), withHooks((store, translationService = inject(AXTranslationService), localeService = inject(AXLocaleService)) => ({
+        //#endregion
+    };
+}), withHooks((store, translationService = inject(AXTranslationService), localeService = inject(AXLocaleService)) => ({
     async onInit() {
         // Subscribe to language and locale changes
         translationService.langChanges$.subscribe(() => {
@@ -1397,31 +1445,109 @@ class AXPReportTableViewComponent {
     constructor() {
         //#region ----   Dependencies   ----
         this.vm = inject(AXPReportViewerViewModel);
+        this.commandService = inject(AXPCommandService);
+        this.grid = viewChild('grid', ...(ngDevMode ? [{ debugName: "grid" }] : []));
         //#endregion
-        //#region ----   Outputs   ----
-        this.rowClick = output();
-        this.actionClick = output();
+        //#region ----   Computed Properties   ---- 
+        this.layout = computed(() => {
+            return this.vm.currentLayout()?.layout;
+        }, ...(ngDevMode ? [{ debugName: "layout" }] : []));
+        this.#fetchData = effect(() => {
+            if (this.grid() && this.vm.allowFetchData()) {
+                this.grid()?.refresh();
+            }
+        }, ...(ngDevMode ? [{ debugName: "#fetchData" }] : []));
+        this.dataSource = new AXDataSource({
+            load: async (e) => {
+                if (!this.vm.allowFetchData()) {
+                    return { items: [], total: 0 };
+                }
+                const result = await this.vm.fetchData(e);
+                if (!result?.data || result.data.type !== 'table') {
+                    console.error('invalid table result');
+                    return { items: [], total: 0 };
+                }
+                ;
+                let items = result.data.items ?? [];
+                let total = result.data.total || 0;
+                return { items, total };
+            },
+            pageSize: 10,
+            key: 'id'
+        });
+        this.columns = computed(() => {
+            return this.layout().columns?.map((col) => ({
+                field: col.field,
+                title: col.title || col.field,
+                width: col.width || '150px',
+                visible: col.visible !== false,
+                align: col.align || 'left',
+                widget: { ...col.widget, path: col.field }
+            })) || [];
+        }, ...(ngDevMode ? [{ debugName: "columns" }] : []));
+        this.paginationEnabled = computed(() => {
+            return this.layout().options?.pagination !== false;
+        }, ...(ngDevMode ? [{ debugName: "paginationEnabled" }] : []));
+        this.primaryRowAction = computed(() => {
+            return this.layout().actions?.filter(a => a.priority === 'primary')?.map(a => this.convertToRowCommandItem(a)) || [];
+        }, ...(ngDevMode ? [{ debugName: "primaryRowAction" }] : []));
+        this.hasPrimaryRowAction = computed(() => {
+            return this.primaryRowAction().length > 0;
+        }, ...(ngDevMode ? [{ debugName: "hasPrimaryRowAction" }] : []));
+        this.secondaryRowAction = computed(() => {
+            return this.layout().actions?.filter(a => a.priority === 'secondary')?.map(a => this.convertToRowCommandItem(a)) || [];
+        }, ...(ngDevMode ? [{ debugName: "secondaryRowAction" }] : []));
+        this.hasSecondaryRowAction = computed(() => {
+            return this.secondaryRowAction().length > 0;
+        }, ...(ngDevMode ? [{ debugName: "hasSecondaryRowAction" }] : []));
+        this.defaultRowAction = computed(() => {
+            const defaultAction = this.layout().actions?.find(a => a.default);
+            if (!defaultAction) {
+                return null;
+            }
+            return this.convertToRowCommandItem(defaultAction);
+        }, ...(ngDevMode ? [{ debugName: "defaultRowAction" }] : []));
     }
     //#endregion
     //#region ----   Event Handlers   ----
     handleRowClick(event) {
-        this.rowClick.emit(event);
+        this.handleRowAction(event.name, event.data);
+    }
+    handleDbRowClick(event) {
+        if (this.defaultRowAction()) {
+            this.handleRowAction(this.defaultRowAction().name, event.data);
+        }
+    }
+    handleRowAction(name, data) {
+        console.log('row action', name, data);
     }
+    #fetchData;
     //#endregion
-    //#region ----   Utility Methods   ----
-    getStatusColor(status) {
-        switch (status?.toLowerCase()) {
-            case 'active': return 'success';
-            case 'pending': return 'warning';
-            case 'completed': return 'primary';
-            case 'inactive': return 'danger';
-            default: return 'secondary';
+    //#region ----   Helpers   ----
+    convertToRowCommandItem(action) {
+        const systemAction = getSystemActions(action.type);
+        if (!systemAction) {
+            return {
+                icon: action.icon ?? 'fa-light fa-eye',
+                text: action.title,
+                name: action.name,
+                divided: action.break,
+                color: action.color,
+            };
         }
+        const defaultAction = applySystemActionDefault(action, systemAction.key);
+        return {
+            icon: defaultAction.icon ?? 'fa-light fa-eye',
+            text: defaultAction.title,
+            name: defaultAction.name,
+            divided: defaultAction.break,
+            color: defaultAction.color,
+        };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPReportTableViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: AXPReportTableViewComponent, isStandalone: true, selector: "axp-report-table-view", outputs: { rowClick: "rowClick", actionClick: "actionClick" }, host: { classAttribute: "axp-report-table-view" }, ngImport: i0, template: "<ng-container *translate=\"let t\">\n  @if (vm.isLoading()) {\n    <!-- Loading State -->\n    <div class=\"__loading-state\">\n      <ax-loading></ax-loading>\n      <p class=\"__loading-text\">\n        {{ t('@report-management:features.report-viewer.loading') | async }}\n      </p>\n    </div>\n  } @else if (vm.hasError()) {\n    <!-- Error State -->\n    <div class=\"__error-state\">\n      <div class=\"__error-content\">\n        <div class=\"__error-icon\">\n          <ax-icon class=\"fa-light fa-exclamation-triangle\"></ax-icon>\n        </div>\n        <div class=\"__error-message\">\n          {{ vm.error() || (t('@report-management:features.report-viewer.error') | async) }}\n        </div>\n      </div>\n    </div>\n  } @else if (!vm.hasData()) {\n    <!-- No Data State -->\n    <div class=\"__no-data-state\">\n      <div class=\"__no-data-content\">\n        <div class=\"__no-data-icon\">\n          <ax-icon class=\"fa-light fa-table\"></ax-icon>\n        </div>\n        <div class=\"__no-data-title\">\n          {{ t('@report-management:features.report-viewer.no-data.title') | async }}\n        </div>\n        <div class=\"__no-data-description\">\n          {{ t('@report-management:features.report-viewer.no-data.description') | async }}\n        </div>\n      </div>\n    </div>\n  } @else {\n    <!-- Data Table -->\n    <ax-data-table\n      [dataSource]=\"vm.dataSource()\"\n      [paging]=\"vm.paginationEnabled()\"\n      [loading]=\"{ enabled: true, animation: true }\"\n      (onRowClick)=\"handleRowClick($event)\"\n      class=\"ax-flex-1\"\n    >\n      <!-- Dynamic columns based on configuration -->\n      @for (column of vm.columns(); track column.field) {\n        @if (column.visible) {\n          <ax-text-column [dataField]=\"column.field\" [caption]=\"column.title\" [width]=\"column.width\"> </ax-text-column>\n        }\n      }\n    </ax-data-table>\n  }\n</ng-container>\n", styles: [".axp-report-table-view{display:flex;height:100%;width:100%;flex:1 1 0%;flex-direction:column;overflow:hidden}.axp-report-table-view .__loading-state{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem}.axp-report-table-view .__loading-state ax-loading{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-500),var(--tw-text-opacity, 1))}.axp-report-table-view .__loading-state .__loading-text{max-width:28rem;text-align:center;font-size:.875rem;line-height:1.25rem;opacity:.75}.axp-report-table-view .__error-state{display:flex;height:100%;align-items:center;justify-content:center;padding:2rem}.axp-report-table-view .__error-state .__error-content{display:flex;max-width:28rem;flex-direction:column;align-items:center;gap:1rem;text-align:center}.axp-report-table-view .__error-state .__error-content .__error-icon{margin-bottom:.5rem;font-size:3rem;line-height:1;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-500),var(--tw-text-opacity, 1))}.axp-report-table-view .__error-state .__error-content .__error-message{font-weight:500;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-500),var(--tw-text-opacity, 1))}.axp-report-table-view .__no-data-state{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center}.axp-report-table-view .__no-data-state .__no-data-content{max-width:28rem}.axp-report-table-view .__no-data-state .__no-data-content .__no-data-icon{margin-bottom:1rem;font-size:3rem;line-height:1;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-secondary-500),var(--tw-text-opacity, 1));opacity:.5}.axp-report-table-view .__no-data-state .__no-data-content .__no-data-title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-report-table-view .__no-data-state .__no-data-content .__no-data-description{font-size:.875rem;line-height:1.25rem;opacity:.75}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i2.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "parentField", "rowTemplate", "emptyTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i2.AXDataTableTextColumnComponent, selector: "ax-text-column", inputs: ["width", "caption", "allowSorting", "allowResizing", "fixed", "customExpandIcon", "customCollapseIcon", "dataField", "expandHandler", "wrapText", "cellTemplate", "footerTemplate", "headerTemplate", "format", "formatOptions"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i3.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i4.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i5.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXPLayoutBuilderModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPReportTableViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: AXPReportTableViewComponent, isStandalone: true, selector: "axp-report-table-view", viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true, isSignal: true }], ngImport: i0, template: "<ax-data-table\n  #grid\n  [dataSource]=\"dataSource\"\n  [paging]=\"true\"\n  (onRowDbClick)=\"handleDbRowClick($event)\"\n  class=\"ax-flex-1\"\n>\n  <!-- Dynamic columns based on configuration -->\n  <ax-index-column fixed=\"start\" [width]=\"'80px'\" [padZero]=\"true\"></ax-index-column>\n  @if (vm.canSelectRows()) {\n    <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\n  }\n  @for (column of columns(); track column.field) {\n    @if (column.visible) {\n      <axp-widget-column-renderer\n        [customWidth]=\"column.width + 'px'\"\n        [caption]=\"(column.title | translate | async)!\"\n        [node]=\"column.widget!\"\n      ></axp-widget-column-renderer>\n    }\n  }\n  @if (hasPrimaryRowAction()) {\n    <ax-command-column\n      fixed=\"end\"\n      [width]=\"'100px'\"\n      [items]=\"primaryRowAction()\"\n      (onItemClick)=\"handleRowClick($event)\"\n    ></ax-command-column>\n  }\n  @if (hasSecondaryRowAction()) {\n    <ax-dropdown-command-column\n      fixed=\"end\"\n      [width]=\"'60px'\"\n      [items]=\"secondaryRowAction()\"\n      (onItemClick)=\"handleRowClick($event)\"\n    ></ax-dropdown-command-column>\n  }\n</ax-data-table>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i1$1.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i1$1.AXRowIndexColumnComponent, selector: "ax-index-column", inputs: ["width", "caption", "fixed", "footerTemplate", "padZero"] }, { kind: "component", type: i1$1.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "component", type: i1$1.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i1$1.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: i2.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "cellTemplate", "headerTemplate"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPReportTableViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPReportTableViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-report-table-view', standalone: true, imports: [
                         CommonModule,
@@ -1430,9 +1556,128 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                         AXDecoratorModule,
                         AXTranslationModule,
                         AXPLayoutBuilderModule
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        class: 'axp-report-table-view'
-                    }, template: "<ng-container *translate=\"let t\">\n  @if (vm.isLoading()) {\n    <!-- Loading State -->\n    <div class=\"__loading-state\">\n      <ax-loading></ax-loading>\n      <p class=\"__loading-text\">\n        {{ t('@report-management:features.report-viewer.loading') | async }}\n      </p>\n    </div>\n  } @else if (vm.hasError()) {\n    <!-- Error State -->\n    <div class=\"__error-state\">\n      <div class=\"__error-content\">\n        <div class=\"__error-icon\">\n          <ax-icon class=\"fa-light fa-exclamation-triangle\"></ax-icon>\n        </div>\n        <div class=\"__error-message\">\n          {{ vm.error() || (t('@report-management:features.report-viewer.error') | async) }}\n        </div>\n      </div>\n    </div>\n  } @else if (!vm.hasData()) {\n    <!-- No Data State -->\n    <div class=\"__no-data-state\">\n      <div class=\"__no-data-content\">\n        <div class=\"__no-data-icon\">\n          <ax-icon class=\"fa-light fa-table\"></ax-icon>\n        </div>\n        <div class=\"__no-data-title\">\n          {{ t('@report-management:features.report-viewer.no-data.title') | async }}\n        </div>\n        <div class=\"__no-data-description\">\n          {{ t('@report-management:features.report-viewer.no-data.description') | async }}\n        </div>\n      </div>\n    </div>\n  } @else {\n    <!-- Data Table -->\n    <ax-data-table\n      [dataSource]=\"vm.dataSource()\"\n      [paging]=\"vm.paginationEnabled()\"\n      [loading]=\"{ enabled: true, animation: true }\"\n      (onRowClick)=\"handleRowClick($event)\"\n      class=\"ax-flex-1\"\n    >\n      <!-- Dynamic columns based on configuration -->\n      @for (column of vm.columns(); track column.field) {\n        @if (column.visible) {\n          <ax-text-column [dataField]=\"column.field\" [caption]=\"column.title\" [width]=\"column.width\"> </ax-text-column>\n        }\n      }\n    </ax-data-table>\n  }\n</ng-container>\n", styles: [".axp-report-table-view{display:flex;height:100%;width:100%;flex:1 1 0%;flex-direction:column;overflow:hidden}.axp-report-table-view .__loading-state{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem}.axp-report-table-view .__loading-state ax-loading{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-500),var(--tw-text-opacity, 1))}.axp-report-table-view .__loading-state .__loading-text{max-width:28rem;text-align:center;font-size:.875rem;line-height:1.25rem;opacity:.75}.axp-report-table-view .__error-state{display:flex;height:100%;align-items:center;justify-content:center;padding:2rem}.axp-report-table-view .__error-state .__error-content{display:flex;max-width:28rem;flex-direction:column;align-items:center;gap:1rem;text-align:center}.axp-report-table-view .__error-state .__error-content .__error-icon{margin-bottom:.5rem;font-size:3rem;line-height:1;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-500),var(--tw-text-opacity, 1))}.axp-report-table-view .__error-state .__error-content .__error-message{font-weight:500;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-500),var(--tw-text-opacity, 1))}.axp-report-table-view .__no-data-state{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center}.axp-report-table-view .__no-data-state .__no-data-content{max-width:28rem}.axp-report-table-view .__no-data-state .__no-data-content .__no-data-icon{margin-bottom:1rem;font-size:3rem;line-height:1;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-secondary-500),var(--tw-text-opacity, 1));opacity:.5}.axp-report-table-view .__no-data-state .__no-data-content .__no-data-title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-report-table-view .__no-data-state .__no-data-content .__no-data-description{font-size:.875rem;line-height:1.25rem;opacity:.75}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ax-data-table\n  #grid\n  [dataSource]=\"dataSource\"\n  [paging]=\"true\"\n  (onRowDbClick)=\"handleDbRowClick($event)\"\n  class=\"ax-flex-1\"\n>\n  <!-- Dynamic columns based on configuration -->\n  <ax-index-column fixed=\"start\" [width]=\"'80px'\" [padZero]=\"true\"></ax-index-column>\n  @if (vm.canSelectRows()) {\n    <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\n  }\n  @for (column of columns(); track column.field) {\n    @if (column.visible) {\n      <axp-widget-column-renderer\n        [customWidth]=\"column.width + 'px'\"\n        [caption]=\"(column.title | translate | async)!\"\n        [node]=\"column.widget!\"\n      ></axp-widget-column-renderer>\n    }\n  }\n  @if (hasPrimaryRowAction()) {\n    <ax-command-column\n      fixed=\"end\"\n      [width]=\"'100px'\"\n      [items]=\"primaryRowAction()\"\n      (onItemClick)=\"handleRowClick($event)\"\n    ></ax-command-column>\n  }\n  @if (hasSecondaryRowAction()) {\n    <ax-dropdown-command-column\n      fixed=\"end\"\n      [width]=\"'60px'\"\n      [items]=\"secondaryRowAction()\"\n      (onItemClick)=\"handleRowClick($event)\"\n    ></ax-dropdown-command-column>\n  }\n</ax-data-table>\n" }]
+        }] });
+
+class AXPReportChartViewComponent {
+    constructor() {
+        //#region ----   Dependencies   ----
+        this.vm = inject(AXPReportViewerViewModel);
+        this.AXPPageStatus = AXPPageStatus;
+        //#endregion
+        //#region ----   Computed Properties   ----
+        /**
+         * Current chart layout configuration
+         */
+        this.chartLayout = computed(() => {
+            const layout = this.vm.currentLayout();
+            return layout?.layout.type === 'chart'
+                ? layout.layout
+                : null;
+        }, ...(ngDevMode ? [{ debugName: "chartLayout" }] : []));
+        /**
+         * Chart configuration options
+         */
+        this.chartOptions = computed(() => {
+            const chartLayout = this.chartLayout();
+            return chartLayout?.options || null;
+        }, ...(ngDevMode ? [{ debugName: "chartOptions" }] : []));
+        /**
+         * Chart type for rendering
+         */
+        this.chartType = computed(() => {
+            const options = this.chartOptions();
+            return options?.chartType || 'bar';
+        }, ...(ngDevMode ? [{ debugName: "chartType" }] : []));
+        /**
+         * Data mapping configuration
+         */
+        this.dataMapping = computed(() => {
+            const options = this.chartOptions();
+            return options?.dataMapping || null;
+        }, ...(ngDevMode ? [{ debugName: "dataMapping" }] : []));
+        //#endregion
+        //#region ----   Effects   ----
+        /**
+         * Effect to handle data fetching when chart configuration changes
+         */
+        this.#fetchData = effect(() => {
+            if (this.vm.allowFetchData() && this.chartOptions()) {
+                // TODO: Implement chart data fetching
+                console.log('Chart data fetch triggered', {
+                    chartType: this.chartType(),
+                    dataMapping: this.dataMapping()
+                });
+                this.vm.fetchData().then((data) => {
+                    const donutChartData = AXPieChartReportMapper((data?.data).data ?? {});
+                    this.donutChartData.set(donutChartData);
+                    console.log('donutChartData', donutChartData);
+                });
+            }
+        }, ...(ngDevMode ? [{ debugName: "#fetchData" }] : []));
+        this.donutChartData = signal([], ...(ngDevMode ? [{ debugName: "donutChartData" }] : []));
+        this.donutChartOptions = signal({
+            totalLabel: 'Total',
+            showTooltip: true
+        }, ...(ngDevMode ? [{ debugName: "donutChartOptions" }] : []));
+        this.legendOptions = signal({
+            mode: 'horizontal',
+        }, ...(ngDevMode ? [{ debugName: "legendOptions" }] : []));
+    }
+    //#endregion
+    //#region ----   Effects   ----
+    /**
+     * Effect to handle data fetching when chart configuration changes
+     */
+    #fetchData;
+    //#endregion
+    //#region ----   Event Handlers   ----
+    /**
+     * Handle chart click events
+     */
+    handleChartClick(event) {
+        // TODO: Implement chart click handling
+        console.log('Chart clicked:', event);
+    }
+    /**
+     * Handle chart data point selection
+     */
+    handleDataPointSelect(event) {
+        // TODO: Implement data point selection
+        console.log('Data point selected:', event);
+    }
+    //#endregion
+    //#region ----   Helper Methods   ----
+    /**
+     * Check if chart is ready to render
+     */
+    isChartReady() {
+        return !!(this.chartOptions() && this.dataMapping());
+    }
+    /**
+ * Get chart configuration for rendering
+ */
+    getChartConfig() {
+        // TODO: Transform AXPReportChartOptions to chart library format
+        return {
+            type: this.chartType(),
+            options: this.chartOptions(),
+            dataMapping: this.dataMapping()
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPReportChartViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: AXPReportChartViewComponent, isStandalone: true, selector: "axp-report-chart-view", ngImport: i0, template: "<div class=\"axp-report-chart-view\" *translate=\"let t\">\n  @if (vm.status() === AXPPageStatus.Processing) {\n    <!-- Loading State -->\n    <div class=\"__loading\">\n      <div\n        class=\"ax-spinner ax-spin ax-border-4 ax-border-gray-200 ax-border-t-primary ax-rounded-full ax-w-12 ax-h-12\"\n      ></div>\n      <div class=\"__loading-text\">\n        {{ t('@report-management:features.report-viewer.loading.chart') | async }}\n      </div>\n    </div>\n  } @else if (vm.status() === AXPPageStatus.Error) {\n    <!-- Error State -->\n    <div class=\"__error\">\n      <div class=\"__error-icon\">\n        <i class=\"fa-light fa-exclamation-triangle\"></i>\n      </div>\n      <div class=\"__error-content\">\n        <h4 class=\"__error-title\">\n          {{ t('@report-management:features.report-viewer.error.title') | async }}\n        </h4>\n        <p class=\"__error-description\">\n          {{ vm.error() || t('@report-management:features.report-viewer.error.generic') | async }}\n        </p>\n      </div>\n    </div>\n  } @else if (isChartReady()) {\n    <!-- Chart Content -->\n    <div class=\"__chart-container\">\n      @if (chartLayout()?.header) {\n        <div class=\"__chart-header\">\n          <h3 class=\"__chart-title\">{{ chartLayout()?.header?.title }}</h3>\n          @if (chartLayout()?.header?.showDate) {\n            <div class=\"__chart-date\">{{ 'common.date.today' | translate | async }}</div>\n          }\n        </div>\n      }\n\n      <div class=\"__chart-body\">\n        <!-- Chart component will be rendered here -->\n        <div class=\"__chart-placeholder\">\n          <div class=\"__placeholder-content\">\n            <div\n              class=\"ax-flex ax-flex-wrap ax-items-center ax-justify-center ax-gap-10\"\n              [class]=\"legendOptions().mode === 'horizontal' ? 'ax-flex-col' : 'ax-flex-row'\"\n            >\n              <!-- Chart Area -->\n              <div class=\"ax-flex-0 ax-size-96\">\n                <ax-donut-chart #chart [data]=\"donutChartData()\" [options]=\"donutChartOptions()\"></ax-donut-chart>\n              </div>\n              <!-- Legend Area -->\n              @if (donutChartData().length > 0) {\n                <div>\n                  <ax-chart-legend [options]=\"legendOptions()\" [chart]=\"chart\"></ax-chart-legend>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n      </div>\n\n      @if (chartLayout()?.footer) {\n        <div class=\"__chart-footer\">\n          @if (chartLayout()?.footer?.customHtml) {\n            <div [innerHTML]=\"chartLayout()?.footer?.customHtml\"></div>\n          }\n        </div>\n      }\n    </div>\n  } @else {\n    <!-- No Configuration State -->\n    <div class=\"__no-config\">\n      <div class=\"__no-config-icon\">\n        <i class=\"fa-light fa-chart-line\"></i>\n      </div>\n      <div class=\"__no-config-content\">\n        <h4 class=\"__no-config-title\">\n          {{ t('@report-management:features.report-viewer.chart.no-config.title') | async }}\n        </h4>\n        <p class=\"__no-config-description\">\n          {{ t('@report-management:features.report-viewer.chart.no-config.description') | async }}\n        </p>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".axp-report-chart-view{display:flex;height:100%;width:100%;flex-direction:column}.axp-report-chart-view .__loading{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem}.axp-report-chart-view .__loading .__loading-text{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__chart-container{display:flex;height:100%;width:100%;flex-direction:column}.axp-report-chart-view .__chart-container .__chart-header{border-bottom-width:1px;--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));padding:1rem}.axp-report-chart-view .__chart-container .__chart-header .__chart-title{margin:0;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-report-chart-view .__chart-container .__chart-header .__chart-date{margin-top:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__chart-container .__chart-body{flex:1 1 0%;overflow:hidden}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;text-align:center}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-icon{font-size:3.75rem;line-height:1;color:rgba(var(--ax-sys-color-primary-500),.2)}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-content{max-width:28rem}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-content .__placeholder-title{margin-bottom:.5rem;font-size:1.25rem;line-height:1.75rem;font-weight:600}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-content .__placeholder-description{margin-bottom:1rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__chart-container .__chart-body .__chart-content{height:100%;width:100%}.axp-report-chart-view .__chart-container .__chart-footer{border-top-width:1px;--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));padding:1rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__error{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center}.axp-report-chart-view .__error .__error-icon{font-size:2.25rem;line-height:2.5rem;--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__error .__error-content{max-width:28rem}.axp-report-chart-view .__error .__error-content .__error-title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600;--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__error .__error-content .__error-description{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__no-config{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center}.axp-report-chart-view .__no-config .__no-config-icon{font-size:2.25rem;line-height:2.5rem;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__no-config .__no-config-content{max-width:28rem}.axp-report-chart-view .__no-config .__no-config-content .__no-config-title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-report-chart-view .__no-config .__no-config-content .__no-config-description{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i1$3.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXPLayoutBuilderModule }, { kind: "component", type: AXDonutChartComponent, selector: "ax-donut-chart", inputs: ["data", "options"], outputs: ["segmentClick", "segmentHover"] }, { kind: "component", type: AXChartLegendComponent, selector: "ax-chart-legend", inputs: ["chart", "options"], outputs: ["itemClick", "itemMouseEnter", "itemMouseLeave"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPReportChartViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-report-chart-view', standalone: true, imports: [
+                        CommonModule,
+                        AXDecoratorModule,
+                        AXTranslationModule,
+                        AXPLayoutBuilderModule,
+                        AXDonutChartComponent,
+                        AXChartLegendComponent
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"axp-report-chart-view\" *translate=\"let t\">\n  @if (vm.status() === AXPPageStatus.Processing) {\n    <!-- Loading State -->\n    <div class=\"__loading\">\n      <div\n        class=\"ax-spinner ax-spin ax-border-4 ax-border-gray-200 ax-border-t-primary ax-rounded-full ax-w-12 ax-h-12\"\n      ></div>\n      <div class=\"__loading-text\">\n        {{ t('@report-management:features.report-viewer.loading.chart') | async }}\n      </div>\n    </div>\n  } @else if (vm.status() === AXPPageStatus.Error) {\n    <!-- Error State -->\n    <div class=\"__error\">\n      <div class=\"__error-icon\">\n        <i class=\"fa-light fa-exclamation-triangle\"></i>\n      </div>\n      <div class=\"__error-content\">\n        <h4 class=\"__error-title\">\n          {{ t('@report-management:features.report-viewer.error.title') | async }}\n        </h4>\n        <p class=\"__error-description\">\n          {{ vm.error() || t('@report-management:features.report-viewer.error.generic') | async }}\n        </p>\n      </div>\n    </div>\n  } @else if (isChartReady()) {\n    <!-- Chart Content -->\n    <div class=\"__chart-container\">\n      @if (chartLayout()?.header) {\n        <div class=\"__chart-header\">\n          <h3 class=\"__chart-title\">{{ chartLayout()?.header?.title }}</h3>\n          @if (chartLayout()?.header?.showDate) {\n            <div class=\"__chart-date\">{{ 'common.date.today' | translate | async }}</div>\n          }\n        </div>\n      }\n\n      <div class=\"__chart-body\">\n        <!-- Chart component will be rendered here -->\n        <div class=\"__chart-placeholder\">\n          <div class=\"__placeholder-content\">\n            <div\n              class=\"ax-flex ax-flex-wrap ax-items-center ax-justify-center ax-gap-10\"\n              [class]=\"legendOptions().mode === 'horizontal' ? 'ax-flex-col' : 'ax-flex-row'\"\n            >\n              <!-- Chart Area -->\n              <div class=\"ax-flex-0 ax-size-96\">\n                <ax-donut-chart #chart [data]=\"donutChartData()\" [options]=\"donutChartOptions()\"></ax-donut-chart>\n              </div>\n              <!-- Legend Area -->\n              @if (donutChartData().length > 0) {\n                <div>\n                  <ax-chart-legend [options]=\"legendOptions()\" [chart]=\"chart\"></ax-chart-legend>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n      </div>\n\n      @if (chartLayout()?.footer) {\n        <div class=\"__chart-footer\">\n          @if (chartLayout()?.footer?.customHtml) {\n            <div [innerHTML]=\"chartLayout()?.footer?.customHtml\"></div>\n          }\n        </div>\n      }\n    </div>\n  } @else {\n    <!-- No Configuration State -->\n    <div class=\"__no-config\">\n      <div class=\"__no-config-icon\">\n        <i class=\"fa-light fa-chart-line\"></i>\n      </div>\n      <div class=\"__no-config-content\">\n        <h4 class=\"__no-config-title\">\n          {{ t('@report-management:features.report-viewer.chart.no-config.title') | async }}\n        </h4>\n        <p class=\"__no-config-description\">\n          {{ t('@report-management:features.report-viewer.chart.no-config.description') | async }}\n        </p>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".axp-report-chart-view{display:flex;height:100%;width:100%;flex-direction:column}.axp-report-chart-view .__loading{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem}.axp-report-chart-view .__loading .__loading-text{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__chart-container{display:flex;height:100%;width:100%;flex-direction:column}.axp-report-chart-view .__chart-container .__chart-header{border-bottom-width:1px;--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));padding:1rem}.axp-report-chart-view .__chart-container .__chart-header .__chart-title{margin:0;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-report-chart-view .__chart-container .__chart-header .__chart-date{margin-top:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__chart-container .__chart-body{flex:1 1 0%;overflow:hidden}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;text-align:center}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-icon{font-size:3.75rem;line-height:1;color:rgba(var(--ax-sys-color-primary-500),.2)}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-content{max-width:28rem}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-content .__placeholder-title{margin-bottom:.5rem;font-size:1.25rem;line-height:1.75rem;font-weight:600}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-content .__placeholder-description{margin-bottom:1rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__chart-container .__chart-body .__chart-content{height:100%;width:100%}.axp-report-chart-view .__chart-container .__chart-footer{border-top-width:1px;--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));padding:1rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__error{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center}.axp-report-chart-view .__error .__error-icon{font-size:2.25rem;line-height:2.5rem;--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__error .__error-content{max-width:28rem}.axp-report-chart-view .__error .__error-content .__error-title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600;--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__error .__error-content .__error-description{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__no-config{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center}.axp-report-chart-view .__no-config .__no-config-icon{font-size:2.25rem;line-height:2.5rem;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__no-config .__no-config-content{max-width:28rem}.axp-report-chart-view .__no-config .__no-config-content .__no-config-title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-report-chart-view .__no-config .__no-config-content .__no-config-description{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}\n"] }]
         }] });
 
 class AXPReportViewerPageComponent extends AXPPageLayoutBaseComponent {
@@ -1446,11 +1691,11 @@ class AXPReportViewerPageComponent extends AXPPageLayoutBaseComponent {
         this.unsubscriber = inject(AXUnsubscriber);
         //#endregion
         //#region ----   Inputs   ----
-        this.reportId = input();
-        this.reportParameters = input({});
+        this.reportId = input(...(ngDevMode ? [undefined, { debugName: "reportId" }] : []));
+        this.reportParameters = input({}, ...(ngDevMode ? [{ debugName: "reportParameters" }] : []));
         //#endregion
         //#region ----   ViewChildren   ----
-        this.filtersForm = viewChild('filtersForm');
+        this.filtersForm = viewChild('filtersForm', ...(ngDevMode ? [{ debugName: "filtersForm" }] : []));
         //#endregion
         //#region ----   ViewModel   ----
         this.vm = inject(AXPReportViewerViewModel);
@@ -1489,13 +1734,6 @@ class AXPReportViewerPageComponent extends AXPPageLayoutBaseComponent {
                 await this.loadReportAndRefresh(reportId);
             }
         });
-        // Initial load if reportId is available
-        const reportId = this.route.snapshot.paramMap.get('reportId') ||
-            this.route.snapshot.queryParamMap.get('reportId') ||
-            this.reportId();
-        if (reportId) {
-            await this.loadReportAndRefresh(reportId);
-        }
     }
     //#endregion
     //#region ----   Helper Methods   ----
@@ -1544,14 +1782,6 @@ class AXPReportViewerPageComponent extends AXPPageLayoutBaseComponent {
             form.resetErrors();
         }
     }
-    handleRowClick(rowData) {
-        // Handle row click - can be extended for row details
-        console.log('Row clicked:', rowData);
-    }
-    handleActionClick(event) {
-        // Handle action click - can be extended for row actions
-        console.log('Action clicked:', event);
-    }
     //#endregion
     //#region ----   Page Configuration Overrides   ----
     async getPageBreadcrumbs() {
@@ -1692,19 +1922,19 @@ class AXPReportViewerPageComponent extends AXPPageLayoutBaseComponent {
                 break;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPReportViewerPageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: AXPReportViewerPageComponent, isStandalone: true, selector: "axp-report-viewer-page", inputs: { reportId: { classPropertyName: "reportId", publicName: "reportId", isSignal: true, isRequired: false, transformFunction: null }, reportParameters: { classPropertyName: "reportParameters", publicName: "reportParameters", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "axp-report-viewer-page" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPReportViewerPageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: AXPReportViewerPageComponent, isStandalone: true, selector: "axp-report-viewer-page", inputs: { reportId: { classPropertyName: "reportId", publicName: "reportId", isSignal: true, isRequired: false, transformFunction: null }, reportParameters: { classPropertyName: "reportParameters", publicName: "reportParameters", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "axp-report-viewer-page" }, providers: [
             AXUnsubscriber,
             AXPReportViewerViewModel,
             {
                 provide: AXPPageLayoutBase,
                 useExisting: AXPReportViewerPageComponent,
             },
-        ], viewQueries: [{ propertyName: "filtersForm", first: true, predicate: ["filtersForm"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n  <!-- Left Panel: Filters (Always visible for desktop) -->\n  @if (showFiltersPanel()) {\n    <axp-layout-start-side>\n      <axp-layout-header>\n        <axp-layout-title>\n          {{ t('@report-management:features.report-viewer.filters.title') | async }}\n        </axp-layout-title>\n      </axp-layout-header>\n      <axp-layout-content>\n        <div class=\"__filters-container\">\n          <axp-dynamic-form\n            #filtersForm\n            [formDefinition]=\"vm.formDefinition()\"\n            [context]=\"vm.filterContext()\"\n            [layoutConfig]=\"defaultLayout()\"\n            [layoutStyle]=\"'compact'\"\n            (contextChange)=\"handleFiltersChange($event)\"\n            (contextInitiated)=\"handleFiltersInitiated($event)\"\n          >\n          </axp-dynamic-form>\n        </div>\n      </axp-layout-content>\n      <axp-layout-footer class=\"ax-p-4 ax-border-t\">\n        <ax-button\n          [class.ax-sm]=\"layoutService.isSmall()\"\n          class=\"ax-w-full\"\n          [text]=\"t('@report-management:features.report-viewer.actions.execute') | async\"\n          [color]=\"'primary'\"\n          (onClick)=\"execute({ name: 'execute-report' })\"\n        >\n          <ax-prefix>\n            <ax-icon class=\"fa-light fa-play\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </axp-layout-footer>\n    </axp-layout-start-side>\n  }\n  <!-- Main Content: Report Display -->\n  <axp-page-content>\n    @if (!vm.reportDefinition()) {\n      <ng-container *ngTemplateOutlet=\"noReport\"></ng-container>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"reportDisplay\"></ng-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n\n<!-- Report Display Area -->\n<ng-template #reportDisplay>\n  @if (vm.isTableLayout()) {\n    <axp-report-table-view (rowClick)=\"handleRowClick($event)\" (actionClick)=\"handleActionClick($event)\">\n    </axp-report-table-view>\n  } @else if (vm.isChartLayout()) {\n    <!-- Chart View Placeholder -->\n    <div class=\"__chart-placeholder\">\n      <div class=\"__placeholder-icon\">\n        <ax-icon class=\"fa-light fa-chart-column\"></ax-icon>\n      </div>\n      <div class=\"__placeholder-content\">\n        <h4 class=\"__placeholder-title\">Chart View</h4>\n        <p class=\"__placeholder-description\">Chart visualization will be implemented here</p>\n      </div>\n    </div>\n  } @else {\n    <!-- Custom Layout Placeholder -->\n    <div class=\"__custom-placeholder\">\n      <div class=\"__placeholder-icon\">\n        <ax-icon class=\"fa-light fa-layout-grid\"></ax-icon>\n      </div>\n      <div class=\"__placeholder-content\">\n        <h4 class=\"__placeholder-title\">Custom Layout</h4>\n        <p class=\"__placeholder-description\">Custom report layout will be implemented here</p>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<!-- No Report Selected State -->\n<ng-template #noReport>\n  <div class=\"__no-report\" *translate=\"let t\">\n    <div class=\"__no-report-icon\">\n      <ax-icon class=\"fa-light fa-chart-line\"></ax-icon>\n    </div>\n    <div class=\"__no-report-content\">\n      <h3 class=\"__no-report-title\">\n        {{ t('@report-management:features.report-viewer.no-report.title') | async }}\n      </h3>\n      <p class=\"__no-report-description\">\n        {{ t('@report-management:features.report-viewer.no-report.description') | async }}\n      </p>\n      <div class=\"__no-report-actions\">\n        <ax-button\n          look=\"outline\"\n          color=\"primary\"\n          [text]=\"t('@report-management:features.report-viewer.no-report.browse-reports') | async\"\n        >\n          <ax-prefix>\n            <ax-icon class=\"fa-light fa-folder-open\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".axp-report-viewer-page{display:flex;height:100%;width:100%;flex-direction:column}.axp-report-viewer-page axp-layout-container{overflow:hidden}.axp-report-viewer-page axp-layout-start-side{height:100%;width:20rem;border-inline-end-width:1px;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}@media (min-width: 1920px){.axp-report-viewer-page axp-layout-start-side{width:24rem}}.axp-report-viewer-page axp-layout-start-side>axp-layout-header{height:73px;border-bottom-width:1px}.axp-report-viewer-page axp-layout-start-side axp-layout-content{overflow-x:auto;padding:.5rem}.axp-report-viewer-page axp-layout-start-side axp-layout-content .__filters-container axp-layout-sections{gap:0px!important}.axp-report-viewer-page axp-layout-start-side axp-layout-content .__filters-container axp-layout-sections axp-layout-section{border-style:none!important;padding:0!important;--tw-shadow: 0 0 #0000 !important;--tw-shadow-colored: 0 0 #0000 !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}.axp-report-viewer-page .__mobile-filters{flex-shrink:0;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));padding:1rem;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-report-viewer-page axp-page-content{display:flex;height:100%;flex-direction:column}.axp-report-viewer-page .__no-report{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center}.axp-report-viewer-page .__no-report .__no-report-icon{margin-bottom:1rem;font-size:3.75rem;line-height:1;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-500),var(--tw-text-opacity, 1));opacity:.5}.axp-report-viewer-page .__no-report .__no-report-content{max-width:28rem}.axp-report-viewer-page .__no-report .__no-report-content .__no-report-title{margin-bottom:.5rem;font-size:1.25rem;line-height:1.75rem;font-weight:600}.axp-report-viewer-page .__no-report .__no-report-content .__no-report-description{margin-bottom:1.5rem;font-size:.875rem;line-height:1.25rem;opacity:.75}.axp-report-viewer-page .__no-report .__no-report-content .__no-report-actions{display:flex;justify-content:center}.axp-report-viewer-page axp-report-table-view{flex:1 1 0%;overflow:hidden}.axp-report-viewer-page .__chart-placeholder,.axp-report-viewer-page .__cards-placeholder,.axp-report-viewer-page .__custom-placeholder{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center;margin:1.5rem;border-radius:.5rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-report-viewer-page .__chart-placeholder .__placeholder-icon,.axp-report-viewer-page .__cards-placeholder .__placeholder-icon,.axp-report-viewer-page .__custom-placeholder .__placeholder-icon{margin-bottom:1rem;font-size:3rem;line-height:1;opacity:.5}.axp-report-viewer-page .__chart-placeholder .__placeholder-content,.axp-report-viewer-page .__cards-placeholder .__placeholder-content,.axp-report-viewer-page .__custom-placeholder .__placeholder-content{max-width:28rem}.axp-report-viewer-page .__chart-placeholder .__placeholder-content .__placeholder-title,.axp-report-viewer-page .__cards-placeholder .__placeholder-content .__placeholder-title,.axp-report-viewer-page .__custom-placeholder .__placeholder-content .__placeholder-title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-report-viewer-page .__chart-placeholder .__placeholder-content .__placeholder-description,.axp-report-viewer-page .__cards-placeholder .__placeholder-content .__placeholder-description,.axp-report-viewer-page .__custom-placeholder .__placeholder-content .__placeholder-description{font-size:.875rem;line-height:1.25rem;opacity:.75}.axp-report-viewer-page .__chart-placeholder .__placeholder-icon{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-500),var(--tw-text-opacity, 1))}.axp-report-viewer-page .__cards-placeholder .__placeholder-icon{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-secondary-500),var(--tw-text-opacity, 1))}.axp-report-viewer-page .__custom-placeholder .__placeholder-icon{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent1-500),var(--tw-text-opacity, 1))}@media (max-width: 768px){.axp-report-viewer-page .__chart-placeholder,.axp-report-viewer-page .__cards-placeholder,.axp-report-viewer-page .__custom-placeholder{margin:1rem}.axp-report-viewer-page .__chart-placeholder .__placeholder-content .__placeholder-title,.axp-report-viewer-page .__cards-placeholder .__placeholder-content .__placeholder-title,.axp-report-viewer-page .__custom-placeholder .__placeholder-content .__placeholder-title{font-size:1rem;line-height:1.5rem}.axp-report-viewer-page .__chart-placeholder .__placeholder-content .__placeholder-description,.axp-report-viewer-page .__cards-placeholder .__placeholder-content .__placeholder-description,.axp-report-viewer-page .__custom-placeholder .__placeholder-content .__placeholder-description{font-size:.75rem;line-height:1rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i4.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i4.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i5.AXTranslatorDirective, selector: "[translate]" }, { kind: "component", type: 
+        ], viewQueries: [{ propertyName: "filtersForm", first: true, predicate: ["filtersForm"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n  <!-- Left Panel: Filters (Always visible for desktop) -->\n  @if (showFiltersPanel()) {\n    <axp-layout-start-side>\n      <axp-layout-header>\n        <axp-layout-title>\n          {{ t('@report-management:features.report-viewer.filters.title') | async }}\n        </axp-layout-title>\n      </axp-layout-header>\n      <axp-layout-content>\n        <div class=\"__filters-container\">\n          <axp-dynamic-form\n            #filtersForm\n            [formDefinition]=\"vm.formDefinition()\"\n            [context]=\"vm.filterContext()\"\n            [layoutConfig]=\"defaultLayout()\"\n            [layoutStyle]=\"'compact'\"\n            (contextChange)=\"handleFiltersChange($event)\"\n            (contextInitiated)=\"handleFiltersInitiated($event)\"\n          >\n          </axp-dynamic-form>\n        </div>\n      </axp-layout-content>\n      <axp-layout-footer class=\"ax-p-4 ax-border-t\">\n        <ax-button\n          [class.ax-sm]=\"layoutService.isSmall()\"\n          class=\"ax-w-full\"\n          [text]=\"t('@report-management:features.report-viewer.actions.execute') | async\"\n          [color]=\"'primary'\"\n          (onClick)=\"execute({ name: 'execute-report' })\"\n        >\n          <ax-prefix>\n            <ax-icon class=\"fa-light fa-play\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </axp-layout-footer>\n    </axp-layout-start-side>\n  }\n\n  <axp-page-toolbar>\n    <axp-layout-prefix>\n      @if (vm.hasMultipleLayouts()) {\n        <ax-button [text]=\"vm.currentLayout()?.title\">\n          <ax-icon icon=\"fa-light {{ vm.currentLayout()?.icon }}\"></ax-icon>\n          <ax-dropdown-panel>\n            @for (layout of vm.availableLayouts(); track layout.id) {\n              <ax-button-item-list>\n                <ax-button-item\n                  [text]=\"layout.title\"\n                  [selected]=\"vm.currentLayout()?.id === layout.id\"\n                  (onClick)=\"vm.switchLayout(layout.id)\"\n                >\n                  <ax-icon icon=\"fa-light {{ layout.icon }}\"></ax-icon>\n                </ax-button-item>\n              </ax-button-item-list>\n            }\n          </ax-dropdown-panel>\n        </ax-button>\n      }\n    </axp-layout-prefix>\n    <axp-layout-suffix> </axp-layout-suffix>\n  </axp-page-toolbar>\n\n  <!-- Main Content: Report Display -->\n  <axp-page-content>\n    @if (!vm.reportDefinition()) {\n      <ng-container *ngTemplateOutlet=\"noReport\"></ng-container>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"reportDisplay\"></ng-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n\n<!-- Report Display Area -->\n<ng-template #reportDisplay>\n  @if (vm.isTableLayout()) {\n    <axp-report-table-view> </axp-report-table-view>\n  } @else if (vm.isChartLayout()) {\n    <axp-report-chart-view> </axp-report-chart-view>\n  }\n</ng-template>\n\n<!-- No Report Selected State -->\n<ng-template #noReport>\n  <div class=\"__no-report\" *translate=\"let t\">\n    <div class=\"__no-report-icon\">\n      <ax-icon class=\"fa-light fa-chart-line\"></ax-icon>\n    </div>\n    <div class=\"__no-report-content\">\n      <h3 class=\"__no-report-title\">\n        {{ t('@report-management:features.report-viewer.no-report.title') | async }}\n      </h3>\n      <p class=\"__no-report-description\">\n        {{ t('@report-management:features.report-viewer.no-report.description') | async }}\n      </p>\n      <div class=\"__no-report-actions\">\n        <ax-button\n          look=\"outline\"\n          color=\"primary\"\n          [text]=\"t('@report-management:features.report-viewer.no-report.browse-reports') | async\"\n        >\n          <ax-prefix>\n            <ax-icon class=\"fa-light fa-folder-open\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".axp-report-viewer-page{display:flex;height:100%;width:100%;flex-direction:column}.axp-report-viewer-page axp-layout-start-side{height:100%;width:20rem;border-inline-end-width:1px;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}@media (min-width: 1920px){.axp-report-viewer-page axp-layout-start-side{width:24rem}}.axp-report-viewer-page axp-layout-start-side>axp-layout-header{height:73px;border-bottom-width:1px}.axp-report-viewer-page axp-layout-start-side axp-layout-content{overflow-x:auto;padding:.5rem}.axp-report-viewer-page axp-layout-start-side axp-layout-content .__filters-container axp-layout-sections{gap:0px!important}.axp-report-viewer-page axp-layout-start-side axp-layout-content .__filters-container axp-layout-sections axp-layout-section{border-style:none!important;padding:0!important;--tw-shadow: 0 0 #0000 !important;--tw-shadow-colored: 0 0 #0000 !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}.axp-report-viewer-page .__mobile-filters{flex-shrink:0;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));padding:1rem;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-report-viewer-page axp-page-content{display:flex;height:100%;flex-direction:column}.axp-report-viewer-page .__no-report{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center}.axp-report-viewer-page .__no-report .__no-report-icon{margin-bottom:1rem;font-size:3.75rem;line-height:1;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-500),var(--tw-text-opacity, 1));opacity:.5}.axp-report-viewer-page .__no-report .__no-report-content{max-width:28rem}.axp-report-viewer-page .__no-report .__no-report-content .__no-report-title{margin-bottom:.5rem;font-size:1.25rem;line-height:1.75rem;font-weight:600}.axp-report-viewer-page .__no-report .__no-report-content .__no-report-description{margin-bottom:1.5rem;font-size:.875rem;line-height:1.25rem;opacity:.75}.axp-report-viewer-page .__no-report .__no-report-content .__no-report-actions{display:flex;justify-content:center}.axp-report-viewer-page axp-report-table-view{flex:1 1 0%;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i2$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i1$3.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: 
                 // 
-                AXPDynamicFormComponent, selector: "axp-dynamic-form", inputs: ["formDefinition", "context", "layoutStyle", "layoutConfig"], outputs: ["contextChange", "contextInitiated", "validityChange"] }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPThemeLayoutStartSideComponent, selector: "axp-layout-page-start-side, axp-layout-start-side" }, { kind: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "component", type: AXPReportTableViewComponent, selector: "axp-report-table-view", outputs: ["rowClick", "actionClick"] }, { kind: "component", type: AXPThemeLayoutFooterComponent, selector: "axp-layout-footer, axp-layout-page-footer" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+                AXPDynamicFormComponent, selector: "axp-dynamic-form", inputs: ["formDefinition", "context", "layoutStyle", "layoutConfig"], outputs: ["contextChange", "contextInitiated", "validityChange"] }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPThemeLayoutStartSideComponent, selector: "axp-layout-page-start-side, axp-layout-start-side" }, { kind: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "component", type: AXPReportTableViewComponent, selector: "axp-report-table-view" }, { kind: "component", type: AXPReportChartViewComponent, selector: "axp-report-chart-view" }, { kind: "component", type: AXPThemeLayoutFooterComponent, selector: "axp-layout-footer, axp-layout-page-footer" }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPReportViewerPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPReportViewerPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-report-viewer-page', standalone: true, imports: [
                         CommonModule,
@@ -1712,6 +1942,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                         AXDecoratorModule,
                         AXLoadingModule,
                         AXTranslationModule,
+                        AXDropdownButtonModule,
+                        AXDropdownModule,
                         // 
                         AXPDynamicFormComponent,
                         AXPPageLayoutComponent,
@@ -1719,6 +1951,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                         AXPThemeLayoutHeaderComponent,
                         AXPThemeLayoutBlockComponent,
                         AXPReportTableViewComponent,
+                        AXPReportChartViewComponent,
                         AXPThemeLayoutFooterComponent
                     ], providers: [
                         AXUnsubscriber,
@@ -1727,7 +1960,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                             provide: AXPPageLayoutBase,
                             useExisting: AXPReportViewerPageComponent,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'axp-report-viewer-page' }, template: "<axp-page-layout *translate=\"let t\">\n  <!-- Left Panel: Filters (Always visible for desktop) -->\n  @if (showFiltersPanel()) {\n    <axp-layout-start-side>\n      <axp-layout-header>\n        <axp-layout-title>\n          {{ t('@report-management:features.report-viewer.filters.title') | async }}\n        </axp-layout-title>\n      </axp-layout-header>\n      <axp-layout-content>\n        <div class=\"__filters-container\">\n          <axp-dynamic-form\n            #filtersForm\n            [formDefinition]=\"vm.formDefinition()\"\n            [context]=\"vm.filterContext()\"\n            [layoutConfig]=\"defaultLayout()\"\n            [layoutStyle]=\"'compact'\"\n            (contextChange)=\"handleFiltersChange($event)\"\n            (contextInitiated)=\"handleFiltersInitiated($event)\"\n          >\n          </axp-dynamic-form>\n        </div>\n      </axp-layout-content>\n      <axp-layout-footer class=\"ax-p-4 ax-border-t\">\n        <ax-button\n          [class.ax-sm]=\"layoutService.isSmall()\"\n          class=\"ax-w-full\"\n          [text]=\"t('@report-management:features.report-viewer.actions.execute') | async\"\n          [color]=\"'primary'\"\n          (onClick)=\"execute({ name: 'execute-report' })\"\n        >\n          <ax-prefix>\n            <ax-icon class=\"fa-light fa-play\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </axp-layout-footer>\n    </axp-layout-start-side>\n  }\n  <!-- Main Content: Report Display -->\n  <axp-page-content>\n    @if (!vm.reportDefinition()) {\n      <ng-container *ngTemplateOutlet=\"noReport\"></ng-container>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"reportDisplay\"></ng-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n\n<!-- Report Display Area -->\n<ng-template #reportDisplay>\n  @if (vm.isTableLayout()) {\n    <axp-report-table-view (rowClick)=\"handleRowClick($event)\" (actionClick)=\"handleActionClick($event)\">\n    </axp-report-table-view>\n  } @else if (vm.isChartLayout()) {\n    <!-- Chart View Placeholder -->\n    <div class=\"__chart-placeholder\">\n      <div class=\"__placeholder-icon\">\n        <ax-icon class=\"fa-light fa-chart-column\"></ax-icon>\n      </div>\n      <div class=\"__placeholder-content\">\n        <h4 class=\"__placeholder-title\">Chart View</h4>\n        <p class=\"__placeholder-description\">Chart visualization will be implemented here</p>\n      </div>\n    </div>\n  } @else {\n    <!-- Custom Layout Placeholder -->\n    <div class=\"__custom-placeholder\">\n      <div class=\"__placeholder-icon\">\n        <ax-icon class=\"fa-light fa-layout-grid\"></ax-icon>\n      </div>\n      <div class=\"__placeholder-content\">\n        <h4 class=\"__placeholder-title\">Custom Layout</h4>\n        <p class=\"__placeholder-description\">Custom report layout will be implemented here</p>\n      </div>\n    </div>\n  }\n</ng-template>\n\n<!-- No Report Selected State -->\n<ng-template #noReport>\n  <div class=\"__no-report\" *translate=\"let t\">\n    <div class=\"__no-report-icon\">\n      <ax-icon class=\"fa-light fa-chart-line\"></ax-icon>\n    </div>\n    <div class=\"__no-report-content\">\n      <h3 class=\"__no-report-title\">\n        {{ t('@report-management:features.report-viewer.no-report.title') | async }}\n      </h3>\n      <p class=\"__no-report-description\">\n        {{ t('@report-management:features.report-viewer.no-report.description') | async }}\n      </p>\n      <div class=\"__no-report-actions\">\n        <ax-button\n          look=\"outline\"\n          color=\"primary\"\n          [text]=\"t('@report-management:features.report-viewer.no-report.browse-reports') | async\"\n        >\n          <ax-prefix>\n            <ax-icon class=\"fa-light fa-folder-open\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".axp-report-viewer-page{display:flex;height:100%;width:100%;flex-direction:column}.axp-report-viewer-page axp-layout-container{overflow:hidden}.axp-report-viewer-page axp-layout-start-side{height:100%;width:20rem;border-inline-end-width:1px;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}@media (min-width: 1920px){.axp-report-viewer-page axp-layout-start-side{width:24rem}}.axp-report-viewer-page axp-layout-start-side>axp-layout-header{height:73px;border-bottom-width:1px}.axp-report-viewer-page axp-layout-start-side axp-layout-content{overflow-x:auto;padding:.5rem}.axp-report-viewer-page axp-layout-start-side axp-layout-content .__filters-container axp-layout-sections{gap:0px!important}.axp-report-viewer-page axp-layout-start-side axp-layout-content .__filters-container axp-layout-sections axp-layout-section{border-style:none!important;padding:0!important;--tw-shadow: 0 0 #0000 !important;--tw-shadow-colored: 0 0 #0000 !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}.axp-report-viewer-page .__mobile-filters{flex-shrink:0;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));padding:1rem;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-report-viewer-page axp-page-content{display:flex;height:100%;flex-direction:column}.axp-report-viewer-page .__no-report{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center}.axp-report-viewer-page .__no-report .__no-report-icon{margin-bottom:1rem;font-size:3.75rem;line-height:1;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-500),var(--tw-text-opacity, 1));opacity:.5}.axp-report-viewer-page .__no-report .__no-report-content{max-width:28rem}.axp-report-viewer-page .__no-report .__no-report-content .__no-report-title{margin-bottom:.5rem;font-size:1.25rem;line-height:1.75rem;font-weight:600}.axp-report-viewer-page .__no-report .__no-report-content .__no-report-description{margin-bottom:1.5rem;font-size:.875rem;line-height:1.25rem;opacity:.75}.axp-report-viewer-page .__no-report .__no-report-content .__no-report-actions{display:flex;justify-content:center}.axp-report-viewer-page axp-report-table-view{flex:1 1 0%;overflow:hidden}.axp-report-viewer-page .__chart-placeholder,.axp-report-viewer-page .__cards-placeholder,.axp-report-viewer-page .__custom-placeholder{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center;margin:1.5rem;border-radius:.5rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-report-viewer-page .__chart-placeholder .__placeholder-icon,.axp-report-viewer-page .__cards-placeholder .__placeholder-icon,.axp-report-viewer-page .__custom-placeholder .__placeholder-icon{margin-bottom:1rem;font-size:3rem;line-height:1;opacity:.5}.axp-report-viewer-page .__chart-placeholder .__placeholder-content,.axp-report-viewer-page .__cards-placeholder .__placeholder-content,.axp-report-viewer-page .__custom-placeholder .__placeholder-content{max-width:28rem}.axp-report-viewer-page .__chart-placeholder .__placeholder-content .__placeholder-title,.axp-report-viewer-page .__cards-placeholder .__placeholder-content .__placeholder-title,.axp-report-viewer-page .__custom-placeholder .__placeholder-content .__placeholder-title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-report-viewer-page .__chart-placeholder .__placeholder-content .__placeholder-description,.axp-report-viewer-page .__cards-placeholder .__placeholder-content .__placeholder-description,.axp-report-viewer-page .__custom-placeholder .__placeholder-content .__placeholder-description{font-size:.875rem;line-height:1.25rem;opacity:.75}.axp-report-viewer-page .__chart-placeholder .__placeholder-icon{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-500),var(--tw-text-opacity, 1))}.axp-report-viewer-page .__cards-placeholder .__placeholder-icon{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-secondary-500),var(--tw-text-opacity, 1))}.axp-report-viewer-page .__custom-placeholder .__placeholder-icon{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent1-500),var(--tw-text-opacity, 1))}@media (max-width: 768px){.axp-report-viewer-page .__chart-placeholder,.axp-report-viewer-page .__cards-placeholder,.axp-report-viewer-page .__custom-placeholder{margin:1rem}.axp-report-viewer-page .__chart-placeholder .__placeholder-content .__placeholder-title,.axp-report-viewer-page .__cards-placeholder .__placeholder-content .__placeholder-title,.axp-report-viewer-page .__custom-placeholder .__placeholder-content .__placeholder-title{font-size:1rem;line-height:1.5rem}.axp-report-viewer-page .__chart-placeholder .__placeholder-content .__placeholder-description,.axp-report-viewer-page .__cards-placeholder .__placeholder-content .__placeholder-description,.axp-report-viewer-page .__custom-placeholder .__placeholder-content .__placeholder-description{font-size:.75rem;line-height:1rem}}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'axp-report-viewer-page' }, template: "<axp-page-layout *translate=\"let t\">\n  <!-- Left Panel: Filters (Always visible for desktop) -->\n  @if (showFiltersPanel()) {\n    <axp-layout-start-side>\n      <axp-layout-header>\n        <axp-layout-title>\n          {{ t('@report-management:features.report-viewer.filters.title') | async }}\n        </axp-layout-title>\n      </axp-layout-header>\n      <axp-layout-content>\n        <div class=\"__filters-container\">\n          <axp-dynamic-form\n            #filtersForm\n            [formDefinition]=\"vm.formDefinition()\"\n            [context]=\"vm.filterContext()\"\n            [layoutConfig]=\"defaultLayout()\"\n            [layoutStyle]=\"'compact'\"\n            (contextChange)=\"handleFiltersChange($event)\"\n            (contextInitiated)=\"handleFiltersInitiated($event)\"\n          >\n          </axp-dynamic-form>\n        </div>\n      </axp-layout-content>\n      <axp-layout-footer class=\"ax-p-4 ax-border-t\">\n        <ax-button\n          [class.ax-sm]=\"layoutService.isSmall()\"\n          class=\"ax-w-full\"\n          [text]=\"t('@report-management:features.report-viewer.actions.execute') | async\"\n          [color]=\"'primary'\"\n          (onClick)=\"execute({ name: 'execute-report' })\"\n        >\n          <ax-prefix>\n            <ax-icon class=\"fa-light fa-play\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </axp-layout-footer>\n    </axp-layout-start-side>\n  }\n\n  <axp-page-toolbar>\n    <axp-layout-prefix>\n      @if (vm.hasMultipleLayouts()) {\n        <ax-button [text]=\"vm.currentLayout()?.title\">\n          <ax-icon icon=\"fa-light {{ vm.currentLayout()?.icon }}\"></ax-icon>\n          <ax-dropdown-panel>\n            @for (layout of vm.availableLayouts(); track layout.id) {\n              <ax-button-item-list>\n                <ax-button-item\n                  [text]=\"layout.title\"\n                  [selected]=\"vm.currentLayout()?.id === layout.id\"\n                  (onClick)=\"vm.switchLayout(layout.id)\"\n                >\n                  <ax-icon icon=\"fa-light {{ layout.icon }}\"></ax-icon>\n                </ax-button-item>\n              </ax-button-item-list>\n            }\n          </ax-dropdown-panel>\n        </ax-button>\n      }\n    </axp-layout-prefix>\n    <axp-layout-suffix> </axp-layout-suffix>\n  </axp-page-toolbar>\n\n  <!-- Main Content: Report Display -->\n  <axp-page-content>\n    @if (!vm.reportDefinition()) {\n      <ng-container *ngTemplateOutlet=\"noReport\"></ng-container>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"reportDisplay\"></ng-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n\n<!-- Report Display Area -->\n<ng-template #reportDisplay>\n  @if (vm.isTableLayout()) {\n    <axp-report-table-view> </axp-report-table-view>\n  } @else if (vm.isChartLayout()) {\n    <axp-report-chart-view> </axp-report-chart-view>\n  }\n</ng-template>\n\n<!-- No Report Selected State -->\n<ng-template #noReport>\n  <div class=\"__no-report\" *translate=\"let t\">\n    <div class=\"__no-report-icon\">\n      <ax-icon class=\"fa-light fa-chart-line\"></ax-icon>\n    </div>\n    <div class=\"__no-report-content\">\n      <h3 class=\"__no-report-title\">\n        {{ t('@report-management:features.report-viewer.no-report.title') | async }}\n      </h3>\n      <p class=\"__no-report-description\">\n        {{ t('@report-management:features.report-viewer.no-report.description') | async }}\n      </p>\n      <div class=\"__no-report-actions\">\n        <ax-button\n          look=\"outline\"\n          color=\"primary\"\n          [text]=\"t('@report-management:features.report-viewer.no-report.browse-reports') | async\"\n        >\n          <ax-prefix>\n            <ax-icon class=\"fa-light fa-folder-open\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".axp-report-viewer-page{display:flex;height:100%;width:100%;flex-direction:column}.axp-report-viewer-page axp-layout-start-side{height:100%;width:20rem;border-inline-end-width:1px;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}@media (min-width: 1920px){.axp-report-viewer-page axp-layout-start-side{width:24rem}}.axp-report-viewer-page axp-layout-start-side>axp-layout-header{height:73px;border-bottom-width:1px}.axp-report-viewer-page axp-layout-start-side axp-layout-content{overflow-x:auto;padding:.5rem}.axp-report-viewer-page axp-layout-start-side axp-layout-content .__filters-container axp-layout-sections{gap:0px!important}.axp-report-viewer-page axp-layout-start-side axp-layout-content .__filters-container axp-layout-sections axp-layout-section{border-style:none!important;padding:0!important;--tw-shadow: 0 0 #0000 !important;--tw-shadow-colored: 0 0 #0000 !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}.axp-report-viewer-page .__mobile-filters{flex-shrink:0;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));padding:1rem;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-report-viewer-page axp-page-content{display:flex;height:100%;flex-direction:column}.axp-report-viewer-page .__no-report{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center}.axp-report-viewer-page .__no-report .__no-report-icon{margin-bottom:1rem;font-size:3.75rem;line-height:1;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-500),var(--tw-text-opacity, 1));opacity:.5}.axp-report-viewer-page .__no-report .__no-report-content{max-width:28rem}.axp-report-viewer-page .__no-report .__no-report-content .__no-report-title{margin-bottom:.5rem;font-size:1.25rem;line-height:1.75rem;font-weight:600}.axp-report-viewer-page .__no-report .__no-report-content .__no-report-description{margin-bottom:1.5rem;font-size:.875rem;line-height:1.25rem;opacity:.75}.axp-report-viewer-page .__no-report .__no-report-content .__no-report-actions{display:flex;justify-content:center}.axp-report-viewer-page axp-report-table-view{flex:1 1 0%;overflow:hidden}\n"] }]
         }] });
 
 var reportViewerPage_component = /*#__PURE__*/Object.freeze({
@@ -1739,5 +1972,5 @@ var reportViewerPage_component = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { AXMReportManagementModule, AXPReportTableViewComponent, AXPReportViewerPageComponent, AXPReportViewerViewModel, RootConfig };
+export { AXMReportManagementModule, AXPReportChartViewComponent, AXPReportTableViewComponent, AXPReportViewerPageComponent, AXPReportViewerViewModel, RootConfig };
 //# sourceMappingURL=acorex-modules-report-management.mjs.map