tin-spa 20.6.3 → 20.6.4

package/fesm2022/tin-spa.mjs

@@ -11,7 +11,7 @@ import { MatIconModule } from '@angular/material/icon';
 import * as i3 from '@angular/material/form-field';
 import { MatFormFieldModule, MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import { of, BehaviorSubject, Subject, tap, timeout, finalize, share, Observable, throwError, interval } from 'rxjs';
-import { mergeMap, filter, startWith, map, finalize as finalize$1, catchError, take, switchMap } from 'rxjs/operators';
+import { mergeMap, filter, startWith, map, catchError, finalize as finalize$1, take, switchMap } from 'rxjs/operators';
 import * as i2$1 from '@angular/material/snack-bar';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import * as i1$2 from '@angular/router';
@@ -1517,6 +1517,9 @@ class SignalRService {
     }
     // Changed: Single startConnection method handles both notification and entity change listeners
     startConnection(hubUrl, token) {
+        // Changed: Allow disabling real-time via localStorage flag (used by E2E tests)
+        if (localStorage.getItem('disableRealTime') === 'true')
+            return;
         if (this.hubConnection && this.hubConnection.state !== signalR.HubConnectionState.Disconnected)
             return;
         if (this.hubConnection)
@@ -1992,8 +1995,10 @@ class DataServiceLib {
         this.capAging = new CapItem; // Added: Capability for aging report
         this.capTaxRates = new CapItem; // Changed: Capability for tax rates management
         this.capStandingOrders = new CapItem; // Changed: Capability for standing orders management
-        this.capFixedAssets = new CapItem; // Added: Capability for fixed assets management
-        this.capFixedAssetCategories = new CapItem; // Added: Capability for fixed asset categories management
+        this.capFixedAssetsModule = new CapItem; // Changed: Top-level Fixed Assets module
+        this.capFixedAssetsDashboard = new CapItem; // Changed: Fixed Assets dashboard
+        this.capFixedAssets = new CapItem; // Changed: Asset Register (renamed from Fixed Assets)
+        this.capFixedAssetCategories = new CapItem; // Changed: Depreciation Categories
         this.capCurrencies = new CapItem; // Changed: Capability for currencies management
         this.capTransactionTypes = new CapItem;
         this.capTransactions = new CapItem;
@@ -2936,7 +2941,7 @@ class DataServiceLib {
         this.capAccounting.name = "cap27";
         this.capAccounting.display = "Accounting";
         this.capAccounting.icon = "account_balance";
-        this.capAccounting.capSubItems = [this.capAccountingDashboard, this.capAccounts, this.capTransactions, this.capAggregates, this.capReports, this.capTransactionTypes, this.capTaxRates, this.capCurrencies, this.capStandingOrders, this.capFixedAssets, this.capFixedAssetCategories]; // Changed: Added Dashboard and Currencies to Accounting submenu
+        this.capAccounting.capSubItems = [this.capAccountingDashboard, this.capAccounts, this.capTransactions, this.capAggregates, this.capReports, this.capTransactionTypes, this.capTaxRates, this.capCurrencies, this.capStandingOrders]; // Changed: Removed Fixed Assets — now own module
         this.capAccountingDashboard.name = "cap27"; // Changed: Reuses module cap number for dashboard visibility
         this.capAccountingDashboard.display = "Dashboard";
         this.capAccountingDashboard.link = "home/accounting/dashboard";
@@ -2966,13 +2971,22 @@ class DataServiceLib {
         this.capStandingOrders.display = "Standing Orders";
         this.capStandingOrders.link = "home/accounting/standing-orders";
         this.capStandingOrders.icon = "schedule";
-        this.capFixedAssets.name = "cap70"; // Added: Fixed assets capability
-        this.capFixedAssets.display = "Fixed Assets";
-        this.capFixedAssets.link = "home/accounting/fixed-assets";
+        // Changed: Fixed Assets is now its own top-level module
+        this.capFixedAssetsModule.name = "cap70";
+        this.capFixedAssetsModule.display = "Fixed Assets";
+        this.capFixedAssetsModule.icon = "precision_manufacturing";
+        this.capFixedAssetsModule.capSubItems = [this.capFixedAssetsDashboard, this.capFixedAssets, this.capFixedAssetCategories];
+        this.capFixedAssetsDashboard.name = "cap70"; // Reuses module cap number for dashboard visibility
+        this.capFixedAssetsDashboard.display = "Dashboard";
+        this.capFixedAssetsDashboard.link = "home/fixed-assets/dashboard";
+        this.capFixedAssetsDashboard.icon = "dashboard";
+        this.capFixedAssets.name = "cap70";
+        this.capFixedAssets.display = "Asset Register";
+        this.capFixedAssets.link = "home/fixed-assets/register"; // Changed: Updated route
         this.capFixedAssets.icon = "precision_manufacturing";
-        this.capFixedAssetCategories.name = "cap71"; // Added: Fixed asset categories capability
-        this.capFixedAssetCategories.display = "Asset Categories";
-        this.capFixedAssetCategories.link = "home/accounting/fixed-asset-categories";
+        this.capFixedAssetCategories.name = "cap71";
+        this.capFixedAssetCategories.display = "Depreciation Categories"; // Changed: Renamed from Categories
+        this.capFixedAssetCategories.link = "home/fixed-assets/depreciation-categories"; // Changed: Updated route
         this.capFixedAssetCategories.icon = "category";
         this.capTransactionTypes.name = "cap28";
         this.capTransactionTypes.display = "Transaction Types";
@@ -4618,153 +4632,7 @@ class AccountingService {
             ],
             loadAction: { url: 'accounts/aggregates/balancesheet' }
         };
-        //--------------------------Fixed Asset Categories-------------------------
-        // Category form config for create/edit dialog
-        this.categoryFormConfig = {
-            title: 'Asset Category',
-            includeAudit: true,
-            heroField: 'fixedAssetCategoryID',
-            fields: [
-                { name: 'name', type: 'text', required: true },
-                { name: 'description', type: 'text' },
-                { name: 'defaultDepreciationMethod', alias: 'Depreciation Method', type: 'select', required: true, loadAction: { url: 'fixedassetcategories/list/depreciation-methods' }, defaultValue: 0 },
-                { name: 'defaultUsefulLifeMonths', alias: 'Useful Life (Months)', type: 'number', required: true, defaultValue: 60 },
-                { name: 'defaultResidualValuePercent', alias: 'Residual Value %', type: 'number', required: true, defaultValue: 10 },
-            ],
-        };
-        this.categoryCreateButton = { name: 'create', display: 'Create Category', dialog: true, action: { url: 'fixedassetcategories?action=create', method: 'post' } };
-        this.categoryEditButton = { name: 'edit', display: 'Edit', icon: { name: 'edit' }, dialog: true, action: { url: 'fixedassetcategories?action=edit', method: 'post' } };
-        this.categoryDetailsConfig = {
-            formConfig: this.categoryFormConfig,
-            tableConfigs: [],
-            heroField: 'fixedAssetCategoryID',
-            buttons: [this.categoryCreateButton, this.categoryEditButton]
-        };
-        // Category table for listing all asset categories
-        this.categoryTableConfig = {
-            showFilter: true,
-            minColumns: ['name', 'defaultDepreciationMethodName', 'assetCount'],
-            columns: [
-                { name: 'name', type: 'button', detailsConfig: this.categoryDetailsConfig },
-                { name: 'defaultDepreciationMethodName', alias: 'Method', type: 'text' },
-                { name: 'defaultUsefulLifeMonths', alias: 'Useful Life (Mo)', type: 'number' },
-                { name: 'defaultResidualValuePercent', alias: 'Residual %', type: 'number' },
-                { name: 'assetCount', alias: 'Assets', type: 'number' },
-                { name: 'updatedByDetails', alias: 'Last Updated', type: 'text' },
-            ],
-            buttons: [
-                { name: 'create', display: 'Create Category', dialog: true, detailsConfig: this.categoryDetailsConfig, action: { url: 'fixedassetcategories?action=create', method: 'post' } }, // Changed: Added missing display text
-                { name: 'delete', display: 'Delete', icon: { name: 'delete', color: 'red' }, action: { url: 'fixedassetcategories?action=delete', method: 'post' }, confirm: { message: 'Delete this category?' } },
-            ],
-            loadAction: { url: 'fixedassetcategories/all/x' },
-            // realTime: true, // Disabled: testing realtime on transactions table only
-            entityName: 'FixedAssetCategory'
-        };
-        //--------------------------Fixed Assets-------------------------
-        // Fixed asset form config for create/edit dialog
-        this.assetFormConfig = {
-            title: 'Fixed Asset',
-            includeAudit: true,
-            heroField: 'fixedAssetID',
-            fields: [
-                { name: 'assetNumber', alias: 'Asset #', type: 'label', readonly: true, hideOnCreate: true },
-                { name: 'name', type: 'text', required: true },
-                { name: 'description', type: 'text' },
-                { name: 'fixedAssetCategoryID', alias: 'Category', type: 'select', required: true, loadAction: { url: 'fixedassetcategories/list/x' } },
-                { name: 'acquisitionDate', alias: 'Acquisition Date', type: 'date', required: true },
-                { name: 'acquisitionCost', alias: 'Cost', type: 'money', required: true },
-                { name: 'residualValue', alias: 'Residual Value', type: 'money', required: true, defaultValue: 0 },
-                { name: 'usefulLifeMonths', alias: 'Useful Life (Months)', type: 'number', required: true },
-                { name: 'depreciationMethod', alias: 'Depreciation Method', type: 'select', required: true, loadAction: { url: 'fixedassets/list/depreciation-methods' }, defaultValue: 0 },
-                { name: 'location', type: 'text' },
-                { name: 'serialNumber', alias: 'Serial Number', type: 'text' },
-                { name: 'assetTag', alias: 'Asset Tag', type: 'text' },
-                { name: 'statusName', alias: 'Status', type: 'label', readonly: true, hideOnCreate: true },
-                { name: 'netBookValueDisplay', alias: 'Net Book Value', type: 'label', readonly: true, hideOnCreate: true },
-                { name: 'accumulatedDepreciation', alias: 'Accum. Depreciation', type: 'label', readonly: true, hideOnCreate: true },
-            ],
-            loadAction: { url: 'fixedassets/id' },
-        };
-        // Depreciation entries nested table for asset details dialog
-        this.depreciationEntriesTableConfig = {
-            tabTitle: 'Depreciation History',
-            showFilter: false,
-            columns: [
-                { name: 'periodDate', alias: 'Period', type: 'date' },
-                { name: 'amountDisplay', alias: 'Amount', type: 'text' },
-                { name: 'accumulatedAmountDisplay', alias: 'Accumulated', type: 'text' },
-                { name: 'netBookValueDisplay', alias: 'NBV', type: 'text' },
-                { name: 'entryDate', alias: 'Posted', type: 'date' },
-            ],
-            buttons: [],
-            loadAction: { url: 'depreciationentries/{fixedAssetID}/x' }, loadCriteria: 'asset', loadIDField: 'fixedAssetID',
-        };
-        // Asset action buttons
-        this.assetCreateButton = { name: 'create', display: 'Create Asset', dialog: true, action: { url: 'fixedassets?action=create', method: 'post' } };
-        this.assetEditButton = { name: 'edit', display: 'Edit', icon: { name: 'edit' }, dialog: true, action: { url: 'fixedassets?action=edit', method: 'post' }, visible: x => x.status == AssetStatus.Draft };
-        this.assetActivateButton = { name: 'activate', display: 'Activate', icon: { name: 'check_circle', color: 'green' }, action: { url: 'fixedassets?action=activate', method: 'post' }, confirm: { message: 'Activate this asset? This will post the acquisition journal entry.' }, visible: x => x.status == AssetStatus.Draft };
-        this.assetDepreciateButton = { name: 'depreciate', display: 'Depreciate', icon: { name: 'trending_down', color: 'orange' }, action: { url: 'fixedassets?action=depreciate', method: 'post' }, confirm: { message: 'Post depreciation for current period?' }, visible: x => x.status == AssetStatus.Active };
-        // Dispose form for the dispose dialog
-        this.disposeFormConfig = {
-            title: 'Dispose Asset',
-            fixedTitle: true,
-            fields: [
-                { name: 'disposalType', alias: 'Disposal Type', type: 'select', required: true, loadAction: { url: 'fixedassets/list/disposal-types' }, defaultValue: 0 },
-                { name: 'disposalAmount', alias: 'Sale Amount', type: 'money', defaultValue: 0, hiddenCondition: x => x.disposalType !== 0 },
-            ]
-        };
-        this.assetDisposeButton = { name: 'dispose', display: 'Dispose', icon: { name: 'delete_forever', color: 'red' }, dialog: true, detailsConfig: { formConfig: this.disposeFormConfig, heroField: 'fixedAssetID', mode: 'edit', buttons: [{ name: 'dispose', display: 'Dispose Asset', inDialog: true, action: { url: 'fixedassets?action=dispose', method: 'post', successMessage: 'Asset disposed' } }] }, visible: x => x.status == AssetStatus.Active || x.status == AssetStatus.FullyDepreciated };
-        // Asset details dialog with depreciation history and action buttons
-        this.assetDetailsConfig = {
-            formConfig: this.assetFormConfig,
-            tableConfigs: [this.depreciationEntriesTableConfig],
-            heroField: 'fixedAssetID',
-            buttons: [this.assetCreateButton, this.assetEditButton, this.assetActivateButton, this.assetDepreciateButton, this.assetDisposeButton]
-        };
-        // Asset summary tiles
-        this.assetTileConfig = {
-            clickable: true,
-            tiles: [
-                { name: 'draft', alias: 'Draft', color: '#FFC107', icon: 'edit_note', action: { url: 'fixedassets/draft/x' } }, // Changed: Added icon
-                { name: 'active', alias: 'Active', color: '#4CAF50', icon: 'check_circle', action: { url: 'fixedassets/active/x' } }, // Changed: Added icon
-                { name: 'fullyDepreciated', alias: 'Fully Depreciated', color: '#2196F3', icon: 'trending_down' }, // Changed: Added icon
-                { name: 'disposed', alias: 'Disposed', color: '#9E9E9E', icon: 'delete_forever' }, // Changed: Added icon
-            ],
-            loadAction: { url: 'fixedassets/summary/x' }
-        };
-        // Main fixed assets table
-        this.assetsTableConfig = {
-            showFilter: true,
-            minColumns: ['assetNumber', 'name', 'statusName'],
-            columns: [
-                { name: 'assetNumber', alias: 'Asset #', type: 'button', detailsConfig: this.assetDetailsConfig },
-                { name: 'name', type: 'text' },
-                { name: 'categoryName', alias: 'Category', type: 'text' },
-                { name: 'acquisitionDate', alias: 'Acquired', type: 'date' },
-                { name: 'acquisitionCostDisplay', alias: 'Cost', type: 'text' },
-                { name: 'netBookValueDisplay', alias: 'NBV', type: 'text' },
-                { name: 'depreciationMethodName', alias: 'Method', type: 'text' },
-                { name: 'statusName', alias: 'Status', type: 'chip',
-                    colors: [
-                        { name: '#FFCC80', condition: x => x.status == AssetStatus.Draft },
-                        { name: '#A5D6A7', condition: x => x.status == AssetStatus.Active },
-                        { name: '#90CAF9', condition: x => x.status == AssetStatus.FullyDepreciated },
-                        { name: '#BDBDBD', condition: x => x.status == AssetStatus.Disposed },
-                    ]
-                },
-                { name: 'updatedByDetails', alias: 'Last Updated', type: 'text' },
-            ],
-            buttons: [
-                { name: 'create', display: 'Create Asset', dialog: true, detailsConfig: this.assetDetailsConfig, action: { url: 'fixedassets?action=create', method: 'post' } }, // Changed: Added missing display text
-                this.assetActivateButton,
-                this.assetDepreciateButton,
-                { name: 'delete', display: 'Delete', icon: { name: 'delete', color: 'red' }, action: { url: 'fixedassets?action=delete', method: 'post' }, confirm: { message: 'Delete this asset?' }, visible: x => x.status == AssetStatus.Draft },
-            ],
-            loadAction: { url: 'fixedassets/all/x' },
-            tileConfig: this.assetTileConfig,
-            // realTime: true, // Disabled: testing realtime on transactions table only
-            entityName: 'FixedAsset'
-        };
+        // Changed: Fixed Assets configs moved to AssetsService (assets.service.ts)
         //--------------------------Budgets-------------------------
         // Budget form configuration
         this.budgetFormConfig = {
@@ -4926,6 +4794,160 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 }]
         }] });
 
+class AssetsService {
+    constructor() {
+        //--------------------------Depreciation Categories-------------------------
+        this.categoryFormConfig = {
+            title: 'Depreciation Category',
+            includeAudit: true,
+            heroField: 'depreciationCategoryID',
+            fields: [
+                { name: 'identity', type: 'section' },
+                { name: 'name', type: 'text', section: 'identity', required: true },
+                { name: 'description', type: 'text', section: 'identity' },
+                { name: 'defaults', type: 'section', alias: 'Depreciation Defaults' },
+                { name: 'defaultDepreciationMethod', alias: 'Depreciation Method', type: 'select', section: 'defaults', required: true, loadAction: { url: 'depreciationcategories/list/depreciation-methods' }, defaultValue: 0 },
+                { name: 'defaultUsefulLifeMonths', alias: 'Useful Life (Months)', type: 'number', section: 'defaults', required: true, defaultValue: 60 },
+                { name: 'defaultResidualValuePercent', alias: 'Residual Value %', type: 'number', section: 'defaults', required: true, defaultValue: 10 },
+            ],
+        };
+        this.categoryCreateButton = { name: 'create', display: 'Create Category', dialog: true, action: { url: 'depreciationcategories?action=create', method: 'post' } };
+        this.categoryEditButton = { name: 'edit', display: 'Edit', icon: { name: 'edit' }, dialog: true, action: { url: 'depreciationcategories?action=edit', method: 'post' } };
+        this.categoryDetailsConfig = {
+            formConfig: this.categoryFormConfig,
+            tableConfigs: [],
+            heroField: 'depreciationCategoryID',
+            buttons: [this.categoryCreateButton, this.categoryEditButton]
+        };
+        this.categoryTableConfig = {
+            showFilter: true,
+            minColumns: ['name', 'defaultDepreciationMethodName', 'assetCount'],
+            columns: [
+                { name: 'name', type: 'button', detailsConfig: this.categoryDetailsConfig },
+                { name: 'defaultDepreciationMethodName', alias: 'Method', type: 'text' },
+                { name: 'defaultUsefulLifeMonths', alias: 'Useful Life (Mo)', type: 'number' },
+                { name: 'defaultResidualValuePercent', alias: 'Residual %', type: 'number' },
+                { name: 'assetCount', alias: 'Assets', type: 'number' },
+            ],
+            buttons: [
+                { name: 'create', display: 'Create Category', dialog: true, detailsConfig: this.categoryDetailsConfig, action: { url: 'depreciationcategories?action=create', method: 'post' } },
+                { name: 'delete', display: 'Delete', icon: { name: 'delete', color: 'red' }, action: { url: 'depreciationcategories?action=delete', method: 'post' }, confirm: { message: 'Delete this category?' } },
+            ],
+            loadAction: { url: 'depreciationcategories/all/x' },
+            entityName: 'DepreciationCategory'
+        };
+        //--------------------------Fixed Assets-------------------------
+        this.assetFormConfig = {
+            title: 'Fixed Asset',
+            includeAudit: true,
+            heroField: 'fixedAssetID',
+            fields: [
+                { name: 'identity', type: 'section' },
+                { name: 'assetNumber', alias: 'Asset #', type: 'text', section: 'identity', readonly: true, hideOnCreate: true },
+                { name: 'name', type: 'text', section: 'identity', required: true },
+                { name: 'depreciationCategoryID', alias: 'Category', type: 'select', section: 'identity', required: true, loadAction: { url: 'depreciationcategories/list/x' }, detailsConfig: this.categoryDetailsConfig },
+                { name: 'description', type: 'text', section: 'identity' },
+                { name: 'acquisition', type: 'section' },
+                { name: 'acquisitionDate', alias: 'Acquisition Date', type: 'date', section: 'acquisition', required: true },
+                { name: 'acquisitionCost', alias: 'Cost', type: 'money', section: 'acquisition', required: true },
+                { name: 'depreciation', type: 'section', collapsedCondition: (x) => x.fixedAssetID > 0, hideOnCreate: true },
+                { name: 'depreciationMethod', alias: 'Depreciation Method', type: 'select', section: 'depreciation', hideOnCreate: true, loadAction: { url: 'fixedassets/list/depreciation-methods' } },
+                { name: 'usefulLifeMonths', alias: 'Useful Life (Months)', type: 'number', section: 'depreciation', hideOnCreate: true },
+                { name: 'residualValue', alias: 'Residual Value', type: 'money', section: 'depreciation', hideOnCreate: true },
+                { name: 'tracking', type: 'section', collapsedCondition: (x) => x.fixedAssetID > 0 },
+                { name: 'location', type: 'text', section: 'tracking' },
+                { name: 'serialNumber', alias: 'Serial Number', type: 'text', section: 'tracking' },
+                { name: 'assetTag', alias: 'Asset Tag', type: 'text', section: 'tracking' },
+                { name: 'valuation', type: 'section', collapsedCondition: (x) => x.fixedAssetID > 0, hideOnCreate: true },
+                { name: 'statusName', alias: 'Status', type: 'text', section: 'valuation', readonly: true, hideOnCreate: true },
+                { name: 'netBookValueDisplay', alias: 'Net Book Value', type: 'text', section: 'valuation', readonly: true, hideOnCreate: true },
+                { name: 'accumulatedDepreciation', alias: 'Accum. Depreciation', type: 'text', section: 'valuation', readonly: true, hideOnCreate: true },
+            ],
+            loadAction: { url: 'fixedassets/id' },
+        };
+        this.depreciationEntriesTableConfig = {
+            tabTitle: 'Depreciation History',
+            showFilter: false,
+            columns: [
+                { name: 'periodDate', alias: 'Period', type: 'date' },
+                { name: 'amountDisplay', alias: 'Amount', type: 'text' },
+                { name: 'accumulatedAmountDisplay', alias: 'Accumulated', type: 'text' },
+                { name: 'netBookValueDisplay', alias: 'NBV', type: 'text' },
+                { name: 'entryDate', alias: 'Posted', type: 'date' },
+            ],
+            buttons: [],
+            loadAction: { url: 'depreciationentries/{fixedAssetID}/x' }, loadCriteria: 'asset', loadIDField: 'fixedAssetID',
+        };
+        this.assetCreateButton = { name: 'create', display: 'Create Asset', dialog: true, action: { url: 'fixedassets?action=create', method: 'post' } };
+        this.assetEditButton = { name: 'edit', display: 'Edit', icon: { name: 'edit' }, dialog: true, action: { url: 'fixedassets?action=edit', method: 'post' }, visible: x => x.status == AssetStatus.Draft };
+        this.assetActivateButton = { name: 'activate', display: 'Activate', icon: { name: 'check_circle', color: 'green' }, action: { url: 'fixedassets?action=activate', method: 'post' }, confirm: { message: 'Activate this asset? This will post the acquisition journal entry.' }, visible: x => x.status == AssetStatus.Draft };
+        this.assetDepreciateButton = { name: 'depreciate', display: 'Depreciate', icon: { name: 'trending_down', color: 'orange' }, action: { url: 'fixedassets?action=depreciate', method: 'post' }, confirm: { message: 'Post depreciation for current period?' }, visible: x => x.status == AssetStatus.Active };
+        this.disposeFormConfig = {
+            title: 'Dispose Asset',
+            fixedTitle: true,
+            fields: [
+                { name: 'disposalType', alias: 'Disposal Type', type: 'select', required: true, loadAction: { url: 'fixedassets/list/disposal-types' }, defaultValue: 0 },
+                { name: 'disposalAmount', alias: 'Sale Amount', type: 'money', defaultValue: 0, hiddenCondition: x => x.disposalType !== 0 },
+            ]
+        };
+        this.assetDisposeButton = { name: 'dispose', display: 'Dispose', icon: { name: 'delete_forever', color: 'red' }, dialog: true, detailsConfig: { formConfig: this.disposeFormConfig, heroField: 'fixedAssetID', mode: 'edit', buttons: [{ name: 'dispose', display: 'Dispose Asset', inDialog: true, action: { url: 'fixedassets?action=dispose', method: 'post', successMessage: 'Asset disposed' } }] }, visible: x => x.status == AssetStatus.Active || x.status == AssetStatus.FullyDepreciated };
+        this.assetDetailsConfig = {
+            formConfig: this.assetFormConfig,
+            tableConfigs: [this.depreciationEntriesTableConfig],
+            heroField: 'fixedAssetID',
+            buttons: [this.assetCreateButton, this.assetEditButton, this.assetActivateButton, this.assetDepreciateButton, this.assetDisposeButton]
+        };
+        this.assetTileConfig = {
+            clickable: true,
+            tiles: [
+                { name: 'draft', alias: 'Draft', color: '#FFC107', icon: 'edit_note', action: { url: 'fixedassets/draft/x' } },
+                { name: 'active', alias: 'Active', color: '#4CAF50', icon: 'check_circle', action: { url: 'fixedassets/active/x' } },
+                { name: 'fullyDepreciated', alias: 'Fully Depreciated', color: '#2196F3', icon: 'trending_down' },
+                { name: 'disposed', alias: 'Disposed', color: '#9E9E9E', icon: 'delete_forever' },
+            ],
+            loadAction: { url: 'fixedassets/summary/x' }
+        };
+        this.assetsTableConfig = {
+            showFilter: true,
+            minColumns: ['assetNumber', 'name', 'statusName'],
+            columns: [
+                { name: 'assetNumber', alias: 'Asset #', type: 'button', detailsConfig: this.assetDetailsConfig },
+                { name: 'name', type: 'text' },
+                { name: 'categoryName', alias: 'Category', type: 'text' },
+                { name: 'acquisitionDate', alias: 'Acquired', type: 'date' },
+                { name: 'acquisitionCostDisplay', alias: 'Cost', type: 'text' },
+                { name: 'netBookValueDisplay', alias: 'NBV', type: 'text' },
+                { name: 'depreciationMethodName', alias: 'Method', type: 'text' },
+                { name: 'statusName', alias: 'Status', type: 'chip',
+                    colors: [
+                        { name: '#FFCC80', condition: x => x.status == AssetStatus.Draft },
+                        { name: '#A5D6A7', condition: x => x.status == AssetStatus.Active },
+                        { name: '#90CAF9', condition: x => x.status == AssetStatus.FullyDepreciated },
+                        { name: '#BDBDBD', condition: x => x.status == AssetStatus.Disposed },
+                    ]
+                },
+            ],
+            buttons: [
+                { name: 'create', display: 'Create Asset', dialog: true, detailsConfig: this.assetDetailsConfig, action: { url: 'fixedassets?action=create', method: 'post' } },
+                this.assetActivateButton,
+                this.assetDepreciateButton,
+                { name: 'delete', display: 'Delete', icon: { name: 'delete', color: 'red' }, action: { url: 'fixedassets?action=delete', method: 'post' }, confirm: { message: 'Delete this asset?' }, visible: x => x.status == AssetStatus.Draft },
+            ],
+            loadAction: { url: 'fixedassets/all/x' },
+            tileConfig: this.assetTileConfig,
+            entityName: 'FixedAsset'
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AssetsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AssetsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AssetsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 class LoansService {
     constructor() {
         // ========== LOAN PRODUCTS BUTTONS ==========
@@ -10084,11 +10106,11 @@ class NavMenuComponent {
         return !this.isMiniSidebar || this.isMiniHovered;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: NavMenuComponent, deps: [{ token: i1$2.Router }, { token: AuthService }, { token: StorageService }, { token: NotificationsService }, { token: i1$3.BreakpointObserver }, { token: DataServiceLib }, { token: i1.MatDialog }, { token: SubscriptionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: NavMenuComponent, isStandalone: false, selector: "spa-nav-menu", inputs: { appConfig: "appConfig", footer: "footer" }, host: { listeners: { "window:scroll": "onWindowScroll()" } }, ngImport: i0, template: "<header *ngIf=\"loggedin && dataService.appConfig.navigation == 'top'\">\r\n\r\n  <!-- Changed: Removed mb-3 class to eliminate gap between toolbar and content -->\r\n  <nav class=\"toolbar navbar navbar-expand-sm navbar-toggleable-sm navbar-light border-bottom box-shadow\" style=\"padding-right: 10px;\">\r\n\r\n\r\n    <div class=\"container-fluid\" style=\"padding-right: 0px;\">\r\n\r\n      <img *ngIf=\"appConfig.logo!=''\" [src]=\"appConfig.logo\" style=\"height: 50px; margin-right: 2em\" />\r\n\r\n      <div>\r\n            <!-- <div style=\"font-size: 20px;\">\r\n              {{appConfig.appName}}\r\n            </div>\r\n\r\n            <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px;\">\r\n              {{tenantName}}\r\n            </div> -->\r\n\r\n        <div *ngIf=\"!dataService.appConfig.multitenant\" style=\"font-size: 22px;\">\r\n          {{appConfig.appName}}\r\n        </div>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant\" style=\"font-size: 20px; ; font-weight: 400;\" [ngStyle]=\"{'margin-top': dataService.appConfig.multitenant ? '12px' : ''}\">\r\n          {{appConfig.appName}}\r\n        </div>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px; margin-bottom: 5px;\">\r\n          {{tenantName}}\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n\r\n      <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\".navbar-collapse\" aria-label=\"Toggle navigation\" [attr.aria-expanded]=\"isExpanded\" (click)=\"toggle()\">\r\n        <span class=\"navbar-toggler-icon\"></span>\r\n      </button>\r\n\r\n      <div *ngIf=\"myRole\" class=\" navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse stack-top\" style=\"margin-right: 0px;\" [ngClass]=\"{ show: isExpanded, navitems: isExpanded }\" >\r\n\r\n        <button mat-icon-button (click)=\"logoff()\" > <mat-icon>logout</mat-icon> </button>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant\">\r\n\r\n          <button mat-icon-button (click)=\"redirectTo('home/admin/tenant-settings')\" > <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon> </button>\r\n\r\n          <!-- Removed: Support icon \u2014 replaced by floating assistant chat widget -->\r\n        </div>\r\n\r\n\r\n        <button id=\"btnUser\" mat-button [matMenuTriggerFor]=\"profileMenu\"  ><mat-icon style=\"font-size: 24px;\">account_circle</mat-icon>  &nbsp;{{loggedUserFullName}}</button>\r\n\r\n        <mat-menu #profileMenu=\"matMenu\">\r\n          <button id=\"btnProfile\" mat-menu-item (click)=\"redirectTo('home/user/profile')\" >Profile</button>\r\n          <button id=\"btnLogOff\" mat-menu-item (click)=\"logoff()\">Log Off</button>\r\n        </mat-menu>\r\n\r\n        <div *ngFor=\"let item of reversedCapItems\">\r\n\r\n          <!-- Menu Item \u2014 Added: isFeatureAllowed check for plan-based gating -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && !item.capSubItems && item.showMenu && isFeatureAllowed(item)\" mat-button (click)=\"redirectTo(item.link)\">{{item.display}}</button>\r\n\r\n          <!-- Menu Item with Sub items ignored \u2014 Added: isFeatureAllowed check -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && item.capSubItems && item.showMenu && item.ignoreSubsDisplay && isFeatureAllowed(item)\" mat-button (click)=\"redirectTo(item.link)\">{{item.display}}</button>\r\n\r\n          <!-- Menu Item with Sub items to display \u2014 Added: isFeatureAllowed check -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && item.capSubItems && item.showMenu && !item.ignoreSubsDisplay && isFeatureAllowed(item)\" mat-button [matMenuTriggerFor]=\"adminMenu\">{{item.display}}</button>\r\n\r\n\r\n          <!-- Sub Menu Items \u2014 Added: isFeatureAllowed check on sub-items -->\r\n          <mat-menu #adminMenu=\"matMenu\">\r\n\r\n            <div *ngFor=\"let subItem of item.capSubItems\">\r\n\r\n              <button *ngIf=\"myRole[subItem.name] && subItem.showMenu && isFeatureAllowed(subItem)\" mat-menu-item (click)=\"redirectTo(subItem.link)\">{{subItem.display}}</button>\r\n\r\n            </div>\r\n\r\n          </mat-menu>\r\n\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n    </div>\r\n\r\n  </nav>\r\n\r\n</header>\r\n\r\n<!-- Changed: Removed top/bottom padding to eliminate gaps, but kept left/right padding for content spacing -->\r\n<div class=\"container-fluid tin-bg-image\" *ngIf=\"dataService.appConfig.navigation == 'top'\" style=\"padding: 12px 12px; margin: 0;\">\r\n  <router-outlet></router-outlet>\r\n  <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<!-- SIDE -->\r\n<mat-toolbar class=\"tin-bg-image-toolbar\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\" style=\"padding: 0px 8px;\">\r\n\r\n  <button mat-icon-button (click)=\"toggle()\" matTooltip=\"Menu\">\r\n    <mat-icon>menu</mat-icon>\r\n  </button>\r\n\r\n  <img [src]=\"dataService.appConfig.logo\" style=\"height: 50px;\" />\r\n\r\n  <div style=\"padding-left: 10px; \">\r\n\r\n    <div style=\"font-size: 22px; font-weight: 400;\">\r\n      {{appConfig.appName}}\r\n    </div>\r\n\r\n    <!-- <div style=\"font-size: 20px; height: 25px; font-weight: 400;\" [ngStyle]=\"{'margin-top': dataService.appConfig.multitenant ? '12px' : ''}\">\r\n      {{appConfig.appName}}\r\n    </div> -->\r\n\r\n    <!-- <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px; margin-bottom: 5px;\">\r\n      {{tenantName}}\r\n    </div> -->\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <span class=\"toolbar-item-spacer\"></span>\r\n\r\n  <!-- buttons -->\r\n\r\n  <div *ngIf=\"dataService.appConfig.multitenant\" style=\"display: flex; align-items: center;\">\r\n\r\n    <!-- <label style=\"font-size: 14px;\">Hi, {{loggedUserFullName}}</label> -->\r\n\r\n    <button mat-icon-button (click)=\"redirectTo('home/admin/tenant-settings')\" matTooltip=\"Organisation Settings\">\r\n      <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon>\r\n    </button>\r\n    <label style=\"font-size: 14px;margin-right: 20px;\">{{tenantName}}</label>\r\n\r\n    <!-- Changed: Support/help icon removed \u2014 replaced by floating agent chat widget -->\r\n\r\n    <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"redirectTo('home/workflow/notifications')\" matTooltip=\"Notifications\">\r\n      <mat-icon [matBadge]=\"notificationCount$ | async\" [matBadgeHidden]=\"(notificationCount$ | async) === 0\" matBadgeColor=\"warn\" matBadgeSize=\"small\">notifications</mat-icon>\r\n    </button>\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <button mat-icon-button matTooltip=\"My Account\" [matMenuTriggerFor]=\"userAccountMenu\"><mat-icon>account_circle</mat-icon></button>\r\n  <label style=\"font-size: 14px;\">{{loggedUserFullName}}</label>\r\n\r\n  <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"logoff()\"  matTooltip=\"Signout\">\r\n    <mat-icon>logout</mat-icon>\r\n  </button>\r\n\r\n\r\n  <!-- my account menu -->\r\n  <mat-menu #userAccountMenu [overlapTrigger]=\"false\" yPosition=\"below\">\r\n\r\n\r\n    <button mat-menu-item routerLink=\"home/user/profile\">\r\n      <mat-icon>person</mat-icon><span>Profile</span>\r\n    </button>\r\n\r\n    <!-- Removed: Help menu item \u2014 replaced by floating assistant chat widget -->\r\n\r\n    <mat-divider></mat-divider>\r\n\r\n    <button mat-menu-item (click)=\"logoff()\">\r\n      <mat-icon>logout</mat-icon>Logout\r\n    </button>\r\n\r\n  </mat-menu>\r\n\r\n</mat-toolbar>\r\n\r\n\r\n\r\n\r\n<mat-sidenav-container class=\"app-container\" [hasBackdrop]=\"smallScreen\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n\r\n  <mat-sidenav #sidenav [mode]=\"smallScreen ? 'over' : 'side'\" [class.mat-elevation-z4]=\"true\" [opened]=\"isExpanded\"  class=\"app-sidenav side-color\" style=\"height: 100%;\"\r\n  [ngStyle]=\"{'width': dataService.appConfig.navWidth}\">\r\n    <mat-nav-list >\r\n\r\n      <ng-container *ngFor=\"let cap of dataService.appConfig.capItems\" >\r\n\r\n        <!-- Menu item \u2014 Added: isFeatureAllowed check for plan-based gating -->\r\n        <mat-list-item [routerLink]=\"cap.link\"  *ngIf=\"myRole[cap.name] && cap.showMenu && (!cap.capSubItems || cap.capSubItems && cap.ignoreSubsDisplay) && isFeatureAllowed(cap)\" style=\"height: 40px;font-size: 15px;\"\r\n        (click)=\"smallScreen ? toggle() : null\">\r\n          <mat-icon [ngStyle]=\"{'color': cap.color}\" style=\"margin-right: 5px;\">{{cap.icon}}</mat-icon>{{cap.display}}\r\n        </mat-list-item>\r\n\r\n        <!-- Menu With Sub items \u2014 Added: isFeatureAllowed check -->\r\n        <mat-expansion-panel class=\"side-color\" [class.mat-elevation-z0]=\"true\"  *ngIf=\"myRole[cap.name] && cap.showMenu && cap.capSubItems && !cap.ignoreSubsDisplay && isFeatureAllowed(cap)\">\r\n\r\n          <mat-expansion-panel-header style=\"height: 40px;padding-left: 15px;\">\r\n            <mat-icon [ngStyle]=\"{'color': cap.color}\" style=\"margin-right: 5px;\">{{cap.icon != 'navigate_next' ? cap.icon : 'fiber_manual_record' }}</mat-icon>{{cap.display}}\r\n          </mat-expansion-panel-header>\r\n\r\n          <!-- Sub items - Changed: Use ng-container to avoid blank spaces for hidden items -->\r\n          <mat-nav-list>\r\n            <ng-container *ngFor=\"let capSub of getSubItems(cap)\">\r\n              <mat-list-item [routerLink]=\"capSub.link\" style=\"height: 30px; font-size: 15px; padding-left: 4px; padding-right: 10px; margin-bottom: 5px;\" (click)=\"smallScreen ? toggle() : null\" *ngIf=\"myRole[capSub.name] && capSub.showMenu && isFeatureAllowed(capSub)\" [matTooltip]=\"capSub.display\" matTooltipPosition=\"right\">\r\n                <mat-icon [ngStyle]=\"{'color': capSub.color}\" style=\"margin-right: 5px;\">{{capSub.icon}}</mat-icon>{{capSub.display}}\r\n              </mat-list-item>\r\n            </ng-container>\r\n          </mat-nav-list>\r\n\r\n        </mat-expansion-panel>\r\n\r\n      </ng-container>\r\n\r\n    </mat-nav-list>\r\n  </mat-sidenav>\r\n\r\n\r\n\r\n  <mat-sidenav-content class=\"tin-bg-image\" style=\"padding: 0px 12px;\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n    <hr style=\"margin-top: 0px;\">\r\n    <router-outlet></router-outlet>\r\n    <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n  </mat-sidenav-content>\r\n\r\n</mat-sidenav-container>\r\n\r\n\r\n<!-- footer -->\r\n<div class=\"tin-center\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n  <label style=\"text-align: center; font-size: 12px;\">&copy; {{nowDate | date : 'yyyy'}} <a color=\"primary\" class=\"terms-link\" [href]=\"appConfig.siteUrl\" target=\"_blank\">{{footer}}</a> | <a color=\"primary\" class=\"terms-link\" style=\"cursor: pointer;\" (click)=\"openTerms()\">Terms</a> | <a color=\"primary\" class=\"terms-link\" style=\"cursor: pointer;\" (click)=\"openPrivacy()\">Privacy Policy</a></label>\r\n</div>\r\n\r\n\r\n<div class=\"tin-bg-image\" *ngIf=\"!loggedin && dataService.appConfig.navigation == 'side'\">\r\n  <router-outlet></router-outlet>\r\n  <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n</div>\r\n\r\n\r\n<!-- SIDE-MODERN -->\r\n\r\n<!-- Changed: Side-modern navigation layout -->\r\n<div class=\"sm-layout\"\r\n  *ngIf=\"loggedin && dataService.appConfig.navigation == 'side-modern'\"\r\n  [class.sm-mini]=\"isMiniSidebar && !isMiniHovered\"\r\n  [class.sm-mini-hovered]=\"isMiniSidebar && isMiniHovered\"\r\n  [class.sm-mobile-open]=\"smallScreen && isExpanded\">\r\n\r\n  <!-- Sidebar -->\r\n  <aside class=\"sm-sidebar\"\r\n    (mouseenter)=\"onMiniMouseEnter()\"\r\n    (mouseleave)=\"onMiniMouseLeave()\">\r\n\r\n    <!-- Background layers -->\r\n    <div class=\"sm-sidebar-bg\">\r\n      <div class=\"sm-sidebar-bg-image\" *ngIf=\"appConfig.navImage\" [ngStyle]=\"{'background-image': 'url(' + appConfig.navImage + ')'}\"></div>\r\n      <div class=\"sm-sidebar-bg-overlay\" [ngStyle]=\"{'background-color': appConfig.navColor}\"></div>\r\n    </div>\r\n\r\n    <!-- Sidebar content -->\r\n    <div class=\"sm-sidebar-content\">\r\n\r\n      <!-- Brand -->\r\n      <div class=\"sm-brand\">\r\n        <img *ngIf=\"appConfig.logo\" [src]=\"appConfig.logo\" alt=\"logo\" />\r\n        <span class=\"sm-brand-name\">{{appConfig.appName}}</span>\r\n      </div>\r\n\r\n      <mat-divider></mat-divider>\r\n\r\n      <!-- Profile -->\r\n      <div class=\"sm-profile\">\r\n        <mat-icon class=\"sm-profile-icon\">account_circle</mat-icon>\r\n        <div class=\"sm-profile-info\">\r\n          <div class=\"sm-profile-name\">{{loggedUserFullName}}</div>\r\n          <div class=\"sm-profile-role\">{{tenantName || 'User'}}</div>\r\n        </div>\r\n      </div>\r\n\r\n      <mat-divider></mat-divider>\r\n\r\n      <!-- Scrollable menu -->\r\n      <div class=\"sm-menu-scroll\">\r\n\r\n        <ng-container *ngFor=\"let cap of dataService.appConfig.capItems\">\r\n\r\n          <!-- Simple menu item (no sub-items or ignoring sub display) \u2014 Added: isFeatureAllowed check -->\r\n          <div *ngIf=\"myRole[cap.name] && cap.showMenu && (!cap.capSubItems || cap.ignoreSubsDisplay) && isFeatureAllowed(cap)\"\r\n            class=\"sm-menu-item\"\r\n            [class.sm-active]=\"isActiveRoute(cap.link)\"\r\n            (click)=\"modernNavigate(cap.link)\">\r\n            <mat-icon class=\"sm-menu-icon\">{{cap.icon != 'navigate_next' ? cap.icon : 'dashboard'}}</mat-icon>\r\n            <span class=\"sm-menu-text\">{{cap.display}}</span>\r\n          </div>\r\n\r\n          <!-- Parent menu item with sub-items \u2014 Added: isFeatureAllowed check -->\r\n          <ng-container *ngIf=\"myRole[cap.name] && cap.showMenu && cap.capSubItems && !cap.ignoreSubsDisplay && isFeatureAllowed(cap)\">\r\n\r\n            <!-- Parent item (toggles sub-menu) -->\r\n            <div class=\"sm-menu-item\"\r\n              [class.sm-active]=\"isParentActive(cap) && !isMenuOpen(cap.name)\"\r\n              (click)=\"toggleModernMenu(cap.name)\">\r\n              <mat-icon class=\"sm-menu-icon\">{{cap.icon != 'navigate_next' ? cap.icon : 'dashboard'}}</mat-icon>\r\n              <span class=\"sm-menu-text\">{{cap.display}}</span>\r\n              <mat-icon class=\"sm-caret\" [class.sm-caret-open]=\"isMenuOpen(cap.name)\">expand_more</mat-icon>\r\n            </div>\r\n\r\n            <!-- Sub-menu container (animated) -->\r\n            <div class=\"sm-submenu\" [class.sm-submenu-open]=\"isMenuOpen(cap.name)\">\r\n              <ng-container *ngFor=\"let sub of getSubItems(cap)\">\r\n                <div *ngIf=\"myRole[sub.name] && sub.showMenu && isFeatureAllowed(sub)\"\r\n                  class=\"sm-submenu-item\"\r\n                  [class.sm-active]=\"isActiveRoute(sub.link)\"\r\n                  (click)=\"modernNavigate(sub.link)\">\r\n                  <mat-icon *ngIf=\"sub.icon && sub.icon != 'navigate_next'\" class=\"sm-sub-icon\">{{sub.icon}}</mat-icon>\r\n                  <span *ngIf=\"!sub.icon || sub.icon == 'navigate_next'\" class=\"sm-initials\">{{getInitials(sub.display)}}</span>\r\n                  <span class=\"sm-menu-text\">{{sub.display}}</span>\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n\r\n          </ng-container>\r\n\r\n        </ng-container>\r\n\r\n      </div>\r\n\r\n    </div>\r\n  </aside>\r\n\r\n  <!-- Mobile backdrop -->\r\n  <div class=\"sm-backdrop\" (click)=\"isExpanded = false\"></div>\r\n\r\n  <!-- Main content -->\r\n  <div class=\"sm-main\">\r\n\r\n    <!-- Top bar - Changed: Added scroll class for frosted glass effect -->\r\n    <div class=\"sm-topbar\" [class.sm-topbar-scrolled]=\"topbarScrolled\">\r\n      <button mat-icon-button (click)=\"smallScreen ? toggle() : toggleMiniSidebar()\" matTooltip=\"Menu\">\r\n        <mat-icon>menu</mat-icon>\r\n      </button>\r\n\r\n      <!-- Changed: Mobile branding - show logo + app name when sidebar is hidden on small screens -->\r\n      <img *ngIf=\"smallScreen && appConfig.logo\" [src]=\"appConfig.logo\" alt=\"logo\" class=\"sm-topbar-logo\" />\r\n      <span *ngIf=\"smallScreen\" class=\"sm-topbar-brand\">{{appConfig.appName}}</span>\r\n\r\n      <span class=\"sm-topbar-spacer\"></span>\r\n\r\n      <!-- Multitenant buttons -->\r\n      <div *ngIf=\"dataService.appConfig.multitenant\" style=\"display: flex; align-items: center;\">\r\n        <button mat-icon-button (click)=\"redirectTo('home/admin/tenant-settings')\" matTooltip=\"Organisation Settings\">\r\n          <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon>\r\n        </button>\r\n        <span class=\"sm-topbar-label\">{{tenantName}}</span>\r\n\r\n        <!-- Changed: Support/help icon removed \u2014 replaced by floating agent chat widget -->\r\n\r\n        <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"redirectTo('home/workflow/notifications')\" matTooltip=\"Notifications\">\r\n          <mat-icon [matBadge]=\"notificationCount$ | async\" [matBadgeHidden]=\"(notificationCount$ | async) === 0\" matBadgeColor=\"warn\" matBadgeSize=\"small\">notifications</mat-icon>\r\n        </button>\r\n      </div>\r\n\r\n      <!-- Profile menu -->\r\n      <button mat-icon-button matTooltip=\"My Account\" [matMenuTriggerFor]=\"smProfileMenu\">\r\n        <mat-icon>account_circle</mat-icon>\r\n      </button>\r\n      <span class=\"sm-topbar-label\">{{loggedUserFullName}}</span>\r\n\r\n      <mat-menu #smProfileMenu=\"matMenu\" [overlapTrigger]=\"false\" yPosition=\"below\">\r\n        <button mat-menu-item routerLink=\"home/user/profile\">\r\n          <mat-icon>person</mat-icon><span>Profile</span>\r\n        </button>\r\n        <!-- Changed: Help menu item removed \u2014 replaced by floating agent chat widget -->\r\n        <mat-divider></mat-divider>\r\n        <button mat-menu-item (click)=\"logoff()\">\r\n          <mat-icon>logout</mat-icon>Logout\r\n        </button>\r\n      </mat-menu>\r\n\r\n      <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"logoff()\" matTooltip=\"Signout\">\r\n        <mat-icon>logout</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <!-- Page content - Changed: Replaced tin-bg-image with sm-content modern texture -->\r\n    <div class=\"sm-content\">\r\n      <router-outlet></router-outlet>\r\n      <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n    </div>\r\n\r\n    <!-- Footer -->\r\n    <div class=\"sm-footer\">\r\n      &copy; {{nowDate | date : 'yyyy'}} <a [href]=\"appConfig.siteUrl\" target=\"_blank\">{{footer}}</a> | <a (click)=\"openTerms()\">Terms</a> | <a (click)=\"openPrivacy()\">Privacy Policy</a>\r\n    </div>\r\n\r\n  </div>\r\n\r\n</div>\r\n\r\n<!-- Not logged in fallback for side-modern -->\r\n<div class=\"tin-bg-image\" *ngIf=\"!loggedin && dataService.appConfig.navigation == 'side-modern'\">\r\n  <router-outlet></router-outlet>\r\n  <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n</div>\r\n\r\n<!-- Changed: Cascading toast notifications for real-time entity changes \u2014 visible in all layouts -->\r\n<spa-toast *ngIf=\"loggedin && dataService.appConfig.multitenant\"></spa-toast>\r\n\r\n<!-- Changed: Floating agent chat widget \u2014 renamed from spa-assistant -->\r\n<spa-agent *ngIf=\"loggedin && dataService.appConfig.multitenant\"></spa-agent>", styles: ["a.navbar-brand{white-space:normal;text-align:center;word-break:break-all}html{font-size:14px}.box-shadow{box-shadow:0 .25rem .75rem #0000000d}.toolbar-item-spacer{flex:1 1 auto}.toolbar{height:60px;display:flex;align-items:center;background-color:#03a;color:#fff;margin-bottom:0!important}.toolbar button,.toolbar .mat-mdc-button,.toolbar .mat-mdc-icon-button{color:#fff!important}.toolbar mat-icon{color:#fff!important}.stack-top{z-index:9;margin:20px}.navitems{background-color:#03a}.app-container{height:90%;margin:0}.app-sidenav{width:200px;border:1px solid rgb(192,190,199)}.side-color{background-color:#e6f4ff}.app-sidenav mat-list-item{display:flex!important;align-items:center!important}.app-sidenav mat-icon{display:inline-flex!important;align-items:center!important;vertical-align:middle!important}.app-sidenav mat-expansion-panel-header mat-icon{display:inline-flex!important;align-items:center!important;vertical-align:middle!important}::ng-deep .app-sidenav .mat-expansion-panel-body{padding-bottom:5px!important;padding-right:5px!important}::ng-deep .app-sidenav .mdc-list{padding-bottom:0!important}.sm-layout{display:flex;min-height:100vh;position:relative}.sm-sidebar{position:fixed;top:0;left:0;bottom:0;width:260px;z-index:1030;overflow:hidden;transition:width .3s cubic-bezier(.4,0,.2,1)}.sm-sidebar-bg{position:absolute;inset:0;z-index:0}.sm-sidebar-bg-image{position:absolute;inset:0;background-size:cover;background-position:center}.sm-sidebar-bg-overlay{position:absolute;inset:0}.sm-sidebar-content{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;color:#fff}.sm-brand{display:flex;align-items:center;padding:18px 15px 10px;min-height:60px;text-decoration:none;white-space:nowrap;overflow:hidden}.sm-brand img{height:34px;width:34px;object-fit:contain;margin-right:12px;flex-shrink:0}.sm-brand-name{font-size:16px;font-weight:500;letter-spacing:.5px;color:#fff;overflow:hidden;text-overflow:ellipsis;transition:opacity .2s ease}.sm-profile{display:flex;align-items:center;padding:12px 15px;white-space:nowrap;overflow:hidden}.sm-profile-icon{font-size:34px!important;width:34px!important;height:34px!important;margin-right:12px;flex-shrink:0;color:#fffc}.sm-profile-info{overflow:hidden;transition:opacity .2s ease}.sm-profile-name{font-size:14px;font-weight:500;color:#fff;line-height:1.3;overflow:hidden;text-overflow:ellipsis}.sm-profile-role{font-size:11px;color:#fff9;line-height:1.3;overflow:hidden;text-overflow:ellipsis}.sm-sidebar mat-divider{border-color:#ffffff26!important;margin:0 15px}.sm-menu-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}.sm-menu-scroll::-webkit-scrollbar{width:4px}.sm-menu-scroll::-webkit-scrollbar-track{background:transparent}.sm-menu-scroll::-webkit-scrollbar-thumb{background:#fff3;border-radius:2px}.sm-menu-item{display:flex;align-items:center;padding:10px 15px;margin:2px 15px;border-radius:4px;cursor:pointer;color:#fff;font-size:13px;font-weight:400;letter-spacing:.3px;transition:all .15s ease;text-decoration:none;white-space:nowrap;overflow:hidden}.sm-menu-item:hover{background:#ffffff1f}.sm-menu-item.sm-active{background-color:#fff;color:#3c4858;box-shadow:0 4px 20px #00000024,0 7px 10px -5px #0003;font-weight:500}.sm-menu-item.sm-active .sm-menu-icon{color:#3c4858}.sm-menu-icon{font-size:20px!important;width:24px!important;height:24px!important;display:inline-flex!important;align-items:center;justify-content:center;margin-right:12px;flex-shrink:0;color:#fffc;transition:color .15s ease}.sm-menu-text{flex:1;overflow:hidden;text-overflow:ellipsis;transition:opacity .2s ease}.sm-caret{font-size:18px!important;width:18px!important;height:18px!important;transition:transform .3s cubic-bezier(.4,0,.2,1);flex-shrink:0;color:#fff9}.sm-caret.sm-caret-open{transform:rotate(180deg)}.sm-active .sm-caret{color:#3c4858}.sm-submenu{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1)}.sm-submenu.sm-submenu-open{max-height:1000px}.sm-submenu-item{display:flex;align-items:center;padding:8px 15px 8px 30px;margin:1px 15px;border-radius:4px;cursor:pointer;color:#fffc;font-size:12px;font-weight:400;transition:all .15s ease;white-space:nowrap;overflow:hidden}.sm-submenu-item:hover{background:#ffffff1f;color:#fff}.sm-submenu-item.sm-active{background-color:#fff;color:#3c4858;box-shadow:0 4px 20px #00000024,0 7px 10px -5px #0003;font-weight:500}.sm-submenu-item.sm-active .sm-sub-icon{color:#3c4858}.sm-sub-icon{font-size:16px!important;width:20px!important;height:20px!important;display:inline-flex!important;align-items:center;justify-content:center;margin-right:10px;flex-shrink:0;color:#fff9}.sm-initials{width:20px;height:20px;border-radius:50%;background:#ffffff26;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:600;margin-right:10px;flex-shrink:0;color:#fffc}.sm-active .sm-initials{background:#3c48581f;color:#3c4858}.sm-main{flex:1;min-width:0;margin-left:260px;min-height:100vh;display:flex;flex-direction:column;transition:margin-left .3s cubic-bezier(.4,0,.2,1);background-color:#eef2f7}.sm-topbar{display:flex;align-items:center;padding:8px 16px;min-height:56px;background-color:#eef2f7;background-image:radial-gradient(circle,#d5dbe3 1px,transparent 1px);background-size:16px 16px;border-bottom:1px solid rgba(0,0,0,.08);position:sticky;top:0;z-index:1020;transition:background .3s ease,backdrop-filter .3s ease}.sm-topbar-scrolled{background-color:#eef2f78c;background-image:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 1px 3px #0000000f}.sm-topbar-spacer{flex:1 1 auto}.sm-topbar-logo{height:32px;width:32px;object-fit:contain;margin-right:8px}.sm-topbar-brand{font-size:18px;font-weight:500;margin-right:8px;white-space:nowrap}.sm-topbar-label{font-size:14px;margin-right:4px;display:inline-flex;align-items:center;align-self:center;height:40px;line-height:1}.sm-topbar .mat-mdc-icon-button{display:inline-flex!important;align-items:center!important;justify-content:center!important}.sm-content{flex:1;padding:12px;min-width:0;background-color:#e5eaf2;background-image:radial-gradient(ellipse at 50% 45%,#fffffff2,#fff6 35%,#fff0 60%),radial-gradient(circle,#bec7d4 1px,transparent 1px);background-size:100% 100%,16px 16px;min-height:calc(100vh - 104px)}.sm-footer{padding:12px 16px;text-align:center;font-size:12px;color:#999;border-top:1px solid #e0e0e0;background:#fff}.sm-footer a{color:inherit;cursor:pointer}.sm-footer a:hover{text-decoration:underline}.sm-backdrop{display:none;position:fixed;inset:0;background:#00000080;z-index:1025}.sm-layout.sm-mini .sm-sidebar{width:80px}.sm-layout.sm-mini .sm-main{margin-left:80px}.sm-layout.sm-mini .sm-brand-name,.sm-layout.sm-mini .sm-profile-info,.sm-layout.sm-mini .sm-menu-text,.sm-layout.sm-mini .sm-caret,.sm-layout.sm-mini .sm-submenu{display:none}.sm-layout.sm-mini .sm-sidebar mat-divider{margin:0 10px}.sm-layout.sm-mini .sm-brand{justify-content:center;padding:18px 0 10px}.sm-layout.sm-mini .sm-brand img{margin-right:0}.sm-layout.sm-mini .sm-profile{justify-content:center;padding:12px 0}.sm-layout.sm-mini .sm-profile-icon{margin-right:0}.sm-layout.sm-mini .sm-menu-item{justify-content:center;padding:12px 0;margin:2px 0}.sm-layout.sm-mini .sm-menu-icon{margin-right:0;font-size:22px!important}.sm-layout.sm-mini-hovered .sm-sidebar{width:260px;box-shadow:4px 0 20px #0000004d}.sm-layout.sm-mini-hovered .sm-main{margin-left:80px}.sm-layout.sm-mini-hovered .sm-brand-name,.sm-layout.sm-mini-hovered .sm-profile-info,.sm-layout.sm-mini-hovered .sm-menu-text,.sm-layout.sm-mini-hovered .sm-caret{display:initial}.sm-layout.sm-mini-hovered .sm-submenu{display:block}.sm-layout.sm-mini-hovered .sm-sidebar mat-divider{margin:0 15px}.sm-layout.sm-mini-hovered .sm-brand{justify-content:flex-start;padding:18px 15px 10px}.sm-layout.sm-mini-hovered .sm-brand img{margin-right:12px}.sm-layout.sm-mini-hovered .sm-profile{justify-content:flex-start;padding:12px 15px}.sm-layout.sm-mini-hovered .sm-profile-icon{margin-right:12px}.sm-layout.sm-mini-hovered .sm-menu-item{justify-content:flex-start;padding:10px 15px;margin:2px 15px}.sm-layout.sm-mini-hovered .sm-menu-icon{margin-right:12px;font-size:20px!important}@media (max-width: 600px){.sm-sidebar{transform:translate(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);width:260px!important}.sm-layout.sm-mobile-open .sm-sidebar{transform:translate(0)}.sm-layout.sm-mobile-open .sm-backdrop{display:block}.sm-main{margin-left:0!important}.sm-layout.sm-mini .sm-sidebar{width:260px!important}.sm-layout.sm-mini .sm-brand-name,.sm-layout.sm-mini .sm-profile-info,.sm-layout.sm-mini .sm-menu-text,.sm-layout.sm-mini .sm-caret{display:initial}.sm-layout.sm-mini .sm-submenu{display:block}.sm-layout.sm-mini .sm-sidebar mat-divider{margin:0 15px}.sm-layout.sm-mini .sm-menu-item{justify-content:flex-start;padding:10px 15px;margin:2px 15px}.sm-layout.sm-mini .sm-menu-icon{margin-right:12px;font-size:20px!important}.sm-layout.sm-mini .sm-brand{justify-content:flex-start;padding:18px 15px 10px}.sm-layout.sm-mini .sm-brand img{margin-right:12px}.sm-layout.sm-mini .sm-profile{justify-content:flex-start;padding:12px 15px}.sm-layout.sm-mini .sm-profile-icon{margin-right:12px}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4$3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i11.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i5.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i14.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i14.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i14.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i16.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i16.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i16.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: i17.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i18.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i18.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "component", type: LoaderComponent, selector: "spa-loader", inputs: ["logo"] }, { kind: "component", type: ToastComponent, selector: "spa-toast" }, { kind: "component", type: AgentComponent, selector: "spa-agent" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: NavMenuComponent, isStandalone: false, selector: "spa-nav-menu", inputs: { appConfig: "appConfig", footer: "footer" }, host: { listeners: { "window:scroll": "onWindowScroll()" } }, ngImport: i0, template: "<header *ngIf=\"loggedin && dataService.appConfig.navigation == 'top'\">\r\n\r\n  <!-- Changed: Removed mb-3 class to eliminate gap between toolbar and content -->\r\n  <nav class=\"toolbar navbar navbar-expand-sm navbar-toggleable-sm navbar-light border-bottom box-shadow\" style=\"padding-right: 10px;\">\r\n\r\n\r\n    <div class=\"container-fluid\" style=\"padding-right: 0px;\">\r\n\r\n      <img *ngIf=\"appConfig.logo!=''\" [src]=\"appConfig.logo\" style=\"height: 50px; margin-right: 2em\" />\r\n\r\n      <div>\r\n            <!-- <div style=\"font-size: 20px;\">\r\n              {{appConfig.appName}}\r\n            </div>\r\n\r\n            <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px;\">\r\n              {{tenantName}}\r\n            </div> -->\r\n\r\n        <div *ngIf=\"!dataService.appConfig.multitenant\" style=\"font-size: 22px;\">\r\n          {{appConfig.appName}}\r\n        </div>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant\" style=\"font-size: 20px; ; font-weight: 400;\" [ngStyle]=\"{'margin-top': dataService.appConfig.multitenant ? '12px' : ''}\">\r\n          {{appConfig.appName}}\r\n        </div>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px; margin-bottom: 5px;\">\r\n          {{tenantName}}\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n\r\n      <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\".navbar-collapse\" aria-label=\"Toggle navigation\" [attr.aria-expanded]=\"isExpanded\" (click)=\"toggle()\">\r\n        <span class=\"navbar-toggler-icon\"></span>\r\n      </button>\r\n\r\n      <div *ngIf=\"myRole\" class=\" navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse stack-top\" style=\"margin-right: 0px;\" [ngClass]=\"{ show: isExpanded, navitems: isExpanded }\" >\r\n\r\n        <button mat-icon-button (click)=\"logoff()\" > <mat-icon>logout</mat-icon> </button>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant\">\r\n\r\n          <button mat-icon-button (click)=\"redirectTo('home/tenancy/settings')\" > <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon> </button>\r\n\r\n          <!-- Removed: Support icon \u2014 replaced by floating assistant chat widget -->\r\n        </div>\r\n\r\n\r\n        <button id=\"btnUser\" mat-button [matMenuTriggerFor]=\"profileMenu\"  ><mat-icon style=\"font-size: 24px;\">account_circle</mat-icon>  &nbsp;{{loggedUserFullName}}</button>\r\n\r\n        <mat-menu #profileMenu=\"matMenu\">\r\n          <button id=\"btnProfile\" mat-menu-item (click)=\"redirectTo('home/user/profile')\" >Profile</button>\r\n          <button id=\"btnLogOff\" mat-menu-item (click)=\"logoff()\">Log Off</button>\r\n        </mat-menu>\r\n\r\n        <div *ngFor=\"let item of reversedCapItems\">\r\n\r\n          <!-- Menu Item \u2014 Added: isFeatureAllowed check for plan-based gating -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && !item.capSubItems && item.showMenu && isFeatureAllowed(item)\" mat-button (click)=\"redirectTo(item.link)\">{{item.display}}</button>\r\n\r\n          <!-- Menu Item with Sub items ignored \u2014 Added: isFeatureAllowed check -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && item.capSubItems && item.showMenu && item.ignoreSubsDisplay && isFeatureAllowed(item)\" mat-button (click)=\"redirectTo(item.link)\">{{item.display}}</button>\r\n\r\n          <!-- Menu Item with Sub items to display \u2014 Added: isFeatureAllowed check -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && item.capSubItems && item.showMenu && !item.ignoreSubsDisplay && isFeatureAllowed(item)\" mat-button [matMenuTriggerFor]=\"adminMenu\">{{item.display}}</button>\r\n\r\n\r\n          <!-- Sub Menu Items \u2014 Added: isFeatureAllowed check on sub-items -->\r\n          <mat-menu #adminMenu=\"matMenu\">\r\n\r\n            <div *ngFor=\"let subItem of item.capSubItems\">\r\n\r\n              <button *ngIf=\"myRole[subItem.name] && subItem.showMenu && isFeatureAllowed(subItem)\" mat-menu-item (click)=\"redirectTo(subItem.link)\">{{subItem.display}}</button>\r\n\r\n            </div>\r\n\r\n          </mat-menu>\r\n\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n    </div>\r\n\r\n  </nav>\r\n\r\n</header>\r\n\r\n<!-- Changed: Removed top/bottom padding to eliminate gaps, but kept left/right padding for content spacing -->\r\n<div class=\"container-fluid tin-bg-image\" *ngIf=\"dataService.appConfig.navigation == 'top'\" style=\"padding: 12px 12px; margin: 0;\">\r\n  <router-outlet></router-outlet>\r\n  <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<!-- SIDE -->\r\n<mat-toolbar class=\"tin-bg-image-toolbar\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\" style=\"padding: 0px 8px;\">\r\n\r\n  <button mat-icon-button (click)=\"toggle()\" matTooltip=\"Menu\">\r\n    <mat-icon>menu</mat-icon>\r\n  </button>\r\n\r\n  <img [src]=\"dataService.appConfig.logo\" style=\"height: 50px;\" />\r\n\r\n  <div style=\"padding-left: 10px; \">\r\n\r\n    <div style=\"font-size: 22px; font-weight: 400;\">\r\n      {{appConfig.appName}}\r\n    </div>\r\n\r\n    <!-- <div style=\"font-size: 20px; height: 25px; font-weight: 400;\" [ngStyle]=\"{'margin-top': dataService.appConfig.multitenant ? '12px' : ''}\">\r\n      {{appConfig.appName}}\r\n    </div> -->\r\n\r\n    <!-- <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px; margin-bottom: 5px;\">\r\n      {{tenantName}}\r\n    </div> -->\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <span class=\"toolbar-item-spacer\"></span>\r\n\r\n  <!-- buttons -->\r\n\r\n  <div *ngIf=\"dataService.appConfig.multitenant\" style=\"display: flex; align-items: center;\">\r\n\r\n    <!-- <label style=\"font-size: 14px;\">Hi, {{loggedUserFullName}}</label> -->\r\n\r\n    <button mat-icon-button (click)=\"redirectTo('home/tenancy/settings')\" matTooltip=\"Organisation Settings\">\r\n      <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon>\r\n    </button>\r\n    <label style=\"font-size: 14px;margin-right: 20px;\">{{tenantName}}</label>\r\n\r\n    <!-- Changed: Support/help icon removed \u2014 replaced by floating agent chat widget -->\r\n\r\n    <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"redirectTo('home/workflow/notifications')\" matTooltip=\"Notifications\">\r\n      <mat-icon [matBadge]=\"notificationCount$ | async\" [matBadgeHidden]=\"(notificationCount$ | async) === 0\" matBadgeColor=\"warn\" matBadgeSize=\"small\">notifications</mat-icon>\r\n    </button>\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <button mat-icon-button matTooltip=\"My Account\" [matMenuTriggerFor]=\"userAccountMenu\"><mat-icon>account_circle</mat-icon></button>\r\n  <label style=\"font-size: 14px;\">{{loggedUserFullName}}</label>\r\n\r\n  <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"logoff()\"  matTooltip=\"Signout\">\r\n    <mat-icon>logout</mat-icon>\r\n  </button>\r\n\r\n\r\n  <!-- my account menu -->\r\n  <mat-menu #userAccountMenu [overlapTrigger]=\"false\" yPosition=\"below\">\r\n\r\n\r\n    <button mat-menu-item routerLink=\"home/user/profile\">\r\n      <mat-icon>person</mat-icon><span>Profile</span>\r\n    </button>\r\n\r\n    <!-- Removed: Help menu item \u2014 replaced by floating assistant chat widget -->\r\n\r\n    <mat-divider></mat-divider>\r\n\r\n    <button mat-menu-item (click)=\"logoff()\">\r\n      <mat-icon>logout</mat-icon>Logout\r\n    </button>\r\n\r\n  </mat-menu>\r\n\r\n</mat-toolbar>\r\n\r\n\r\n\r\n\r\n<mat-sidenav-container class=\"app-container\" [hasBackdrop]=\"smallScreen\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n\r\n  <mat-sidenav #sidenav [mode]=\"smallScreen ? 'over' : 'side'\" [class.mat-elevation-z4]=\"true\" [opened]=\"isExpanded\"  class=\"app-sidenav side-color\" style=\"height: 100%;\"\r\n  [ngStyle]=\"{'width': dataService.appConfig.navWidth}\">\r\n    <mat-nav-list >\r\n\r\n      <ng-container *ngFor=\"let cap of dataService.appConfig.capItems\" >\r\n\r\n        <!-- Menu item \u2014 Added: isFeatureAllowed check for plan-based gating -->\r\n        <mat-list-item [routerLink]=\"cap.link\"  *ngIf=\"myRole[cap.name] && cap.showMenu && (!cap.capSubItems || cap.capSubItems && cap.ignoreSubsDisplay) && isFeatureAllowed(cap)\" style=\"height: 40px;font-size: 15px;\"\r\n        (click)=\"smallScreen ? toggle() : null\">\r\n          <mat-icon [ngStyle]=\"{'color': cap.color}\" style=\"margin-right: 5px;\">{{cap.icon}}</mat-icon>{{cap.display}}\r\n        </mat-list-item>\r\n\r\n        <!-- Menu With Sub items \u2014 Added: isFeatureAllowed check -->\r\n        <mat-expansion-panel class=\"side-color\" [class.mat-elevation-z0]=\"true\"  *ngIf=\"myRole[cap.name] && cap.showMenu && cap.capSubItems && !cap.ignoreSubsDisplay && isFeatureAllowed(cap)\">\r\n\r\n          <mat-expansion-panel-header style=\"height: 40px;padding-left: 15px;\">\r\n            <mat-icon [ngStyle]=\"{'color': cap.color}\" style=\"margin-right: 5px;\">{{cap.icon != 'navigate_next' ? cap.icon : 'fiber_manual_record' }}</mat-icon>{{cap.display}}\r\n          </mat-expansion-panel-header>\r\n\r\n          <!-- Sub items - Changed: Use ng-container to avoid blank spaces for hidden items -->\r\n          <mat-nav-list>\r\n            <ng-container *ngFor=\"let capSub of getSubItems(cap)\">\r\n              <mat-list-item [routerLink]=\"capSub.link\" style=\"height: 30px; font-size: 15px; padding-left: 4px; padding-right: 10px; margin-bottom: 5px;\" (click)=\"smallScreen ? toggle() : null\" *ngIf=\"myRole[capSub.name] && capSub.showMenu && isFeatureAllowed(capSub)\" [matTooltip]=\"capSub.display\" matTooltipPosition=\"right\">\r\n                <mat-icon [ngStyle]=\"{'color': capSub.color}\" style=\"margin-right: 5px;\">{{capSub.icon}}</mat-icon>{{capSub.display}}\r\n              </mat-list-item>\r\n            </ng-container>\r\n          </mat-nav-list>\r\n\r\n        </mat-expansion-panel>\r\n\r\n      </ng-container>\r\n\r\n    </mat-nav-list>\r\n  </mat-sidenav>\r\n\r\n\r\n\r\n  <mat-sidenav-content class=\"tin-bg-image\" style=\"padding: 0px 12px;\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n    <hr style=\"margin-top: 0px;\">\r\n    <router-outlet></router-outlet>\r\n    <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n  </mat-sidenav-content>\r\n\r\n</mat-sidenav-container>\r\n\r\n\r\n<!-- footer -->\r\n<div class=\"tin-center\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n  <label style=\"text-align: center; font-size: 12px;\">&copy; {{nowDate | date : 'yyyy'}} <a color=\"primary\" class=\"terms-link\" [href]=\"appConfig.siteUrl\" target=\"_blank\">{{footer}}</a> | <a color=\"primary\" class=\"terms-link\" style=\"cursor: pointer;\" (click)=\"openTerms()\">Terms</a> | <a color=\"primary\" class=\"terms-link\" style=\"cursor: pointer;\" (click)=\"openPrivacy()\">Privacy Policy</a></label>\r\n</div>\r\n\r\n\r\n<div class=\"tin-bg-image\" *ngIf=\"!loggedin && dataService.appConfig.navigation == 'side'\">\r\n  <router-outlet></router-outlet>\r\n  <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n</div>\r\n\r\n\r\n<!-- SIDE-MODERN -->\r\n\r\n<!-- Changed: Side-modern navigation layout -->\r\n<div class=\"sm-layout\"\r\n  *ngIf=\"loggedin && dataService.appConfig.navigation == 'side-modern'\"\r\n  [class.sm-mini]=\"isMiniSidebar && !isMiniHovered\"\r\n  [class.sm-mini-hovered]=\"isMiniSidebar && isMiniHovered\"\r\n  [class.sm-mobile-open]=\"smallScreen && isExpanded\">\r\n\r\n  <!-- Sidebar -->\r\n  <aside class=\"sm-sidebar\"\r\n    (mouseenter)=\"onMiniMouseEnter()\"\r\n    (mouseleave)=\"onMiniMouseLeave()\">\r\n\r\n    <!-- Background layers -->\r\n    <div class=\"sm-sidebar-bg\">\r\n      <div class=\"sm-sidebar-bg-image\" *ngIf=\"appConfig.navImage\" [ngStyle]=\"{'background-image': 'url(' + appConfig.navImage + ')'}\"></div>\r\n      <div class=\"sm-sidebar-bg-overlay\" [ngStyle]=\"{'background-color': appConfig.navColor}\"></div>\r\n    </div>\r\n\r\n    <!-- Sidebar content -->\r\n    <div class=\"sm-sidebar-content\">\r\n\r\n      <!-- Brand -->\r\n      <div class=\"sm-brand\">\r\n        <img *ngIf=\"appConfig.logo\" [src]=\"appConfig.logo\" alt=\"logo\" />\r\n        <span class=\"sm-brand-name\">{{appConfig.appName}}</span>\r\n      </div>\r\n\r\n      <mat-divider></mat-divider>\r\n\r\n      <!-- Profile -->\r\n      <div class=\"sm-profile\">\r\n        <mat-icon class=\"sm-profile-icon\">account_circle</mat-icon>\r\n        <div class=\"sm-profile-info\">\r\n          <div class=\"sm-profile-name\">{{loggedUserFullName}}</div>\r\n          <div class=\"sm-profile-role\">{{tenantName || 'User'}}</div>\r\n        </div>\r\n      </div>\r\n\r\n      <mat-divider></mat-divider>\r\n\r\n      <!-- Scrollable menu -->\r\n      <div class=\"sm-menu-scroll\">\r\n\r\n        <ng-container *ngFor=\"let cap of dataService.appConfig.capItems\">\r\n\r\n          <!-- Simple menu item (no sub-items or ignoring sub display) \u2014 Added: isFeatureAllowed check -->\r\n          <div *ngIf=\"myRole[cap.name] && cap.showMenu && (!cap.capSubItems || cap.ignoreSubsDisplay) && isFeatureAllowed(cap)\"\r\n            class=\"sm-menu-item\"\r\n            [class.sm-active]=\"isActiveRoute(cap.link)\"\r\n            (click)=\"modernNavigate(cap.link)\">\r\n            <mat-icon class=\"sm-menu-icon\">{{cap.icon != 'navigate_next' ? cap.icon : 'dashboard'}}</mat-icon>\r\n            <span class=\"sm-menu-text\">{{cap.display}}</span>\r\n          </div>\r\n\r\n          <!-- Parent menu item with sub-items \u2014 Added: isFeatureAllowed check -->\r\n          <ng-container *ngIf=\"myRole[cap.name] && cap.showMenu && cap.capSubItems && !cap.ignoreSubsDisplay && isFeatureAllowed(cap)\">\r\n\r\n            <!-- Parent item (toggles sub-menu) -->\r\n            <div class=\"sm-menu-item\"\r\n              [class.sm-active]=\"isParentActive(cap) && !isMenuOpen(cap.name)\"\r\n              (click)=\"toggleModernMenu(cap.name)\">\r\n              <mat-icon class=\"sm-menu-icon\">{{cap.icon != 'navigate_next' ? cap.icon : 'dashboard'}}</mat-icon>\r\n              <span class=\"sm-menu-text\">{{cap.display}}</span>\r\n              <mat-icon class=\"sm-caret\" [class.sm-caret-open]=\"isMenuOpen(cap.name)\">expand_more</mat-icon>\r\n            </div>\r\n\r\n            <!-- Sub-menu container (animated) -->\r\n            <div class=\"sm-submenu\" [class.sm-submenu-open]=\"isMenuOpen(cap.name)\">\r\n              <ng-container *ngFor=\"let sub of getSubItems(cap)\">\r\n                <div *ngIf=\"myRole[sub.name] && sub.showMenu && isFeatureAllowed(sub)\"\r\n                  class=\"sm-submenu-item\"\r\n                  [class.sm-active]=\"isActiveRoute(sub.link)\"\r\n                  (click)=\"modernNavigate(sub.link)\">\r\n                  <mat-icon *ngIf=\"sub.icon && sub.icon != 'navigate_next'\" class=\"sm-sub-icon\">{{sub.icon}}</mat-icon>\r\n                  <span *ngIf=\"!sub.icon || sub.icon == 'navigate_next'\" class=\"sm-initials\">{{getInitials(sub.display)}}</span>\r\n                  <span class=\"sm-menu-text\">{{sub.display}}</span>\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n\r\n          </ng-container>\r\n\r\n        </ng-container>\r\n\r\n      </div>\r\n\r\n    </div>\r\n  </aside>\r\n\r\n  <!-- Mobile backdrop -->\r\n  <div class=\"sm-backdrop\" (click)=\"isExpanded = false\"></div>\r\n\r\n  <!-- Main content -->\r\n  <div class=\"sm-main\">\r\n\r\n    <!-- Top bar - Changed: Added scroll class for frosted glass effect -->\r\n    <div class=\"sm-topbar\" [class.sm-topbar-scrolled]=\"topbarScrolled\">\r\n      <button mat-icon-button (click)=\"smallScreen ? toggle() : toggleMiniSidebar()\" matTooltip=\"Menu\">\r\n        <mat-icon>menu</mat-icon>\r\n      </button>\r\n\r\n      <!-- Changed: Mobile branding - show logo + app name when sidebar is hidden on small screens -->\r\n      <img *ngIf=\"smallScreen && appConfig.logo\" [src]=\"appConfig.logo\" alt=\"logo\" class=\"sm-topbar-logo\" />\r\n      <span *ngIf=\"smallScreen\" class=\"sm-topbar-brand\">{{appConfig.appName}}</span>\r\n\r\n      <span class=\"sm-topbar-spacer\"></span>\r\n\r\n      <!-- Multitenant buttons -->\r\n      <div *ngIf=\"dataService.appConfig.multitenant\" style=\"display: flex; align-items: center;\">\r\n        <button mat-icon-button (click)=\"redirectTo('home/tenancy/settings')\" matTooltip=\"Organisation Settings\">\r\n          <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon>\r\n        </button>\r\n        <span class=\"sm-topbar-label\">{{tenantName}}</span>\r\n\r\n        <!-- Changed: Support/help icon removed \u2014 replaced by floating agent chat widget -->\r\n\r\n        <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"redirectTo('home/workflow/notifications')\" matTooltip=\"Notifications\">\r\n          <mat-icon [matBadge]=\"notificationCount$ | async\" [matBadgeHidden]=\"(notificationCount$ | async) === 0\" matBadgeColor=\"warn\" matBadgeSize=\"small\">notifications</mat-icon>\r\n        </button>\r\n      </div>\r\n\r\n      <!-- Profile menu -->\r\n      <button mat-icon-button matTooltip=\"My Account\" [matMenuTriggerFor]=\"smProfileMenu\">\r\n        <mat-icon>account_circle</mat-icon>\r\n      </button>\r\n      <span class=\"sm-topbar-label\">{{loggedUserFullName}}</span>\r\n\r\n      <mat-menu #smProfileMenu=\"matMenu\" [overlapTrigger]=\"false\" yPosition=\"below\">\r\n        <button mat-menu-item routerLink=\"home/user/profile\">\r\n          <mat-icon>person</mat-icon><span>Profile</span>\r\n        </button>\r\n        <!-- Changed: Help menu item removed \u2014 replaced by floating agent chat widget -->\r\n        <mat-divider></mat-divider>\r\n        <button mat-menu-item (click)=\"logoff()\">\r\n          <mat-icon>logout</mat-icon>Logout\r\n        </button>\r\n      </mat-menu>\r\n\r\n      <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"logoff()\" matTooltip=\"Signout\">\r\n        <mat-icon>logout</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <!-- Page content - Changed: Replaced tin-bg-image with sm-content modern texture -->\r\n    <div class=\"sm-content\">\r\n      <router-outlet></router-outlet>\r\n      <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n    </div>\r\n\r\n    <!-- Footer -->\r\n    <div class=\"sm-footer\">\r\n      &copy; {{nowDate | date : 'yyyy'}} <a [href]=\"appConfig.siteUrl\" target=\"_blank\">{{footer}}</a> | <a (click)=\"openTerms()\">Terms</a> | <a (click)=\"openPrivacy()\">Privacy Policy</a>\r\n    </div>\r\n\r\n  </div>\r\n\r\n</div>\r\n\r\n<!-- Not logged in fallback for side-modern -->\r\n<div class=\"tin-bg-image\" *ngIf=\"!loggedin && dataService.appConfig.navigation == 'side-modern'\">\r\n  <router-outlet></router-outlet>\r\n  <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n</div>\r\n\r\n<!-- Changed: Cascading toast notifications for real-time entity changes \u2014 visible in all layouts -->\r\n<spa-toast *ngIf=\"loggedin && dataService.appConfig.multitenant\"></spa-toast>\r\n\r\n<!-- Changed: Floating agent chat widget \u2014 renamed from spa-assistant -->\r\n<spa-agent *ngIf=\"loggedin && dataService.appConfig.multitenant\"></spa-agent>", styles: ["a.navbar-brand{white-space:normal;text-align:center;word-break:break-all}html{font-size:14px}.box-shadow{box-shadow:0 .25rem .75rem #0000000d}.toolbar-item-spacer{flex:1 1 auto}.toolbar{height:60px;display:flex;align-items:center;background-color:#03a;color:#fff;margin-bottom:0!important}.toolbar button,.toolbar .mat-mdc-button,.toolbar .mat-mdc-icon-button{color:#fff!important}.toolbar mat-icon{color:#fff!important}.stack-top{z-index:9;margin:20px}.navitems{background-color:#03a}.app-container{height:90%;margin:0}.app-sidenav{width:200px;border:1px solid rgb(192,190,199)}.side-color{background-color:#e6f4ff}.app-sidenav mat-list-item{display:flex!important;align-items:center!important}.app-sidenav mat-icon{display:inline-flex!important;align-items:center!important;vertical-align:middle!important}.app-sidenav mat-expansion-panel-header mat-icon{display:inline-flex!important;align-items:center!important;vertical-align:middle!important}::ng-deep .app-sidenav .mat-expansion-panel-body{padding-bottom:5px!important;padding-right:5px!important}::ng-deep .app-sidenav .mdc-list{padding-bottom:0!important}.sm-layout{display:flex;min-height:100vh;position:relative}.sm-sidebar{position:fixed;top:0;left:0;bottom:0;width:260px;z-index:1030;overflow:hidden;transition:width .3s cubic-bezier(.4,0,.2,1)}.sm-sidebar-bg{position:absolute;inset:0;z-index:0}.sm-sidebar-bg-image{position:absolute;inset:0;background-size:cover;background-position:center}.sm-sidebar-bg-overlay{position:absolute;inset:0}.sm-sidebar-content{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;color:#fff}.sm-brand{display:flex;align-items:center;padding:18px 15px 10px;min-height:60px;text-decoration:none;white-space:nowrap;overflow:hidden}.sm-brand img{height:34px;width:34px;object-fit:contain;margin-right:12px;flex-shrink:0}.sm-brand-name{font-size:16px;font-weight:500;letter-spacing:.5px;color:#fff;overflow:hidden;text-overflow:ellipsis;transition:opacity .2s ease}.sm-profile{display:flex;align-items:center;padding:12px 15px;white-space:nowrap;overflow:hidden}.sm-profile-icon{font-size:34px!important;width:34px!important;height:34px!important;margin-right:12px;flex-shrink:0;color:#fffc}.sm-profile-info{overflow:hidden;transition:opacity .2s ease}.sm-profile-name{font-size:14px;font-weight:500;color:#fff;line-height:1.3;overflow:hidden;text-overflow:ellipsis}.sm-profile-role{font-size:11px;color:#fff9;line-height:1.3;overflow:hidden;text-overflow:ellipsis}.sm-sidebar mat-divider{border-color:#ffffff26!important;margin:0 15px}.sm-menu-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}.sm-menu-scroll::-webkit-scrollbar{width:4px}.sm-menu-scroll::-webkit-scrollbar-track{background:transparent}.sm-menu-scroll::-webkit-scrollbar-thumb{background:#fff3;border-radius:2px}.sm-menu-item{display:flex;align-items:center;padding:10px 15px;margin:2px 15px;border-radius:4px;cursor:pointer;color:#fff;font-size:13px;font-weight:400;letter-spacing:.3px;transition:all .15s ease;text-decoration:none;white-space:nowrap;overflow:hidden}.sm-menu-item:hover{background:#ffffff1f}.sm-menu-item.sm-active{background-color:#fff;color:#3c4858;box-shadow:0 4px 20px #00000024,0 7px 10px -5px #0003;font-weight:500}.sm-menu-item.sm-active .sm-menu-icon{color:#3c4858}.sm-menu-icon{font-size:20px!important;width:24px!important;height:24px!important;display:inline-flex!important;align-items:center;justify-content:center;margin-right:12px;flex-shrink:0;color:#fffc;transition:color .15s ease}.sm-menu-text{flex:1;overflow:hidden;text-overflow:ellipsis;transition:opacity .2s ease}.sm-caret{font-size:18px!important;width:18px!important;height:18px!important;transition:transform .3s cubic-bezier(.4,0,.2,1);flex-shrink:0;color:#fff9}.sm-caret.sm-caret-open{transform:rotate(180deg)}.sm-active .sm-caret{color:#3c4858}.sm-submenu{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1)}.sm-submenu.sm-submenu-open{max-height:1000px}.sm-submenu-item{display:flex;align-items:center;padding:8px 15px 8px 30px;margin:1px 15px;border-radius:4px;cursor:pointer;color:#fffc;font-size:12px;font-weight:400;transition:all .15s ease;white-space:nowrap;overflow:hidden}.sm-submenu-item:hover{background:#ffffff1f;color:#fff}.sm-submenu-item.sm-active{background-color:#fff;color:#3c4858;box-shadow:0 4px 20px #00000024,0 7px 10px -5px #0003;font-weight:500}.sm-submenu-item.sm-active .sm-sub-icon{color:#3c4858}.sm-sub-icon{font-size:16px!important;width:20px!important;height:20px!important;display:inline-flex!important;align-items:center;justify-content:center;margin-right:10px;flex-shrink:0;color:#fff9}.sm-initials{width:20px;height:20px;border-radius:50%;background:#ffffff26;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:600;margin-right:10px;flex-shrink:0;color:#fffc}.sm-active .sm-initials{background:#3c48581f;color:#3c4858}.sm-main{flex:1;min-width:0;margin-left:260px;min-height:100vh;display:flex;flex-direction:column;transition:margin-left .3s cubic-bezier(.4,0,.2,1);background-color:#eef2f7}.sm-topbar{display:flex;align-items:center;padding:8px 16px;min-height:56px;background-color:#eef2f7;background-image:radial-gradient(circle,#d5dbe3 1px,transparent 1px);background-size:16px 16px;border-bottom:1px solid rgba(0,0,0,.08);position:sticky;top:0;z-index:1020;transition:background .3s ease,backdrop-filter .3s ease}.sm-topbar-scrolled{background-color:#eef2f78c;background-image:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 1px 3px #0000000f}.sm-topbar-spacer{flex:1 1 auto}.sm-topbar-logo{height:32px;width:32px;object-fit:contain;margin-right:8px}.sm-topbar-brand{font-size:18px;font-weight:500;margin-right:8px;white-space:nowrap}.sm-topbar-label{font-size:14px;margin-right:4px;display:inline-flex;align-items:center;align-self:center;height:40px;line-height:1}.sm-topbar .mat-mdc-icon-button{display:inline-flex!important;align-items:center!important;justify-content:center!important}.sm-content{flex:1;padding:12px;min-width:0;background-color:#e5eaf2;background-image:radial-gradient(ellipse at 50% 45%,#fffffff2,#fff6 35%,#fff0 60%),radial-gradient(circle,#bec7d4 1px,transparent 1px);background-size:100% 100%,16px 16px;min-height:calc(100vh - 104px)}.sm-footer{padding:12px 16px;text-align:center;font-size:12px;color:#999;border-top:1px solid #e0e0e0;background:#fff}.sm-footer a{color:inherit;cursor:pointer}.sm-footer a:hover{text-decoration:underline}.sm-backdrop{display:none;position:fixed;inset:0;background:#00000080;z-index:1025}.sm-layout.sm-mini .sm-sidebar{width:80px}.sm-layout.sm-mini .sm-main{margin-left:80px}.sm-layout.sm-mini .sm-brand-name,.sm-layout.sm-mini .sm-profile-info,.sm-layout.sm-mini .sm-menu-text,.sm-layout.sm-mini .sm-caret,.sm-layout.sm-mini .sm-submenu{display:none}.sm-layout.sm-mini .sm-sidebar mat-divider{margin:0 10px}.sm-layout.sm-mini .sm-brand{justify-content:center;padding:18px 0 10px}.sm-layout.sm-mini .sm-brand img{margin-right:0}.sm-layout.sm-mini .sm-profile{justify-content:center;padding:12px 0}.sm-layout.sm-mini .sm-profile-icon{margin-right:0}.sm-layout.sm-mini .sm-menu-item{justify-content:center;padding:12px 0;margin:2px 0}.sm-layout.sm-mini .sm-menu-icon{margin-right:0;font-size:22px!important}.sm-layout.sm-mini-hovered .sm-sidebar{width:260px;box-shadow:4px 0 20px #0000004d}.sm-layout.sm-mini-hovered .sm-main{margin-left:80px}.sm-layout.sm-mini-hovered .sm-brand-name,.sm-layout.sm-mini-hovered .sm-profile-info,.sm-layout.sm-mini-hovered .sm-menu-text,.sm-layout.sm-mini-hovered .sm-caret{display:initial}.sm-layout.sm-mini-hovered .sm-submenu{display:block}.sm-layout.sm-mini-hovered .sm-sidebar mat-divider{margin:0 15px}.sm-layout.sm-mini-hovered .sm-brand{justify-content:flex-start;padding:18px 15px 10px}.sm-layout.sm-mini-hovered .sm-brand img{margin-right:12px}.sm-layout.sm-mini-hovered .sm-profile{justify-content:flex-start;padding:12px 15px}.sm-layout.sm-mini-hovered .sm-profile-icon{margin-right:12px}.sm-layout.sm-mini-hovered .sm-menu-item{justify-content:flex-start;padding:10px 15px;margin:2px 15px}.sm-layout.sm-mini-hovered .sm-menu-icon{margin-right:12px;font-size:20px!important}@media (max-width: 600px){.sm-sidebar{transform:translate(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);width:260px!important}.sm-layout.sm-mobile-open .sm-sidebar{transform:translate(0)}.sm-layout.sm-mobile-open .sm-backdrop{display:block}.sm-main{margin-left:0!important}.sm-layout.sm-mini .sm-sidebar{width:260px!important}.sm-layout.sm-mini .sm-brand-name,.sm-layout.sm-mini .sm-profile-info,.sm-layout.sm-mini .sm-menu-text,.sm-layout.sm-mini .sm-caret{display:initial}.sm-layout.sm-mini .sm-submenu{display:block}.sm-layout.sm-mini .sm-sidebar mat-divider{margin:0 15px}.sm-layout.sm-mini .sm-menu-item{justify-content:flex-start;padding:10px 15px;margin:2px 15px}.sm-layout.sm-mini .sm-menu-icon{margin-right:12px;font-size:20px!important}.sm-layout.sm-mini .sm-brand{justify-content:flex-start;padding:18px 15px 10px}.sm-layout.sm-mini .sm-brand img{margin-right:12px}.sm-layout.sm-mini .sm-profile{justify-content:flex-start;padding:12px 15px}.sm-layout.sm-mini .sm-profile-icon{margin-right:12px}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4$3.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i11.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i5.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i14.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i14.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i14.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i16.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i16.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i16.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: i17.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i18.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i18.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "component", type: LoaderComponent, selector: "spa-loader", inputs: ["logo"] }, { kind: "component", type: ToastComponent, selector: "spa-toast" }, { kind: "component", type: AgentComponent, selector: "spa-agent" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: NavMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-nav-menu', standalone: false, template: "<header *ngIf=\"loggedin && dataService.appConfig.navigation == 'top'\">\r\n\r\n  <!-- Changed: Removed mb-3 class to eliminate gap between toolbar and content -->\r\n  <nav class=\"toolbar navbar navbar-expand-sm navbar-toggleable-sm navbar-light border-bottom box-shadow\" style=\"padding-right: 10px;\">\r\n\r\n\r\n    <div class=\"container-fluid\" style=\"padding-right: 0px;\">\r\n\r\n      <img *ngIf=\"appConfig.logo!=''\" [src]=\"appConfig.logo\" style=\"height: 50px; margin-right: 2em\" />\r\n\r\n      <div>\r\n            <!-- <div style=\"font-size: 20px;\">\r\n              {{appConfig.appName}}\r\n            </div>\r\n\r\n            <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px;\">\r\n              {{tenantName}}\r\n            </div> -->\r\n\r\n        <div *ngIf=\"!dataService.appConfig.multitenant\" style=\"font-size: 22px;\">\r\n          {{appConfig.appName}}\r\n        </div>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant\" style=\"font-size: 20px; ; font-weight: 400;\" [ngStyle]=\"{'margin-top': dataService.appConfig.multitenant ? '12px' : ''}\">\r\n          {{appConfig.appName}}\r\n        </div>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px; margin-bottom: 5px;\">\r\n          {{tenantName}}\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n\r\n      <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\".navbar-collapse\" aria-label=\"Toggle navigation\" [attr.aria-expanded]=\"isExpanded\" (click)=\"toggle()\">\r\n        <span class=\"navbar-toggler-icon\"></span>\r\n      </button>\r\n\r\n      <div *ngIf=\"myRole\" class=\" navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse stack-top\" style=\"margin-right: 0px;\" [ngClass]=\"{ show: isExpanded, navitems: isExpanded }\" >\r\n\r\n        <button mat-icon-button (click)=\"logoff()\" > <mat-icon>logout</mat-icon> </button>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant\">\r\n\r\n          <button mat-icon-button (click)=\"redirectTo('home/admin/tenant-settings')\" > <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon> </button>\r\n\r\n          <!-- Removed: Support icon \u2014 replaced by floating assistant chat widget -->\r\n        </div>\r\n\r\n\r\n        <button id=\"btnUser\" mat-button [matMenuTriggerFor]=\"profileMenu\"  ><mat-icon style=\"font-size: 24px;\">account_circle</mat-icon>  &nbsp;{{loggedUserFullName}}</button>\r\n\r\n        <mat-menu #profileMenu=\"matMenu\">\r\n          <button id=\"btnProfile\" mat-menu-item (click)=\"redirectTo('home/user/profile')\" >Profile</button>\r\n          <button id=\"btnLogOff\" mat-menu-item (click)=\"logoff()\">Log Off</button>\r\n        </mat-menu>\r\n\r\n        <div *ngFor=\"let item of reversedCapItems\">\r\n\r\n          <!-- Menu Item \u2014 Added: isFeatureAllowed check for plan-based gating -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && !item.capSubItems && item.showMenu && isFeatureAllowed(item)\" mat-button (click)=\"redirectTo(item.link)\">{{item.display}}</button>\r\n\r\n          <!-- Menu Item with Sub items ignored \u2014 Added: isFeatureAllowed check -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && item.capSubItems && item.showMenu && item.ignoreSubsDisplay && isFeatureAllowed(item)\" mat-button (click)=\"redirectTo(item.link)\">{{item.display}}</button>\r\n\r\n          <!-- Menu Item with Sub items to display \u2014 Added: isFeatureAllowed check -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && item.capSubItems && item.showMenu && !item.ignoreSubsDisplay && isFeatureAllowed(item)\" mat-button [matMenuTriggerFor]=\"adminMenu\">{{item.display}}</button>\r\n\r\n\r\n          <!-- Sub Menu Items \u2014 Added: isFeatureAllowed check on sub-items -->\r\n          <mat-menu #adminMenu=\"matMenu\">\r\n\r\n            <div *ngFor=\"let subItem of item.capSubItems\">\r\n\r\n              <button *ngIf=\"myRole[subItem.name] && subItem.showMenu && isFeatureAllowed(subItem)\" mat-menu-item (click)=\"redirectTo(subItem.link)\">{{subItem.display}}</button>\r\n\r\n            </div>\r\n\r\n          </mat-menu>\r\n\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n    </div>\r\n\r\n  </nav>\r\n\r\n</header>\r\n\r\n<!-- Changed: Removed top/bottom padding to eliminate gaps, but kept left/right padding for content spacing -->\r\n<div class=\"container-fluid tin-bg-image\" *ngIf=\"dataService.appConfig.navigation == 'top'\" style=\"padding: 12px 12px; margin: 0;\">\r\n  <router-outlet></router-outlet>\r\n  <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<!-- SIDE -->\r\n<mat-toolbar class=\"tin-bg-image-toolbar\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\" style=\"padding: 0px 8px;\">\r\n\r\n  <button mat-icon-button (click)=\"toggle()\" matTooltip=\"Menu\">\r\n    <mat-icon>menu</mat-icon>\r\n  </button>\r\n\r\n  <img [src]=\"dataService.appConfig.logo\" style=\"height: 50px;\" />\r\n\r\n  <div style=\"padding-left: 10px; \">\r\n\r\n    <div style=\"font-size: 22px; font-weight: 400;\">\r\n      {{appConfig.appName}}\r\n    </div>\r\n\r\n    <!-- <div style=\"font-size: 20px; height: 25px; font-weight: 400;\" [ngStyle]=\"{'margin-top': dataService.appConfig.multitenant ? '12px' : ''}\">\r\n      {{appConfig.appName}}\r\n    </div> -->\r\n\r\n    <!-- <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px; margin-bottom: 5px;\">\r\n      {{tenantName}}\r\n    </div> -->\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <span class=\"toolbar-item-spacer\"></span>\r\n\r\n  <!-- buttons -->\r\n\r\n  <div *ngIf=\"dataService.appConfig.multitenant\" style=\"display: flex; align-items: center;\">\r\n\r\n    <!-- <label style=\"font-size: 14px;\">Hi, {{loggedUserFullName}}</label> -->\r\n\r\n    <button mat-icon-button (click)=\"redirectTo('home/admin/tenant-settings')\" matTooltip=\"Organisation Settings\">\r\n      <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon>\r\n    </button>\r\n    <label style=\"font-size: 14px;margin-right: 20px;\">{{tenantName}}</label>\r\n\r\n    <!-- Changed: Support/help icon removed \u2014 replaced by floating agent chat widget -->\r\n\r\n    <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"redirectTo('home/workflow/notifications')\" matTooltip=\"Notifications\">\r\n      <mat-icon [matBadge]=\"notificationCount$ | async\" [matBadgeHidden]=\"(notificationCount$ | async) === 0\" matBadgeColor=\"warn\" matBadgeSize=\"small\">notifications</mat-icon>\r\n    </button>\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <button mat-icon-button matTooltip=\"My Account\" [matMenuTriggerFor]=\"userAccountMenu\"><mat-icon>account_circle</mat-icon></button>\r\n  <label style=\"font-size: 14px;\">{{loggedUserFullName}}</label>\r\n\r\n  <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"logoff()\"  matTooltip=\"Signout\">\r\n    <mat-icon>logout</mat-icon>\r\n  </button>\r\n\r\n\r\n  <!-- my account menu -->\r\n  <mat-menu #userAccountMenu [overlapTrigger]=\"false\" yPosition=\"below\">\r\n\r\n\r\n    <button mat-menu-item routerLink=\"home/user/profile\">\r\n      <mat-icon>person</mat-icon><span>Profile</span>\r\n    </button>\r\n\r\n    <!-- Removed: Help menu item \u2014 replaced by floating assistant chat widget -->\r\n\r\n    <mat-divider></mat-divider>\r\n\r\n    <button mat-menu-item (click)=\"logoff()\">\r\n      <mat-icon>logout</mat-icon>Logout\r\n    </button>\r\n\r\n  </mat-menu>\r\n\r\n</mat-toolbar>\r\n\r\n\r\n\r\n\r\n<mat-sidenav-container class=\"app-container\" [hasBackdrop]=\"smallScreen\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n\r\n  <mat-sidenav #sidenav [mode]=\"smallScreen ? 'over' : 'side'\" [class.mat-elevation-z4]=\"true\" [opened]=\"isExpanded\"  class=\"app-sidenav side-color\" style=\"height: 100%;\"\r\n  [ngStyle]=\"{'width': dataService.appConfig.navWidth}\">\r\n    <mat-nav-list >\r\n\r\n      <ng-container *ngFor=\"let cap of dataService.appConfig.capItems\" >\r\n\r\n        <!-- Menu item \u2014 Added: isFeatureAllowed check for plan-based gating -->\r\n        <mat-list-item [routerLink]=\"cap.link\"  *ngIf=\"myRole[cap.name] && cap.showMenu && (!cap.capSubItems || cap.capSubItems && cap.ignoreSubsDisplay) && isFeatureAllowed(cap)\" style=\"height: 40px;font-size: 15px;\"\r\n        (click)=\"smallScreen ? toggle() : null\">\r\n          <mat-icon [ngStyle]=\"{'color': cap.color}\" style=\"margin-right: 5px;\">{{cap.icon}}</mat-icon>{{cap.display}}\r\n        </mat-list-item>\r\n\r\n        <!-- Menu With Sub items \u2014 Added: isFeatureAllowed check -->\r\n        <mat-expansion-panel class=\"side-color\" [class.mat-elevation-z0]=\"true\"  *ngIf=\"myRole[cap.name] && cap.showMenu && cap.capSubItems && !cap.ignoreSubsDisplay && isFeatureAllowed(cap)\">\r\n\r\n          <mat-expansion-panel-header style=\"height: 40px;padding-left: 15px;\">\r\n            <mat-icon [ngStyle]=\"{'color': cap.color}\" style=\"margin-right: 5px;\">{{cap.icon != 'navigate_next' ? cap.icon : 'fiber_manual_record' }}</mat-icon>{{cap.display}}\r\n          </mat-expansion-panel-header>\r\n\r\n          <!-- Sub items - Changed: Use ng-container to avoid blank spaces for hidden items -->\r\n          <mat-nav-list>\r\n            <ng-container *ngFor=\"let capSub of getSubItems(cap)\">\r\n              <mat-list-item [routerLink]=\"capSub.link\" style=\"height: 30px; font-size: 15px; padding-left: 4px; padding-right: 10px; margin-bottom: 5px;\" (click)=\"smallScreen ? toggle() : null\" *ngIf=\"myRole[capSub.name] && capSub.showMenu && isFeatureAllowed(capSub)\" [matTooltip]=\"capSub.display\" matTooltipPosition=\"right\">\r\n                <mat-icon [ngStyle]=\"{'color': capSub.color}\" style=\"margin-right: 5px;\">{{capSub.icon}}</mat-icon>{{capSub.display}}\r\n              </mat-list-item>\r\n            </ng-container>\r\n          </mat-nav-list>\r\n\r\n        </mat-expansion-panel>\r\n\r\n      </ng-container>\r\n\r\n    </mat-nav-list>\r\n  </mat-sidenav>\r\n\r\n\r\n\r\n  <mat-sidenav-content class=\"tin-bg-image\" style=\"padding: 0px 12px;\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n    <hr style=\"margin-top: 0px;\">\r\n    <router-outlet></router-outlet>\r\n    <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n  </mat-sidenav-content>\r\n\r\n</mat-sidenav-container>\r\n\r\n\r\n<!-- footer -->\r\n<div class=\"tin-center\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n  <label style=\"text-align: center; font-size: 12px;\">&copy; {{nowDate | date : 'yyyy'}} <a color=\"primary\" class=\"terms-link\" [href]=\"appConfig.siteUrl\" target=\"_blank\">{{footer}}</a> | <a color=\"primary\" class=\"terms-link\" style=\"cursor: pointer;\" (click)=\"openTerms()\">Terms</a> | <a color=\"primary\" class=\"terms-link\" style=\"cursor: pointer;\" (click)=\"openPrivacy()\">Privacy Policy</a></label>\r\n</div>\r\n\r\n\r\n<div class=\"tin-bg-image\" *ngIf=\"!loggedin && dataService.appConfig.navigation == 'side'\">\r\n  <router-outlet></router-outlet>\r\n  <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n</div>\r\n\r\n\r\n<!-- SIDE-MODERN -->\r\n\r\n<!-- Changed: Side-modern navigation layout -->\r\n<div class=\"sm-layout\"\r\n  *ngIf=\"loggedin && dataService.appConfig.navigation == 'side-modern'\"\r\n  [class.sm-mini]=\"isMiniSidebar && !isMiniHovered\"\r\n  [class.sm-mini-hovered]=\"isMiniSidebar && isMiniHovered\"\r\n  [class.sm-mobile-open]=\"smallScreen && isExpanded\">\r\n\r\n  <!-- Sidebar -->\r\n  <aside class=\"sm-sidebar\"\r\n    (mouseenter)=\"onMiniMouseEnter()\"\r\n    (mouseleave)=\"onMiniMouseLeave()\">\r\n\r\n    <!-- Background layers -->\r\n    <div class=\"sm-sidebar-bg\">\r\n      <div class=\"sm-sidebar-bg-image\" *ngIf=\"appConfig.navImage\" [ngStyle]=\"{'background-image': 'url(' + appConfig.navImage + ')'}\"></div>\r\n      <div class=\"sm-sidebar-bg-overlay\" [ngStyle]=\"{'background-color': appConfig.navColor}\"></div>\r\n    </div>\r\n\r\n    <!-- Sidebar content -->\r\n    <div class=\"sm-sidebar-content\">\r\n\r\n      <!-- Brand -->\r\n      <div class=\"sm-brand\">\r\n        <img *ngIf=\"appConfig.logo\" [src]=\"appConfig.logo\" alt=\"logo\" />\r\n        <span class=\"sm-brand-name\">{{appConfig.appName}}</span>\r\n      </div>\r\n\r\n      <mat-divider></mat-divider>\r\n\r\n      <!-- Profile -->\r\n      <div class=\"sm-profile\">\r\n        <mat-icon class=\"sm-profile-icon\">account_circle</mat-icon>\r\n        <div class=\"sm-profile-info\">\r\n          <div class=\"sm-profile-name\">{{loggedUserFullName}}</div>\r\n          <div class=\"sm-profile-role\">{{tenantName || 'User'}}</div>\r\n        </div>\r\n      </div>\r\n\r\n      <mat-divider></mat-divider>\r\n\r\n      <!-- Scrollable menu -->\r\n      <div class=\"sm-menu-scroll\">\r\n\r\n        <ng-container *ngFor=\"let cap of dataService.appConfig.capItems\">\r\n\r\n          <!-- Simple menu item (no sub-items or ignoring sub display) \u2014 Added: isFeatureAllowed check -->\r\n          <div *ngIf=\"myRole[cap.name] && cap.showMenu && (!cap.capSubItems || cap.ignoreSubsDisplay) && isFeatureAllowed(cap)\"\r\n            class=\"sm-menu-item\"\r\n            [class.sm-active]=\"isActiveRoute(cap.link)\"\r\n            (click)=\"modernNavigate(cap.link)\">\r\n            <mat-icon class=\"sm-menu-icon\">{{cap.icon != 'navigate_next' ? cap.icon : 'dashboard'}}</mat-icon>\r\n            <span class=\"sm-menu-text\">{{cap.display}}</span>\r\n          </div>\r\n\r\n          <!-- Parent menu item with sub-items \u2014 Added: isFeatureAllowed check -->\r\n          <ng-container *ngIf=\"myRole[cap.name] && cap.showMenu && cap.capSubItems && !cap.ignoreSubsDisplay && isFeatureAllowed(cap)\">\r\n\r\n            <!-- Parent item (toggles sub-menu) -->\r\n            <div class=\"sm-menu-item\"\r\n              [class.sm-active]=\"isParentActive(cap) && !isMenuOpen(cap.name)\"\r\n              (click)=\"toggleModernMenu(cap.name)\">\r\n              <mat-icon class=\"sm-menu-icon\">{{cap.icon != 'navigate_next' ? cap.icon : 'dashboard'}}</mat-icon>\r\n              <span class=\"sm-menu-text\">{{cap.display}}</span>\r\n              <mat-icon class=\"sm-caret\" [class.sm-caret-open]=\"isMenuOpen(cap.name)\">expand_more</mat-icon>\r\n            </div>\r\n\r\n            <!-- Sub-menu container (animated) -->\r\n            <div class=\"sm-submenu\" [class.sm-submenu-open]=\"isMenuOpen(cap.name)\">\r\n              <ng-container *ngFor=\"let sub of getSubItems(cap)\">\r\n                <div *ngIf=\"myRole[sub.name] && sub.showMenu && isFeatureAllowed(sub)\"\r\n                  class=\"sm-submenu-item\"\r\n                  [class.sm-active]=\"isActiveRoute(sub.link)\"\r\n                  (click)=\"modernNavigate(sub.link)\">\r\n                  <mat-icon *ngIf=\"sub.icon && sub.icon != 'navigate_next'\" class=\"sm-sub-icon\">{{sub.icon}}</mat-icon>\r\n                  <span *ngIf=\"!sub.icon || sub.icon == 'navigate_next'\" class=\"sm-initials\">{{getInitials(sub.display)}}</span>\r\n                  <span class=\"sm-menu-text\">{{sub.display}}</span>\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n\r\n          </ng-container>\r\n\r\n        </ng-container>\r\n\r\n      </div>\r\n\r\n    </div>\r\n  </aside>\r\n\r\n  <!-- Mobile backdrop -->\r\n  <div class=\"sm-backdrop\" (click)=\"isExpanded = false\"></div>\r\n\r\n  <!-- Main content -->\r\n  <div class=\"sm-main\">\r\n\r\n    <!-- Top bar - Changed: Added scroll class for frosted glass effect -->\r\n    <div class=\"sm-topbar\" [class.sm-topbar-scrolled]=\"topbarScrolled\">\r\n      <button mat-icon-button (click)=\"smallScreen ? toggle() : toggleMiniSidebar()\" matTooltip=\"Menu\">\r\n        <mat-icon>menu</mat-icon>\r\n      </button>\r\n\r\n      <!-- Changed: Mobile branding - show logo + app name when sidebar is hidden on small screens -->\r\n      <img *ngIf=\"smallScreen && appConfig.logo\" [src]=\"appConfig.logo\" alt=\"logo\" class=\"sm-topbar-logo\" />\r\n      <span *ngIf=\"smallScreen\" class=\"sm-topbar-brand\">{{appConfig.appName}}</span>\r\n\r\n      <span class=\"sm-topbar-spacer\"></span>\r\n\r\n      <!-- Multitenant buttons -->\r\n      <div *ngIf=\"dataService.appConfig.multitenant\" style=\"display: flex; align-items: center;\">\r\n        <button mat-icon-button (click)=\"redirectTo('home/admin/tenant-settings')\" matTooltip=\"Organisation Settings\">\r\n          <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon>\r\n        </button>\r\n        <span class=\"sm-topbar-label\">{{tenantName}}</span>\r\n\r\n        <!-- Changed: Support/help icon removed \u2014 replaced by floating agent chat widget -->\r\n\r\n        <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"redirectTo('home/workflow/notifications')\" matTooltip=\"Notifications\">\r\n          <mat-icon [matBadge]=\"notificationCount$ | async\" [matBadgeHidden]=\"(notificationCount$ | async) === 0\" matBadgeColor=\"warn\" matBadgeSize=\"small\">notifications</mat-icon>\r\n        </button>\r\n      </div>\r\n\r\n      <!-- Profile menu -->\r\n      <button mat-icon-button matTooltip=\"My Account\" [matMenuTriggerFor]=\"smProfileMenu\">\r\n        <mat-icon>account_circle</mat-icon>\r\n      </button>\r\n      <span class=\"sm-topbar-label\">{{loggedUserFullName}}</span>\r\n\r\n      <mat-menu #smProfileMenu=\"matMenu\" [overlapTrigger]=\"false\" yPosition=\"below\">\r\n        <button mat-menu-item routerLink=\"home/user/profile\">\r\n          <mat-icon>person</mat-icon><span>Profile</span>\r\n        </button>\r\n        <!-- Changed: Help menu item removed \u2014 replaced by floating agent chat widget -->\r\n        <mat-divider></mat-divider>\r\n        <button mat-menu-item (click)=\"logoff()\">\r\n          <mat-icon>logout</mat-icon>Logout\r\n        </button>\r\n      </mat-menu>\r\n\r\n      <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"logoff()\" matTooltip=\"Signout\">\r\n        <mat-icon>logout</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <!-- Page content - Changed: Replaced tin-bg-image with sm-content modern texture -->\r\n    <div class=\"sm-content\">\r\n      <router-outlet></router-outlet>\r\n      <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n    </div>\r\n\r\n    <!-- Footer -->\r\n    <div class=\"sm-footer\">\r\n      &copy; {{nowDate | date : 'yyyy'}} <a [href]=\"appConfig.siteUrl\" target=\"_blank\">{{footer}}</a> | <a (click)=\"openTerms()\">Terms</a> | <a (click)=\"openPrivacy()\">Privacy Policy</a>\r\n    </div>\r\n\r\n  </div>\r\n\r\n</div>\r\n\r\n<!-- Not logged in fallback for side-modern -->\r\n<div class=\"tin-bg-image\" *ngIf=\"!loggedin && dataService.appConfig.navigation == 'side-modern'\">\r\n  <router-outlet></router-outlet>\r\n  <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n</div>\r\n\r\n<!-- Changed: Cascading toast notifications for real-time entity changes \u2014 visible in all layouts -->\r\n<spa-toast *ngIf=\"loggedin && dataService.appConfig.multitenant\"></spa-toast>\r\n\r\n<!-- Changed: Floating agent chat widget \u2014 renamed from spa-assistant -->\r\n<spa-agent *ngIf=\"loggedin && dataService.appConfig.multitenant\"></spa-agent>", styles: ["a.navbar-brand{white-space:normal;text-align:center;word-break:break-all}html{font-size:14px}.box-shadow{box-shadow:0 .25rem .75rem #0000000d}.toolbar-item-spacer{flex:1 1 auto}.toolbar{height:60px;display:flex;align-items:center;background-color:#03a;color:#fff;margin-bottom:0!important}.toolbar button,.toolbar .mat-mdc-button,.toolbar .mat-mdc-icon-button{color:#fff!important}.toolbar mat-icon{color:#fff!important}.stack-top{z-index:9;margin:20px}.navitems{background-color:#03a}.app-container{height:90%;margin:0}.app-sidenav{width:200px;border:1px solid rgb(192,190,199)}.side-color{background-color:#e6f4ff}.app-sidenav mat-list-item{display:flex!important;align-items:center!important}.app-sidenav mat-icon{display:inline-flex!important;align-items:center!important;vertical-align:middle!important}.app-sidenav mat-expansion-panel-header mat-icon{display:inline-flex!important;align-items:center!important;vertical-align:middle!important}::ng-deep .app-sidenav .mat-expansion-panel-body{padding-bottom:5px!important;padding-right:5px!important}::ng-deep .app-sidenav .mdc-list{padding-bottom:0!important}.sm-layout{display:flex;min-height:100vh;position:relative}.sm-sidebar{position:fixed;top:0;left:0;bottom:0;width:260px;z-index:1030;overflow:hidden;transition:width .3s cubic-bezier(.4,0,.2,1)}.sm-sidebar-bg{position:absolute;inset:0;z-index:0}.sm-sidebar-bg-image{position:absolute;inset:0;background-size:cover;background-position:center}.sm-sidebar-bg-overlay{position:absolute;inset:0}.sm-sidebar-content{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;color:#fff}.sm-brand{display:flex;align-items:center;padding:18px 15px 10px;min-height:60px;text-decoration:none;white-space:nowrap;overflow:hidden}.sm-brand img{height:34px;width:34px;object-fit:contain;margin-right:12px;flex-shrink:0}.sm-brand-name{font-size:16px;font-weight:500;letter-spacing:.5px;color:#fff;overflow:hidden;text-overflow:ellipsis;transition:opacity .2s ease}.sm-profile{display:flex;align-items:center;padding:12px 15px;white-space:nowrap;overflow:hidden}.sm-profile-icon{font-size:34px!important;width:34px!important;height:34px!important;margin-right:12px;flex-shrink:0;color:#fffc}.sm-profile-info{overflow:hidden;transition:opacity .2s ease}.sm-profile-name{font-size:14px;font-weight:500;color:#fff;line-height:1.3;overflow:hidden;text-overflow:ellipsis}.sm-profile-role{font-size:11px;color:#fff9;line-height:1.3;overflow:hidden;text-overflow:ellipsis}.sm-sidebar mat-divider{border-color:#ffffff26!important;margin:0 15px}.sm-menu-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}.sm-menu-scroll::-webkit-scrollbar{width:4px}.sm-menu-scroll::-webkit-scrollbar-track{background:transparent}.sm-menu-scroll::-webkit-scrollbar-thumb{background:#fff3;border-radius:2px}.sm-menu-item{display:flex;align-items:center;padding:10px 15px;margin:2px 15px;border-radius:4px;cursor:pointer;color:#fff;font-size:13px;font-weight:400;letter-spacing:.3px;transition:all .15s ease;text-decoration:none;white-space:nowrap;overflow:hidden}.sm-menu-item:hover{background:#ffffff1f}.sm-menu-item.sm-active{background-color:#fff;color:#3c4858;box-shadow:0 4px 20px #00000024,0 7px 10px -5px #0003;font-weight:500}.sm-menu-item.sm-active .sm-menu-icon{color:#3c4858}.sm-menu-icon{font-size:20px!important;width:24px!important;height:24px!important;display:inline-flex!important;align-items:center;justify-content:center;margin-right:12px;flex-shrink:0;color:#fffc;transition:color .15s ease}.sm-menu-text{flex:1;overflow:hidden;text-overflow:ellipsis;transition:opacity .2s ease}.sm-caret{font-size:18px!important;width:18px!important;height:18px!important;transition:transform .3s cubic-bezier(.4,0,.2,1);flex-shrink:0;color:#fff9}.sm-caret.sm-caret-open{transform:rotate(180deg)}.sm-active .sm-caret{color:#3c4858}.sm-submenu{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1)}.sm-submenu.sm-submenu-open{max-height:1000px}.sm-submenu-item{display:flex;align-items:center;padding:8px 15px 8px 30px;margin:1px 15px;border-radius:4px;cursor:pointer;color:#fffc;font-size:12px;font-weight:400;transition:all .15s ease;white-space:nowrap;overflow:hidden}.sm-submenu-item:hover{background:#ffffff1f;color:#fff}.sm-submenu-item.sm-active{background-color:#fff;color:#3c4858;box-shadow:0 4px 20px #00000024,0 7px 10px -5px #0003;font-weight:500}.sm-submenu-item.sm-active .sm-sub-icon{color:#3c4858}.sm-sub-icon{font-size:16px!important;width:20px!important;height:20px!important;display:inline-flex!important;align-items:center;justify-content:center;margin-right:10px;flex-shrink:0;color:#fff9}.sm-initials{width:20px;height:20px;border-radius:50%;background:#ffffff26;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:600;margin-right:10px;flex-shrink:0;color:#fffc}.sm-active .sm-initials{background:#3c48581f;color:#3c4858}.sm-main{flex:1;min-width:0;margin-left:260px;min-height:100vh;display:flex;flex-direction:column;transition:margin-left .3s cubic-bezier(.4,0,.2,1);background-color:#eef2f7}.sm-topbar{display:flex;align-items:center;padding:8px 16px;min-height:56px;background-color:#eef2f7;background-image:radial-gradient(circle,#d5dbe3 1px,transparent 1px);background-size:16px 16px;border-bottom:1px solid rgba(0,0,0,.08);position:sticky;top:0;z-index:1020;transition:background .3s ease,backdrop-filter .3s ease}.sm-topbar-scrolled{background-color:#eef2f78c;background-image:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 1px 3px #0000000f}.sm-topbar-spacer{flex:1 1 auto}.sm-topbar-logo{height:32px;width:32px;object-fit:contain;margin-right:8px}.sm-topbar-brand{font-size:18px;font-weight:500;margin-right:8px;white-space:nowrap}.sm-topbar-label{font-size:14px;margin-right:4px;display:inline-flex;align-items:center;align-self:center;height:40px;line-height:1}.sm-topbar .mat-mdc-icon-button{display:inline-flex!important;align-items:center!important;justify-content:center!important}.sm-content{flex:1;padding:12px;min-width:0;background-color:#e5eaf2;background-image:radial-gradient(ellipse at 50% 45%,#fffffff2,#fff6 35%,#fff0 60%),radial-gradient(circle,#bec7d4 1px,transparent 1px);background-size:100% 100%,16px 16px;min-height:calc(100vh - 104px)}.sm-footer{padding:12px 16px;text-align:center;font-size:12px;color:#999;border-top:1px solid #e0e0e0;background:#fff}.sm-footer a{color:inherit;cursor:pointer}.sm-footer a:hover{text-decoration:underline}.sm-backdrop{display:none;position:fixed;inset:0;background:#00000080;z-index:1025}.sm-layout.sm-mini .sm-sidebar{width:80px}.sm-layout.sm-mini .sm-main{margin-left:80px}.sm-layout.sm-mini .sm-brand-name,.sm-layout.sm-mini .sm-profile-info,.sm-layout.sm-mini .sm-menu-text,.sm-layout.sm-mini .sm-caret,.sm-layout.sm-mini .sm-submenu{display:none}.sm-layout.sm-mini .sm-sidebar mat-divider{margin:0 10px}.sm-layout.sm-mini .sm-brand{justify-content:center;padding:18px 0 10px}.sm-layout.sm-mini .sm-brand img{margin-right:0}.sm-layout.sm-mini .sm-profile{justify-content:center;padding:12px 0}.sm-layout.sm-mini .sm-profile-icon{margin-right:0}.sm-layout.sm-mini .sm-menu-item{justify-content:center;padding:12px 0;margin:2px 0}.sm-layout.sm-mini .sm-menu-icon{margin-right:0;font-size:22px!important}.sm-layout.sm-mini-hovered .sm-sidebar{width:260px;box-shadow:4px 0 20px #0000004d}.sm-layout.sm-mini-hovered .sm-main{margin-left:80px}.sm-layout.sm-mini-hovered .sm-brand-name,.sm-layout.sm-mini-hovered .sm-profile-info,.sm-layout.sm-mini-hovered .sm-menu-text,.sm-layout.sm-mini-hovered .sm-caret{display:initial}.sm-layout.sm-mini-hovered .sm-submenu{display:block}.sm-layout.sm-mini-hovered .sm-sidebar mat-divider{margin:0 15px}.sm-layout.sm-mini-hovered .sm-brand{justify-content:flex-start;padding:18px 15px 10px}.sm-layout.sm-mini-hovered .sm-brand img{margin-right:12px}.sm-layout.sm-mini-hovered .sm-profile{justify-content:flex-start;padding:12px 15px}.sm-layout.sm-mini-hovered .sm-profile-icon{margin-right:12px}.sm-layout.sm-mini-hovered .sm-menu-item{justify-content:flex-start;padding:10px 15px;margin:2px 15px}.sm-layout.sm-mini-hovered .sm-menu-icon{margin-right:12px;font-size:20px!important}@media (max-width: 600px){.sm-sidebar{transform:translate(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);width:260px!important}.sm-layout.sm-mobile-open .sm-sidebar{transform:translate(0)}.sm-layout.sm-mobile-open .sm-backdrop{display:block}.sm-main{margin-left:0!important}.sm-layout.sm-mini .sm-sidebar{width:260px!important}.sm-layout.sm-mini .sm-brand-name,.sm-layout.sm-mini .sm-profile-info,.sm-layout.sm-mini .sm-menu-text,.sm-layout.sm-mini .sm-caret{display:initial}.sm-layout.sm-mini .sm-submenu{display:block}.sm-layout.sm-mini .sm-sidebar mat-divider{margin:0 15px}.sm-layout.sm-mini .sm-menu-item{justify-content:flex-start;padding:10px 15px;margin:2px 15px}.sm-layout.sm-mini .sm-menu-icon{margin-right:12px;font-size:20px!important}.sm-layout.sm-mini .sm-brand{justify-content:flex-start;padding:18px 15px 10px}.sm-layout.sm-mini .sm-brand img{margin-right:12px}.sm-layout.sm-mini .sm-profile{justify-content:flex-start;padding:12px 15px}.sm-layout.sm-mini .sm-profile-icon{margin-right:12px}}\n"] }]
+            args: [{ selector: 'spa-nav-menu', standalone: false, template: "<header *ngIf=\"loggedin && dataService.appConfig.navigation == 'top'\">\r\n\r\n  <!-- Changed: Removed mb-3 class to eliminate gap between toolbar and content -->\r\n  <nav class=\"toolbar navbar navbar-expand-sm navbar-toggleable-sm navbar-light border-bottom box-shadow\" style=\"padding-right: 10px;\">\r\n\r\n\r\n    <div class=\"container-fluid\" style=\"padding-right: 0px;\">\r\n\r\n      <img *ngIf=\"appConfig.logo!=''\" [src]=\"appConfig.logo\" style=\"height: 50px; margin-right: 2em\" />\r\n\r\n      <div>\r\n            <!-- <div style=\"font-size: 20px;\">\r\n              {{appConfig.appName}}\r\n            </div>\r\n\r\n            <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px;\">\r\n              {{tenantName}}\r\n            </div> -->\r\n\r\n        <div *ngIf=\"!dataService.appConfig.multitenant\" style=\"font-size: 22px;\">\r\n          {{appConfig.appName}}\r\n        </div>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant\" style=\"font-size: 20px; ; font-weight: 400;\" [ngStyle]=\"{'margin-top': dataService.appConfig.multitenant ? '12px' : ''}\">\r\n          {{appConfig.appName}}\r\n        </div>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px; margin-bottom: 5px;\">\r\n          {{tenantName}}\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n\r\n      <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\".navbar-collapse\" aria-label=\"Toggle navigation\" [attr.aria-expanded]=\"isExpanded\" (click)=\"toggle()\">\r\n        <span class=\"navbar-toggler-icon\"></span>\r\n      </button>\r\n\r\n      <div *ngIf=\"myRole\" class=\" navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse stack-top\" style=\"margin-right: 0px;\" [ngClass]=\"{ show: isExpanded, navitems: isExpanded }\" >\r\n\r\n        <button mat-icon-button (click)=\"logoff()\" > <mat-icon>logout</mat-icon> </button>\r\n\r\n        <div *ngIf=\"dataService.appConfig.multitenant\">\r\n\r\n          <button mat-icon-button (click)=\"redirectTo('home/tenancy/settings')\" > <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon> </button>\r\n\r\n          <!-- Removed: Support icon \u2014 replaced by floating assistant chat widget -->\r\n        </div>\r\n\r\n\r\n        <button id=\"btnUser\" mat-button [matMenuTriggerFor]=\"profileMenu\"  ><mat-icon style=\"font-size: 24px;\">account_circle</mat-icon>  &nbsp;{{loggedUserFullName}}</button>\r\n\r\n        <mat-menu #profileMenu=\"matMenu\">\r\n          <button id=\"btnProfile\" mat-menu-item (click)=\"redirectTo('home/user/profile')\" >Profile</button>\r\n          <button id=\"btnLogOff\" mat-menu-item (click)=\"logoff()\">Log Off</button>\r\n        </mat-menu>\r\n\r\n        <div *ngFor=\"let item of reversedCapItems\">\r\n\r\n          <!-- Menu Item \u2014 Added: isFeatureAllowed check for plan-based gating -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && !item.capSubItems && item.showMenu && isFeatureAllowed(item)\" mat-button (click)=\"redirectTo(item.link)\">{{item.display}}</button>\r\n\r\n          <!-- Menu Item with Sub items ignored \u2014 Added: isFeatureAllowed check -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && item.capSubItems && item.showMenu && item.ignoreSubsDisplay && isFeatureAllowed(item)\" mat-button (click)=\"redirectTo(item.link)\">{{item.display}}</button>\r\n\r\n          <!-- Menu Item with Sub items to display \u2014 Added: isFeatureAllowed check -->\r\n          <button id=\"btnMenu\" *ngIf=\"myRole[item.name] && item.capSubItems && item.showMenu && !item.ignoreSubsDisplay && isFeatureAllowed(item)\" mat-button [matMenuTriggerFor]=\"adminMenu\">{{item.display}}</button>\r\n\r\n\r\n          <!-- Sub Menu Items \u2014 Added: isFeatureAllowed check on sub-items -->\r\n          <mat-menu #adminMenu=\"matMenu\">\r\n\r\n            <div *ngFor=\"let subItem of item.capSubItems\">\r\n\r\n              <button *ngIf=\"myRole[subItem.name] && subItem.showMenu && isFeatureAllowed(subItem)\" mat-menu-item (click)=\"redirectTo(subItem.link)\">{{subItem.display}}</button>\r\n\r\n            </div>\r\n\r\n          </mat-menu>\r\n\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n    </div>\r\n\r\n  </nav>\r\n\r\n</header>\r\n\r\n<!-- Changed: Removed top/bottom padding to eliminate gaps, but kept left/right padding for content spacing -->\r\n<div class=\"container-fluid tin-bg-image\" *ngIf=\"dataService.appConfig.navigation == 'top'\" style=\"padding: 12px 12px; margin: 0;\">\r\n  <router-outlet></router-outlet>\r\n  <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n<!-- SIDE -->\r\n<mat-toolbar class=\"tin-bg-image-toolbar\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\" style=\"padding: 0px 8px;\">\r\n\r\n  <button mat-icon-button (click)=\"toggle()\" matTooltip=\"Menu\">\r\n    <mat-icon>menu</mat-icon>\r\n  </button>\r\n\r\n  <img [src]=\"dataService.appConfig.logo\" style=\"height: 50px;\" />\r\n\r\n  <div style=\"padding-left: 10px; \">\r\n\r\n    <div style=\"font-size: 22px; font-weight: 400;\">\r\n      {{appConfig.appName}}\r\n    </div>\r\n\r\n    <!-- <div style=\"font-size: 20px; height: 25px; font-weight: 400;\" [ngStyle]=\"{'margin-top': dataService.appConfig.multitenant ? '12px' : ''}\">\r\n      {{appConfig.appName}}\r\n    </div> -->\r\n\r\n    <!-- <div *ngIf=\"dataService.appConfig.multitenant && tenantName\" style=\"font-size: 12px; margin-bottom: 5px;\">\r\n      {{tenantName}}\r\n    </div> -->\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <span class=\"toolbar-item-spacer\"></span>\r\n\r\n  <!-- buttons -->\r\n\r\n  <div *ngIf=\"dataService.appConfig.multitenant\" style=\"display: flex; align-items: center;\">\r\n\r\n    <!-- <label style=\"font-size: 14px;\">Hi, {{loggedUserFullName}}</label> -->\r\n\r\n    <button mat-icon-button (click)=\"redirectTo('home/tenancy/settings')\" matTooltip=\"Organisation Settings\">\r\n      <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon>\r\n    </button>\r\n    <label style=\"font-size: 14px;margin-right: 20px;\">{{tenantName}}</label>\r\n\r\n    <!-- Changed: Support/help icon removed \u2014 replaced by floating agent chat widget -->\r\n\r\n    <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"redirectTo('home/workflow/notifications')\" matTooltip=\"Notifications\">\r\n      <mat-icon [matBadge]=\"notificationCount$ | async\" [matBadgeHidden]=\"(notificationCount$ | async) === 0\" matBadgeColor=\"warn\" matBadgeSize=\"small\">notifications</mat-icon>\r\n    </button>\r\n\r\n  </div>\r\n\r\n\r\n\r\n  <button mat-icon-button matTooltip=\"My Account\" [matMenuTriggerFor]=\"userAccountMenu\"><mat-icon>account_circle</mat-icon></button>\r\n  <label style=\"font-size: 14px;\">{{loggedUserFullName}}</label>\r\n\r\n  <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"logoff()\"  matTooltip=\"Signout\">\r\n    <mat-icon>logout</mat-icon>\r\n  </button>\r\n\r\n\r\n  <!-- my account menu -->\r\n  <mat-menu #userAccountMenu [overlapTrigger]=\"false\" yPosition=\"below\">\r\n\r\n\r\n    <button mat-menu-item routerLink=\"home/user/profile\">\r\n      <mat-icon>person</mat-icon><span>Profile</span>\r\n    </button>\r\n\r\n    <!-- Removed: Help menu item \u2014 replaced by floating assistant chat widget -->\r\n\r\n    <mat-divider></mat-divider>\r\n\r\n    <button mat-menu-item (click)=\"logoff()\">\r\n      <mat-icon>logout</mat-icon>Logout\r\n    </button>\r\n\r\n  </mat-menu>\r\n\r\n</mat-toolbar>\r\n\r\n\r\n\r\n\r\n<mat-sidenav-container class=\"app-container\" [hasBackdrop]=\"smallScreen\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n\r\n  <mat-sidenav #sidenav [mode]=\"smallScreen ? 'over' : 'side'\" [class.mat-elevation-z4]=\"true\" [opened]=\"isExpanded\"  class=\"app-sidenav side-color\" style=\"height: 100%;\"\r\n  [ngStyle]=\"{'width': dataService.appConfig.navWidth}\">\r\n    <mat-nav-list >\r\n\r\n      <ng-container *ngFor=\"let cap of dataService.appConfig.capItems\" >\r\n\r\n        <!-- Menu item \u2014 Added: isFeatureAllowed check for plan-based gating -->\r\n        <mat-list-item [routerLink]=\"cap.link\"  *ngIf=\"myRole[cap.name] && cap.showMenu && (!cap.capSubItems || cap.capSubItems && cap.ignoreSubsDisplay) && isFeatureAllowed(cap)\" style=\"height: 40px;font-size: 15px;\"\r\n        (click)=\"smallScreen ? toggle() : null\">\r\n          <mat-icon [ngStyle]=\"{'color': cap.color}\" style=\"margin-right: 5px;\">{{cap.icon}}</mat-icon>{{cap.display}}\r\n        </mat-list-item>\r\n\r\n        <!-- Menu With Sub items \u2014 Added: isFeatureAllowed check -->\r\n        <mat-expansion-panel class=\"side-color\" [class.mat-elevation-z0]=\"true\"  *ngIf=\"myRole[cap.name] && cap.showMenu && cap.capSubItems && !cap.ignoreSubsDisplay && isFeatureAllowed(cap)\">\r\n\r\n          <mat-expansion-panel-header style=\"height: 40px;padding-left: 15px;\">\r\n            <mat-icon [ngStyle]=\"{'color': cap.color}\" style=\"margin-right: 5px;\">{{cap.icon != 'navigate_next' ? cap.icon : 'fiber_manual_record' }}</mat-icon>{{cap.display}}\r\n          </mat-expansion-panel-header>\r\n\r\n          <!-- Sub items - Changed: Use ng-container to avoid blank spaces for hidden items -->\r\n          <mat-nav-list>\r\n            <ng-container *ngFor=\"let capSub of getSubItems(cap)\">\r\n              <mat-list-item [routerLink]=\"capSub.link\" style=\"height: 30px; font-size: 15px; padding-left: 4px; padding-right: 10px; margin-bottom: 5px;\" (click)=\"smallScreen ? toggle() : null\" *ngIf=\"myRole[capSub.name] && capSub.showMenu && isFeatureAllowed(capSub)\" [matTooltip]=\"capSub.display\" matTooltipPosition=\"right\">\r\n                <mat-icon [ngStyle]=\"{'color': capSub.color}\" style=\"margin-right: 5px;\">{{capSub.icon}}</mat-icon>{{capSub.display}}\r\n              </mat-list-item>\r\n            </ng-container>\r\n          </mat-nav-list>\r\n\r\n        </mat-expansion-panel>\r\n\r\n      </ng-container>\r\n\r\n    </mat-nav-list>\r\n  </mat-sidenav>\r\n\r\n\r\n\r\n  <mat-sidenav-content class=\"tin-bg-image\" style=\"padding: 0px 12px;\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n    <hr style=\"margin-top: 0px;\">\r\n    <router-outlet></router-outlet>\r\n    <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n  </mat-sidenav-content>\r\n\r\n</mat-sidenav-container>\r\n\r\n\r\n<!-- footer -->\r\n<div class=\"tin-center\" *ngIf=\"loggedin && dataService.appConfig.navigation == 'side'\">\r\n  <label style=\"text-align: center; font-size: 12px;\">&copy; {{nowDate | date : 'yyyy'}} <a color=\"primary\" class=\"terms-link\" [href]=\"appConfig.siteUrl\" target=\"_blank\">{{footer}}</a> | <a color=\"primary\" class=\"terms-link\" style=\"cursor: pointer;\" (click)=\"openTerms()\">Terms</a> | <a color=\"primary\" class=\"terms-link\" style=\"cursor: pointer;\" (click)=\"openPrivacy()\">Privacy Policy</a></label>\r\n</div>\r\n\r\n\r\n<div class=\"tin-bg-image\" *ngIf=\"!loggedin && dataService.appConfig.navigation == 'side'\">\r\n  <router-outlet></router-outlet>\r\n  <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n</div>\r\n\r\n\r\n<!-- SIDE-MODERN -->\r\n\r\n<!-- Changed: Side-modern navigation layout -->\r\n<div class=\"sm-layout\"\r\n  *ngIf=\"loggedin && dataService.appConfig.navigation == 'side-modern'\"\r\n  [class.sm-mini]=\"isMiniSidebar && !isMiniHovered\"\r\n  [class.sm-mini-hovered]=\"isMiniSidebar && isMiniHovered\"\r\n  [class.sm-mobile-open]=\"smallScreen && isExpanded\">\r\n\r\n  <!-- Sidebar -->\r\n  <aside class=\"sm-sidebar\"\r\n    (mouseenter)=\"onMiniMouseEnter()\"\r\n    (mouseleave)=\"onMiniMouseLeave()\">\r\n\r\n    <!-- Background layers -->\r\n    <div class=\"sm-sidebar-bg\">\r\n      <div class=\"sm-sidebar-bg-image\" *ngIf=\"appConfig.navImage\" [ngStyle]=\"{'background-image': 'url(' + appConfig.navImage + ')'}\"></div>\r\n      <div class=\"sm-sidebar-bg-overlay\" [ngStyle]=\"{'background-color': appConfig.navColor}\"></div>\r\n    </div>\r\n\r\n    <!-- Sidebar content -->\r\n    <div class=\"sm-sidebar-content\">\r\n\r\n      <!-- Brand -->\r\n      <div class=\"sm-brand\">\r\n        <img *ngIf=\"appConfig.logo\" [src]=\"appConfig.logo\" alt=\"logo\" />\r\n        <span class=\"sm-brand-name\">{{appConfig.appName}}</span>\r\n      </div>\r\n\r\n      <mat-divider></mat-divider>\r\n\r\n      <!-- Profile -->\r\n      <div class=\"sm-profile\">\r\n        <mat-icon class=\"sm-profile-icon\">account_circle</mat-icon>\r\n        <div class=\"sm-profile-info\">\r\n          <div class=\"sm-profile-name\">{{loggedUserFullName}}</div>\r\n          <div class=\"sm-profile-role\">{{tenantName || 'User'}}</div>\r\n        </div>\r\n      </div>\r\n\r\n      <mat-divider></mat-divider>\r\n\r\n      <!-- Scrollable menu -->\r\n      <div class=\"sm-menu-scroll\">\r\n\r\n        <ng-container *ngFor=\"let cap of dataService.appConfig.capItems\">\r\n\r\n          <!-- Simple menu item (no sub-items or ignoring sub display) \u2014 Added: isFeatureAllowed check -->\r\n          <div *ngIf=\"myRole[cap.name] && cap.showMenu && (!cap.capSubItems || cap.ignoreSubsDisplay) && isFeatureAllowed(cap)\"\r\n            class=\"sm-menu-item\"\r\n            [class.sm-active]=\"isActiveRoute(cap.link)\"\r\n            (click)=\"modernNavigate(cap.link)\">\r\n            <mat-icon class=\"sm-menu-icon\">{{cap.icon != 'navigate_next' ? cap.icon : 'dashboard'}}</mat-icon>\r\n            <span class=\"sm-menu-text\">{{cap.display}}</span>\r\n          </div>\r\n\r\n          <!-- Parent menu item with sub-items \u2014 Added: isFeatureAllowed check -->\r\n          <ng-container *ngIf=\"myRole[cap.name] && cap.showMenu && cap.capSubItems && !cap.ignoreSubsDisplay && isFeatureAllowed(cap)\">\r\n\r\n            <!-- Parent item (toggles sub-menu) -->\r\n            <div class=\"sm-menu-item\"\r\n              [class.sm-active]=\"isParentActive(cap) && !isMenuOpen(cap.name)\"\r\n              (click)=\"toggleModernMenu(cap.name)\">\r\n              <mat-icon class=\"sm-menu-icon\">{{cap.icon != 'navigate_next' ? cap.icon : 'dashboard'}}</mat-icon>\r\n              <span class=\"sm-menu-text\">{{cap.display}}</span>\r\n              <mat-icon class=\"sm-caret\" [class.sm-caret-open]=\"isMenuOpen(cap.name)\">expand_more</mat-icon>\r\n            </div>\r\n\r\n            <!-- Sub-menu container (animated) -->\r\n            <div class=\"sm-submenu\" [class.sm-submenu-open]=\"isMenuOpen(cap.name)\">\r\n              <ng-container *ngFor=\"let sub of getSubItems(cap)\">\r\n                <div *ngIf=\"myRole[sub.name] && sub.showMenu && isFeatureAllowed(sub)\"\r\n                  class=\"sm-submenu-item\"\r\n                  [class.sm-active]=\"isActiveRoute(sub.link)\"\r\n                  (click)=\"modernNavigate(sub.link)\">\r\n                  <mat-icon *ngIf=\"sub.icon && sub.icon != 'navigate_next'\" class=\"sm-sub-icon\">{{sub.icon}}</mat-icon>\r\n                  <span *ngIf=\"!sub.icon || sub.icon == 'navigate_next'\" class=\"sm-initials\">{{getInitials(sub.display)}}</span>\r\n                  <span class=\"sm-menu-text\">{{sub.display}}</span>\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n\r\n          </ng-container>\r\n\r\n        </ng-container>\r\n\r\n      </div>\r\n\r\n    </div>\r\n  </aside>\r\n\r\n  <!-- Mobile backdrop -->\r\n  <div class=\"sm-backdrop\" (click)=\"isExpanded = false\"></div>\r\n\r\n  <!-- Main content -->\r\n  <div class=\"sm-main\">\r\n\r\n    <!-- Top bar - Changed: Added scroll class for frosted glass effect -->\r\n    <div class=\"sm-topbar\" [class.sm-topbar-scrolled]=\"topbarScrolled\">\r\n      <button mat-icon-button (click)=\"smallScreen ? toggle() : toggleMiniSidebar()\" matTooltip=\"Menu\">\r\n        <mat-icon>menu</mat-icon>\r\n      </button>\r\n\r\n      <!-- Changed: Mobile branding - show logo + app name when sidebar is hidden on small screens -->\r\n      <img *ngIf=\"smallScreen && appConfig.logo\" [src]=\"appConfig.logo\" alt=\"logo\" class=\"sm-topbar-logo\" />\r\n      <span *ngIf=\"smallScreen\" class=\"sm-topbar-brand\">{{appConfig.appName}}</span>\r\n\r\n      <span class=\"sm-topbar-spacer\"></span>\r\n\r\n      <!-- Multitenant buttons -->\r\n      <div *ngIf=\"dataService.appConfig.multitenant\" style=\"display: flex; align-items: center;\">\r\n        <button mat-icon-button (click)=\"redirectTo('home/tenancy/settings')\" matTooltip=\"Organisation Settings\">\r\n          <mat-icon fontSet=\"material-icons-round\">apartment</mat-icon>\r\n        </button>\r\n        <span class=\"sm-topbar-label\">{{tenantName}}</span>\r\n\r\n        <!-- Changed: Support/help icon removed \u2014 replaced by floating agent chat widget -->\r\n\r\n        <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"redirectTo('home/workflow/notifications')\" matTooltip=\"Notifications\">\r\n          <mat-icon [matBadge]=\"notificationCount$ | async\" [matBadgeHidden]=\"(notificationCount$ | async) === 0\" matBadgeColor=\"warn\" matBadgeSize=\"small\">notifications</mat-icon>\r\n        </button>\r\n      </div>\r\n\r\n      <!-- Profile menu -->\r\n      <button mat-icon-button matTooltip=\"My Account\" [matMenuTriggerFor]=\"smProfileMenu\">\r\n        <mat-icon>account_circle</mat-icon>\r\n      </button>\r\n      <span class=\"sm-topbar-label\">{{loggedUserFullName}}</span>\r\n\r\n      <mat-menu #smProfileMenu=\"matMenu\" [overlapTrigger]=\"false\" yPosition=\"below\">\r\n        <button mat-menu-item routerLink=\"home/user/profile\">\r\n          <mat-icon>person</mat-icon><span>Profile</span>\r\n        </button>\r\n        <!-- Changed: Help menu item removed \u2014 replaced by floating agent chat widget -->\r\n        <mat-divider></mat-divider>\r\n        <button mat-menu-item (click)=\"logoff()\">\r\n          <mat-icon>logout</mat-icon>Logout\r\n        </button>\r\n      </mat-menu>\r\n\r\n      <button *ngIf=\"!smallScreen\" mat-icon-button (click)=\"logoff()\" matTooltip=\"Signout\">\r\n        <mat-icon>logout</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <!-- Page content - Changed: Replaced tin-bg-image with sm-content modern texture -->\r\n    <div class=\"sm-content\">\r\n      <router-outlet></router-outlet>\r\n      <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n    </div>\r\n\r\n    <!-- Footer -->\r\n    <div class=\"sm-footer\">\r\n      &copy; {{nowDate | date : 'yyyy'}} <a [href]=\"appConfig.siteUrl\" target=\"_blank\">{{footer}}</a> | <a (click)=\"openTerms()\">Terms</a> | <a (click)=\"openPrivacy()\">Privacy Policy</a>\r\n    </div>\r\n\r\n  </div>\r\n\r\n</div>\r\n\r\n<!-- Not logged in fallback for side-modern -->\r\n<div class=\"tin-bg-image\" *ngIf=\"!loggedin && dataService.appConfig.navigation == 'side-modern'\">\r\n  <router-outlet></router-outlet>\r\n  <spa-loader [logo]=\"this.dataService.appConfig.logo\"></spa-loader>\r\n</div>\r\n\r\n<!-- Changed: Cascading toast notifications for real-time entity changes \u2014 visible in all layouts -->\r\n<spa-toast *ngIf=\"loggedin && dataService.appConfig.multitenant\"></spa-toast>\r\n\r\n<!-- Changed: Floating agent chat widget \u2014 renamed from spa-assistant -->\r\n<spa-agent *ngIf=\"loggedin && dataService.appConfig.multitenant\"></spa-agent>", styles: ["a.navbar-brand{white-space:normal;text-align:center;word-break:break-all}html{font-size:14px}.box-shadow{box-shadow:0 .25rem .75rem #0000000d}.toolbar-item-spacer{flex:1 1 auto}.toolbar{height:60px;display:flex;align-items:center;background-color:#03a;color:#fff;margin-bottom:0!important}.toolbar button,.toolbar .mat-mdc-button,.toolbar .mat-mdc-icon-button{color:#fff!important}.toolbar mat-icon{color:#fff!important}.stack-top{z-index:9;margin:20px}.navitems{background-color:#03a}.app-container{height:90%;margin:0}.app-sidenav{width:200px;border:1px solid rgb(192,190,199)}.side-color{background-color:#e6f4ff}.app-sidenav mat-list-item{display:flex!important;align-items:center!important}.app-sidenav mat-icon{display:inline-flex!important;align-items:center!important;vertical-align:middle!important}.app-sidenav mat-expansion-panel-header mat-icon{display:inline-flex!important;align-items:center!important;vertical-align:middle!important}::ng-deep .app-sidenav .mat-expansion-panel-body{padding-bottom:5px!important;padding-right:5px!important}::ng-deep .app-sidenav .mdc-list{padding-bottom:0!important}.sm-layout{display:flex;min-height:100vh;position:relative}.sm-sidebar{position:fixed;top:0;left:0;bottom:0;width:260px;z-index:1030;overflow:hidden;transition:width .3s cubic-bezier(.4,0,.2,1)}.sm-sidebar-bg{position:absolute;inset:0;z-index:0}.sm-sidebar-bg-image{position:absolute;inset:0;background-size:cover;background-position:center}.sm-sidebar-bg-overlay{position:absolute;inset:0}.sm-sidebar-content{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;color:#fff}.sm-brand{display:flex;align-items:center;padding:18px 15px 10px;min-height:60px;text-decoration:none;white-space:nowrap;overflow:hidden}.sm-brand img{height:34px;width:34px;object-fit:contain;margin-right:12px;flex-shrink:0}.sm-brand-name{font-size:16px;font-weight:500;letter-spacing:.5px;color:#fff;overflow:hidden;text-overflow:ellipsis;transition:opacity .2s ease}.sm-profile{display:flex;align-items:center;padding:12px 15px;white-space:nowrap;overflow:hidden}.sm-profile-icon{font-size:34px!important;width:34px!important;height:34px!important;margin-right:12px;flex-shrink:0;color:#fffc}.sm-profile-info{overflow:hidden;transition:opacity .2s ease}.sm-profile-name{font-size:14px;font-weight:500;color:#fff;line-height:1.3;overflow:hidden;text-overflow:ellipsis}.sm-profile-role{font-size:11px;color:#fff9;line-height:1.3;overflow:hidden;text-overflow:ellipsis}.sm-sidebar mat-divider{border-color:#ffffff26!important;margin:0 15px}.sm-menu-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}.sm-menu-scroll::-webkit-scrollbar{width:4px}.sm-menu-scroll::-webkit-scrollbar-track{background:transparent}.sm-menu-scroll::-webkit-scrollbar-thumb{background:#fff3;border-radius:2px}.sm-menu-item{display:flex;align-items:center;padding:10px 15px;margin:2px 15px;border-radius:4px;cursor:pointer;color:#fff;font-size:13px;font-weight:400;letter-spacing:.3px;transition:all .15s ease;text-decoration:none;white-space:nowrap;overflow:hidden}.sm-menu-item:hover{background:#ffffff1f}.sm-menu-item.sm-active{background-color:#fff;color:#3c4858;box-shadow:0 4px 20px #00000024,0 7px 10px -5px #0003;font-weight:500}.sm-menu-item.sm-active .sm-menu-icon{color:#3c4858}.sm-menu-icon{font-size:20px!important;width:24px!important;height:24px!important;display:inline-flex!important;align-items:center;justify-content:center;margin-right:12px;flex-shrink:0;color:#fffc;transition:color .15s ease}.sm-menu-text{flex:1;overflow:hidden;text-overflow:ellipsis;transition:opacity .2s ease}.sm-caret{font-size:18px!important;width:18px!important;height:18px!important;transition:transform .3s cubic-bezier(.4,0,.2,1);flex-shrink:0;color:#fff9}.sm-caret.sm-caret-open{transform:rotate(180deg)}.sm-active .sm-caret{color:#3c4858}.sm-submenu{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1)}.sm-submenu.sm-submenu-open{max-height:1000px}.sm-submenu-item{display:flex;align-items:center;padding:8px 15px 8px 30px;margin:1px 15px;border-radius:4px;cursor:pointer;color:#fffc;font-size:12px;font-weight:400;transition:all .15s ease;white-space:nowrap;overflow:hidden}.sm-submenu-item:hover{background:#ffffff1f;color:#fff}.sm-submenu-item.sm-active{background-color:#fff;color:#3c4858;box-shadow:0 4px 20px #00000024,0 7px 10px -5px #0003;font-weight:500}.sm-submenu-item.sm-active .sm-sub-icon{color:#3c4858}.sm-sub-icon{font-size:16px!important;width:20px!important;height:20px!important;display:inline-flex!important;align-items:center;justify-content:center;margin-right:10px;flex-shrink:0;color:#fff9}.sm-initials{width:20px;height:20px;border-radius:50%;background:#ffffff26;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:600;margin-right:10px;flex-shrink:0;color:#fffc}.sm-active .sm-initials{background:#3c48581f;color:#3c4858}.sm-main{flex:1;min-width:0;margin-left:260px;min-height:100vh;display:flex;flex-direction:column;transition:margin-left .3s cubic-bezier(.4,0,.2,1);background-color:#eef2f7}.sm-topbar{display:flex;align-items:center;padding:8px 16px;min-height:56px;background-color:#eef2f7;background-image:radial-gradient(circle,#d5dbe3 1px,transparent 1px);background-size:16px 16px;border-bottom:1px solid rgba(0,0,0,.08);position:sticky;top:0;z-index:1020;transition:background .3s ease,backdrop-filter .3s ease}.sm-topbar-scrolled{background-color:#eef2f78c;background-image:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 1px 3px #0000000f}.sm-topbar-spacer{flex:1 1 auto}.sm-topbar-logo{height:32px;width:32px;object-fit:contain;margin-right:8px}.sm-topbar-brand{font-size:18px;font-weight:500;margin-right:8px;white-space:nowrap}.sm-topbar-label{font-size:14px;margin-right:4px;display:inline-flex;align-items:center;align-self:center;height:40px;line-height:1}.sm-topbar .mat-mdc-icon-button{display:inline-flex!important;align-items:center!important;justify-content:center!important}.sm-content{flex:1;padding:12px;min-width:0;background-color:#e5eaf2;background-image:radial-gradient(ellipse at 50% 45%,#fffffff2,#fff6 35%,#fff0 60%),radial-gradient(circle,#bec7d4 1px,transparent 1px);background-size:100% 100%,16px 16px;min-height:calc(100vh - 104px)}.sm-footer{padding:12px 16px;text-align:center;font-size:12px;color:#999;border-top:1px solid #e0e0e0;background:#fff}.sm-footer a{color:inherit;cursor:pointer}.sm-footer a:hover{text-decoration:underline}.sm-backdrop{display:none;position:fixed;inset:0;background:#00000080;z-index:1025}.sm-layout.sm-mini .sm-sidebar{width:80px}.sm-layout.sm-mini .sm-main{margin-left:80px}.sm-layout.sm-mini .sm-brand-name,.sm-layout.sm-mini .sm-profile-info,.sm-layout.sm-mini .sm-menu-text,.sm-layout.sm-mini .sm-caret,.sm-layout.sm-mini .sm-submenu{display:none}.sm-layout.sm-mini .sm-sidebar mat-divider{margin:0 10px}.sm-layout.sm-mini .sm-brand{justify-content:center;padding:18px 0 10px}.sm-layout.sm-mini .sm-brand img{margin-right:0}.sm-layout.sm-mini .sm-profile{justify-content:center;padding:12px 0}.sm-layout.sm-mini .sm-profile-icon{margin-right:0}.sm-layout.sm-mini .sm-menu-item{justify-content:center;padding:12px 0;margin:2px 0}.sm-layout.sm-mini .sm-menu-icon{margin-right:0;font-size:22px!important}.sm-layout.sm-mini-hovered .sm-sidebar{width:260px;box-shadow:4px 0 20px #0000004d}.sm-layout.sm-mini-hovered .sm-main{margin-left:80px}.sm-layout.sm-mini-hovered .sm-brand-name,.sm-layout.sm-mini-hovered .sm-profile-info,.sm-layout.sm-mini-hovered .sm-menu-text,.sm-layout.sm-mini-hovered .sm-caret{display:initial}.sm-layout.sm-mini-hovered .sm-submenu{display:block}.sm-layout.sm-mini-hovered .sm-sidebar mat-divider{margin:0 15px}.sm-layout.sm-mini-hovered .sm-brand{justify-content:flex-start;padding:18px 15px 10px}.sm-layout.sm-mini-hovered .sm-brand img{margin-right:12px}.sm-layout.sm-mini-hovered .sm-profile{justify-content:flex-start;padding:12px 15px}.sm-layout.sm-mini-hovered .sm-profile-icon{margin-right:12px}.sm-layout.sm-mini-hovered .sm-menu-item{justify-content:flex-start;padding:10px 15px;margin:2px 15px}.sm-layout.sm-mini-hovered .sm-menu-icon{margin-right:12px;font-size:20px!important}@media (max-width: 600px){.sm-sidebar{transform:translate(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);width:260px!important}.sm-layout.sm-mobile-open .sm-sidebar{transform:translate(0)}.sm-layout.sm-mobile-open .sm-backdrop{display:block}.sm-main{margin-left:0!important}.sm-layout.sm-mini .sm-sidebar{width:260px!important}.sm-layout.sm-mini .sm-brand-name,.sm-layout.sm-mini .sm-profile-info,.sm-layout.sm-mini .sm-menu-text,.sm-layout.sm-mini .sm-caret{display:initial}.sm-layout.sm-mini .sm-submenu{display:block}.sm-layout.sm-mini .sm-sidebar mat-divider{margin:0 15px}.sm-layout.sm-mini .sm-menu-item{justify-content:flex-start;padding:10px 15px;margin:2px 15px}.sm-layout.sm-mini .sm-menu-icon{margin-right:12px;font-size:20px!important}.sm-layout.sm-mini .sm-brand{justify-content:flex-start;padding:18px 15px 10px}.sm-layout.sm-mini .sm-brand img{margin-right:12px}.sm-layout.sm-mini .sm-profile{justify-content:flex-start;padding:12px 15px}.sm-layout.sm-mini .sm-profile-icon{margin-right:12px}}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.Router }, { type: AuthService }, { type: StorageService }, { type: NotificationsService }, { type: i1$3.BreakpointObserver }, { type: DataServiceLib }, { type: i1.MatDialog }, { type: SubscriptionService }], propDecorators: { onWindowScroll: [{
                 type: HostListener,
                 args: ['window:scroll']
@@ -10137,6 +10159,11 @@ class LoaderInterceptor {
     }
     intercept(request, next) {
         let requestClone = this.addToken(request);
+        // Changed: Skip loader tracking for SignalR hub requests — they're background infrastructure
+        // and should never show the loading spinner or block UI interactions
+        if (request.url.includes('/hubs/')) {
+            return next.handle(requestClone).pipe(catchError((error) => throwError(() => error)));
+        }
         this.requests.push(requestClone);
         if (this.requests.length > 1) {
             this.logService.info("Multiple connections detected >= " + this.requests.length);
@@ -16616,50 +16643,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 }]
         }] });
 
-// Fixed Assets management page — full lifecycle with tiles, CRUD, activation, depreciation, and disposal
-class FixedAssetsComponent {
-    constructor() {
-        this.accountingService = inject(AccountingService);
-        this.pageConfig = {
-            title: 'Fixed Assets',
-            tableConfig: this.accountingService.assetsTableConfig
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FixedAssetsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: FixedAssetsComponent, isStandalone: true, selector: "spa-fixed-assets", ngImport: i0, template: '<spa-page [config]="pageConfig"></spa-page>', isInline: true, dependencies: [{ kind: "ngmodule", type: TinSpaModule }, { kind: "component", type: PageComponent, selector: "spa-page", inputs: ["config"], outputs: ["searchModeActivated", "searchModeDeactivated", "refreshClick", "actionClick", "actionResponse", "inputChange", "createClick", "searchClick", "dataLoad", "titleActionChange"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FixedAssetsComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'spa-fixed-assets',
-                    standalone: true,
-                    imports: [TinSpaModule],
-                    template: '<spa-page [config]="pageConfig"></spa-page>'
-                }]
-        }] });
-
-// Fixed Asset Categories management page — CRUD for asset categories with depreciation defaults
-class FixedAssetCategoriesComponent {
-    constructor() {
-        this.accountingService = inject(AccountingService);
-        this.pageConfig = {
-            title: 'Asset Categories',
-            tableConfig: this.accountingService.categoryTableConfig
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FixedAssetCategoriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: FixedAssetCategoriesComponent, isStandalone: true, selector: "spa-fixed-asset-categories", ngImport: i0, template: '<spa-page [config]="pageConfig"></spa-page>', isInline: true, dependencies: [{ kind: "ngmodule", type: TinSpaModule }, { kind: "component", type: PageComponent, selector: "spa-page", inputs: ["config"], outputs: ["searchModeActivated", "searchModeDeactivated", "refreshClick", "actionClick", "actionResponse", "inputChange", "createClick", "searchClick", "dataLoad", "titleActionChange"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FixedAssetCategoriesComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'spa-fixed-asset-categories',
-                    standalone: true,
-                    imports: [TinSpaModule],
-                    template: '<spa-page [config]="pageConfig"></spa-page>'
-                }]
-        }] });
-
 // Currency management page - CRUD for multi-currency support
 class CurrenciesComponent {
     constructor() {
@@ -16991,9 +16974,7 @@ const ACCOUNTING_ROUTES = [
     { path: "reports", component: ReportsComponent },
     { path: "tax-rates", component: TaxRatesComponent },
     { path: "standing-orders", component: StandingOrdersComponent },
-    { path: "fixed-assets", component: FixedAssetsComponent },
-    { path: "fixed-asset-categories", component: FixedAssetCategoriesComponent },
-    { path: "currencies", component: CurrenciesComponent },
+    { path: "currencies", component: CurrenciesComponent }, // Changed: Removed Fixed Assets routes — moved to Assets module
     { path: "budgets", component: BudgetsComponent },
     { path: "budget-vs-actual", component: BudgetVsActualComponent },
     { path: "dashboard", component: AccountingDashboardComponent },
@@ -20835,6 +20816,9 @@ class ApprovalsConfigComponent {
                 { name: 'edit', dialog: true, action: { url: 'approvallevels?action=edit', method: 'post' } }
             ]
         };
+        // Changed: view + create after detailsConfig for onSuccessButton
+        const approvalLevelViewButton = { name: 'view', dialog: true, detailsConfig: this.approvalLevelDetailsConfig };
+        const approvalLevelCreateButton = { name: 'create', display: 'Add Level', dialog: true, onSuccessButton: approvalLevelViewButton, action: { url: 'approvallevels?action=create', method: 'post' } };
         this.approvalLevelsTableConfig = {
             tabTitle: 'Approval Levels',
             showFilter: true,
@@ -20849,10 +20833,10 @@ class ApprovalsConfigComponent {
                 { name: 'rolesDisplay', type: 'text', alias: 'Roles' }
             ],
             buttons: [
-                { name: 'create', display: 'Add Level', dialog: true, action: { url: 'approvallevels?action=create', method: 'post' } },
+                approvalLevelCreateButton, // Changed: uses onSuccessButton to auto-open view after create
                 { name: 'up', display: 'Move Up', icon: { name: 'arrow_upward' }, action: { url: 'approvallevels?action=up', method: 'post' }, visible: x => x.level > 1 },
                 { name: 'down', display: 'Move Down', icon: { name: 'arrow_downward' }, action: { url: 'approvallevels?action=down', method: 'post' } },
-                { name: 'view', dialog: true, detailsConfig: this.approvalLevelDetailsConfig },
+                approvalLevelViewButton,
                 { name: 'delete', dialog: true, action: { url: 'approvallevels?action=delete', method: 'post' } }
             ],
             formConfig: this.approvalLevelFormConfig,
@@ -20869,7 +20853,7 @@ class ApprovalsConfigComponent {
                 // { name: 'modelName', type: 'text', required: true, alias: 'Entity Name', span: true, },
                 { name: 'enabled', type: 'checkbox', span: true, alias: 'Enable Approvals', defaultValue: true, infoMessage: 'Enable or disable approval workflow for this entity' },
                 // { name: 'modelName', type: 'select', required: true, span: true, alias: 'Entity', optionDisplay: 'name', optionValue: 'value', loadAction: { url: 'approvalconfigs/meta/x' }, },
-                { name: 'appModelID', type: 'select', required: true, span: true, alias: 'Entity', optionDisplay: 'name', optionValue: 'value', loadAction: { url: 'appmodels/list/approvable' }, },
+                { name: 'appModelID', type: 'text-single', required: true, span: true, alias: 'Entity', optionDisplay: 'name', optionValue: 'value', loadAction: { url: 'appmodels/list/approvable' }, }, // Changed: select -> text-single for typeable autocomplete
                 { name: 'createApprovalRequired', type: 'checkbox', span: true, alias: 'Create Approval' },
                 { name: 'editApprovalRequired', type: 'checkbox', span: true, alias: 'Edit Approval' },
                 { name: 'deleteApprovalRequired', type: 'checkbox', span: true, alias: 'Delete Approval' },
@@ -20890,6 +20874,9 @@ class ApprovalsConfigComponent {
                 { name: 'edit', dialog: true, action: { url: 'approvalconfigs?action=edit', method: 'post' } },
             ]
         };
+        // Changed: view + create after detailsConfig for onSuccessButton
+        const approvalConfigViewButton = { name: 'view', dialog: true, detailsConfig: this.approvalConfigDetailsConfig };
+        const approvalConfigCreateButton = { name: 'create', display: 'Create', dialog: true, onSuccessButton: approvalConfigViewButton, action: { url: 'approvalconfigs?action=create', method: 'post' } };
         this.approvalConfigTable = {
             showFilter: true,
             flatButtons: true,
@@ -20924,8 +20911,8 @@ class ApprovalsConfigComponent {
                 },
             ],
             buttons: [
-                { name: 'create', display: 'Create', dialog: true, action: { url: 'approvalconfigs?action=create', method: 'post' } },
-                { name: 'view', dialog: true, detailsConfig: this.approvalConfigDetailsConfig },
+                approvalConfigCreateButton, // Changed: uses onSuccessButton to auto-open view after create
+                approvalConfigViewButton,
                 { name: 'edit', dialog: true, detailsConfig: this.approvalConfigDetailsConfig },
                 { name: 'delete', action: { url: 'approvalconfigs?action=delete', method: 'post' } },
             ],
@@ -21141,7 +21128,7 @@ class NotificationsConfigComponent {
             security: { allow: [this.dataService.capNotificationsConfig] },
             fields: [
                 { name: 'enabled', type: 'checkbox', alias: 'Enable Notifications', defaultValue: true, span: true },
-                { name: 'appModelID', type: 'select', required: true, span: true, alias: 'Entity', loadAction: { url: 'appmodels/list/x' } },
+                { name: 'appModelID', type: 'text-single', required: true, span: true, alias: 'Entity', loadAction: { url: 'appmodels/list/x' } }, // Changed: select -> text-single for typeable autocomplete
                 // { name: 'customActions', type: 'text', span: true, alias: 'Custom Actions', infoMessage: 'Comma-separated list of actions that can trigger notifications e.g receive,disburse' }
             ]
         };
@@ -21153,6 +21140,9 @@ class NotificationsConfigComponent {
                 { name: 'edit', dialog: true, action: { url: 'notificationconfigs?action=edit', method: 'post' } }
             ]
         };
+        // Changed: view + create after detailsConfig for onSuccessButton
+        const notifConfigViewButton = { name: 'view', dialog: true, detailsConfig: this.notificationConfigDetailsConfig };
+        const notifConfigCreateButton = { name: 'create', display: 'Create', dialog: true, onSuccessButton: notifConfigViewButton, action: { url: 'notificationconfigs?action=create', method: 'post' } };
         this.notificationConfigTable = {
             showFilter: true,
             flatButtons: true,
@@ -21179,8 +21169,8 @@ class NotificationsConfigComponent {
                 }
             ],
             buttons: [
-                { name: 'create', display: 'Create', dialog: true, action: { url: 'notificationconfigs?action=create', method: 'post' } },
-                { name: 'view', dialog: true, detailsConfig: this.notificationConfigDetailsConfig },
+                notifConfigCreateButton, // Changed: uses onSuccessButton to auto-open view after create
+                notifConfigViewButton,
                 { name: 'edit', dialog: true, detailsConfig: this.notificationConfigDetailsConfig },
                 { name: 'delete', action: { url: 'notificationconfigs?action=delete', method: 'post' } }
             ],
@@ -21302,6 +21292,133 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 }]
         }] });
 
+// Fixed Assets module dashboard — asset performance, depreciation trends, and portfolio overview
+class FixedAssetsDashboardComponent {
+    constructor() {
+        this.summaryTiles = {
+            tiles: [
+                { name: 'draft', alias: 'Draft', color: '#FFC107', icon: 'edit_note', style: 'icon', info: 'Assets awaiting activation' },
+                { name: 'active', alias: 'Active', color: '#4CAF50', icon: 'check_circle', style: 'icon', info: 'Actively depreciating assets' },
+                { name: 'fullyDepreciated', alias: 'Fully Depreciated', color: '#2196F3', icon: 'task_alt', style: 'icon', info: 'Zero book value assets' },
+                { name: 'disposed', alias: 'Disposed', color: '#9E9E9E', icon: 'delete_forever', style: 'icon', info: 'Sold or retired assets' },
+                { name: 'totalCost', alias: 'Total Cost', color: '#ff9800', icon: 'attach_money', style: 'icon', info: 'Total acquisition cost' },
+                { name: 'totalNBV', alias: 'Net Book Value', color: '#4CAF50', icon: 'trending_up', style: 'icon', info: 'Current net book value' },
+                { name: 'depreciationThisMonth', alias: 'Depreciation (MTD)', color: '#f44336', icon: 'trending_down', style: 'icon', info: 'Depreciation posted this month' },
+            ],
+            loadAction: { url: 'fixedassets/dashboard/summary' },
+            loadInit: true
+        };
+        this.chartTiles = {
+            tiles: [
+                { name: 'depreciationGauge', alias: 'Depreciation %', color: '#2196F3', chart: { type: 'doughnut', gaugeColor: '#2196F3', height: 130, dataField: 'depreciationGauge' }, footer: 'Total depreciated vs cost', footerIcon: 'pie_chart' },
+                { name: 'depreciationSparkline', alias: 'Depreciation Trend', color: '#f44336', chart: { type: 'bar', colors: ['#f44336', '#ef5350', '#e57373', '#ef9a9a', '#ffcdd2', '#f44336', '#ef5350', '#e57373', '#ef9a9a', '#ffcdd2', '#f44336', '#ef5350'], height: 100, dataField: 'depreciationSparkline' }, footer: 'Last 12 months', footerIcon: 'trending_down' },
+                { name: 'costByCategory', alias: 'Cost by Category', color: '#ff9800', chart: { type: 'pie', colors: ['#ff9800', '#f44336', '#9c27b0', '#2196F3', '#4CAF50', '#607d8b'], height: 130, dataField: 'costByCategory' }, footer: 'Acquisition cost split', footerIcon: 'donut_large' },
+                { name: 'nbvTrend', alias: 'NBV Trend', color: '#4CAF50', chart: { type: 'line', color: '#4CAF50', height: 100, dataField: 'nbvTrend' }, footer: 'Last 6 months', footerIcon: 'show_chart' },
+            ],
+            loadAction: { url: 'fixedassets/dashboard/chart-tiles' },
+            loadInit: true
+        };
+        this.chartConfig = {
+            charts: [
+                { name: 'depreciationTrend', title: 'Monthly Depreciation', type: 'bar', height: '300px', colors: ['#2196F3'] },
+                { name: 'statusDistribution', title: 'Asset Status Distribution', type: 'doughnut', height: '300px', colors: ['#FFC107', '#4CAF50', '#2196F3', '#9E9E9E'] },
+                { name: 'costByCategory', title: 'Cost by Category', type: 'bar', height: '300px', colors: ['#ff9800'] },
+                { name: 'nbvVsCost', title: 'Cost vs Net Book Value', type: 'line', height: '300px', showPoints: true, showLegend: true, tension: 0.4, colors: ['#ff9800', '#4CAF50'] },
+                { name: 'remainingLife', title: 'Remaining Useful Life', type: 'bar', height: '300px', colors: ['#7c4dff'] },
+                { name: 'acquisitionsTimeline', title: 'Acquisitions Timeline', type: 'line', height: '300px', showPoints: true, tension: 0.4, colors: ['#2196F3'] },
+            ],
+            loadAction: { url: 'fixedassets/dashboard/charts' },
+            loadInit: true,
+            columns: 2
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FixedAssetsDashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: FixedAssetsDashboardComponent, isStandalone: false, selector: "spa-fixed-assets-dashboard", ngImport: i0, template: `
+    <div class="dashboard-container">
+      <h4 class="dashboard-title"><mat-icon>precision_manufacturing</mat-icon> Fixed Assets Dashboard</h4>
+      <spa-tiles [config]="summaryTiles"></spa-tiles>
+      <div style="margin-top: 16px;"></div>
+      <spa-tiles [config]="chartTiles"></spa-tiles>
+      <spa-charts [config]="chartConfig"></spa-charts>
+    </div>
+  `, isInline: true, styles: [".dashboard-container{padding:16px}.dashboard-title{display:flex;align-items:center;gap:8px;margin-bottom:16px;color:#333;font-weight:500}\n"], dependencies: [{ kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: TilesComponent, selector: "spa-tiles", inputs: ["config", "lastSearch", "data", "reload"], outputs: ["tileActionSelected", "tileClick", "tileUnClick"] }, { kind: "component", type: ChartsComponent, selector: "spa-charts", inputs: ["config", "data", "reload"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FixedAssetsDashboardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spa-fixed-assets-dashboard', template: `
+    <div class="dashboard-container">
+      <h4 class="dashboard-title"><mat-icon>precision_manufacturing</mat-icon> Fixed Assets Dashboard</h4>
+      <spa-tiles [config]="summaryTiles"></spa-tiles>
+      <div style="margin-top: 16px;"></div>
+      <spa-tiles [config]="chartTiles"></spa-tiles>
+      <spa-charts [config]="chartConfig"></spa-charts>
+    </div>
+  `, standalone: false, styles: [".dashboard-container{padding:16px}.dashboard-title{display:flex;align-items:center;gap:8px;margin-bottom:16px;color:#333;font-weight:500}\n"] }]
+        }] });
+
+// Fixed Assets management page — full lifecycle with tiles, CRUD, activation, depreciation, and disposal
+class FixedAssetsComponent {
+    constructor() {
+        this.assetsService = inject(AssetsService); // Changed: Use AssetsService
+        this.pageConfig = {
+            title: 'Fixed Assets',
+            tableConfig: this.assetsService.assetsTableConfig // Changed: Use AssetsService
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FixedAssetsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: FixedAssetsComponent, isStandalone: true, selector: "spa-fixed-assets", ngImport: i0, template: '<spa-page [config]="pageConfig"></spa-page>', isInline: true, dependencies: [{ kind: "ngmodule", type: TinSpaModule }, { kind: "component", type: PageComponent, selector: "spa-page", inputs: ["config"], outputs: ["searchModeActivated", "searchModeDeactivated", "refreshClick", "actionClick", "actionResponse", "inputChange", "createClick", "searchClick", "dataLoad", "titleActionChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FixedAssetsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'spa-fixed-assets',
+                    standalone: true,
+                    imports: [TinSpaModule],
+                    template: '<spa-page [config]="pageConfig"></spa-page>'
+                }]
+        }] });
+
+// Depreciation Categories management page — CRUD for depreciation categories with default settings
+class FixedAssetCategoriesComponent {
+    constructor() {
+        this.assetsService = inject(AssetsService);
+        this.pageConfig = {
+            title: 'Depreciation Categories', // Changed: Renamed from Asset Categories
+            tableConfig: this.assetsService.categoryTableConfig
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FixedAssetCategoriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: FixedAssetCategoriesComponent, isStandalone: true, selector: "spa-fixed-asset-categories", ngImport: i0, template: '<spa-page [config]="pageConfig"></spa-page>', isInline: true, dependencies: [{ kind: "ngmodule", type: TinSpaModule }, { kind: "component", type: PageComponent, selector: "spa-page", inputs: ["config"], outputs: ["searchModeActivated", "searchModeDeactivated", "refreshClick", "actionClick", "actionResponse", "inputChange", "createClick", "searchClick", "dataLoad", "titleActionChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FixedAssetCategoriesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'spa-fixed-asset-categories',
+                    standalone: true,
+                    imports: [TinSpaModule],
+                    template: '<spa-page [config]="pageConfig"></spa-page>'
+                }]
+        }] });
+
+// Changed: Fixed Assets routes — separated from Accounting module
+const ASSETS_ROUTES = [
+    { path: "dashboard", component: FixedAssetsDashboardComponent },
+    { path: "register", component: FixedAssetsComponent },
+    { path: "depreciation-categories", component: FixedAssetCategoriesComponent }, // Changed: Renamed from categories
+];
+class AssetsRoutingModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AssetsRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: AssetsRoutingModule, imports: [i1$2.RouterModule], exports: [RouterModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AssetsRoutingModule, imports: [RouterModule.forChild(ASSETS_ROUTES), RouterModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AssetsRoutingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [RouterModule.forChild(ASSETS_ROUTES)],
+                    exports: [RouterModule]
+                }]
+        }] });
+
 // All domain routes nested under their module path
 // Consumer apps import SpaHomeModule once — no need to declare routes per app
 const routes = [
@@ -21318,7 +21435,8 @@ const routes = [
     { path: 'general', children: GENERAL_ROUTES },
     { path: 'tenancy', children: TENANCY_ROUTES },
     { path: 'workflow', children: WORKFLOW_ROUTES },
-    { path: 'overview', children: OVERVIEW_ROUTES }
+    { path: 'overview', children: OVERVIEW_ROUTES },
+    { path: 'fixed-assets', children: ASSETS_ROUTES } // Changed: Added Fixed Assets module
 ];
 class SpaHomeRoutingModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SpaHomeRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -21352,17 +21470,15 @@ class AccountingModule {
             // Changed: Standalone components must be imported, not declared
             TaxRatesComponent,
             StandingOrdersComponent,
-            FixedAssetsComponent,
-            FixedAssetCategoriesComponent,
-            CurrenciesComponent] }); }
+            CurrenciesComponent // Changed: Removed Fixed Assets — moved to Assets module
+        ] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AccountingModule, imports: [CommonModule,
             SpaAdminModule,
             // Changed: Standalone components must be imported, not declared
             TaxRatesComponent,
             StandingOrdersComponent,
-            FixedAssetsComponent,
-            FixedAssetCategoriesComponent,
-            CurrenciesComponent] }); }
+            CurrenciesComponent // Changed: Removed Fixed Assets — moved to Assets module
+        ] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AccountingModule, decorators: [{
             type: NgModule,
@@ -21388,9 +21504,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                         // Changed: Standalone components must be imported, not declared
                         TaxRatesComponent,
                         StandingOrdersComponent,
-                        FixedAssetsComponent,
-                        FixedAssetCategoriesComponent,
-                        CurrenciesComponent
+                        CurrenciesComponent // Changed: Removed Fixed Assets — moved to Assets module
                     ]
                 }]
         }] });
@@ -21697,6 +21811,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 }]
         }] });
 
+// Changed: Fixed Assets module — separated from Accounting module
+class AssetsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AssetsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: AssetsModule, declarations: [FixedAssetsDashboardComponent], imports: [CommonModule,
+            SpaAdminModule,
+            FixedAssetsComponent,
+            FixedAssetCategoriesComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AssetsModule, imports: [CommonModule,
+            SpaAdminModule,
+            FixedAssetsComponent,
+            FixedAssetCategoriesComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AssetsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        FixedAssetsDashboardComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        SpaAdminModule,
+                        FixedAssetsComponent,
+                        FixedAssetCategoriesComponent
+                    ]
+                }]
+        }] });
+
 // Single import for consumer apps — provides all domain routes and components
 // Usage in consumer home-routing.module.ts:
 //   { path: '', loadChildren: () => import('tin-spa').then(m => m.SpaHomeModule) }
@@ -21716,7 +21857,9 @@ class SpaHomeModule {
             GeneralModule,
             TenancyModule,
             WorkflowModule,
-            OverviewModule] }); }
+            OverviewModule,
+            AssetsModule // Changed: Added Fixed Assets module
+        ] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SpaHomeModule, imports: [SpaHomeRoutingModule,
             AdminModule,
             UserModule,
@@ -21731,7 +21874,9 @@ class SpaHomeModule {
             GeneralModule,
             TenancyModule,
             WorkflowModule,
-            OverviewModule] }); }
+            OverviewModule,
+            AssetsModule // Changed: Added Fixed Assets module
+        ] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SpaHomeModule, decorators: [{
             type: NgModule,
@@ -21751,7 +21896,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                         GeneralModule,
                         TenancyModule,
                         WorkflowModule,
-                        OverviewModule
+                        OverviewModule,
+                        AssetsModule // Changed: Added Fixed Assets module
                     ]
                 }]
         }] });
@@ -21792,5 +21938,5 @@ const ALSQUARE_SVG_WHITE = `<svg viewBox="0 0 80 80" fill="none" xmlns="http://w
  * Generated bundle index. Do not edit.
  */
 
-export { ALSQUARE_SVG_DARK, ALSQUARE_SVG_WHITE, Account, AccountsComponent as AccountingAccountsComponent, AggregatesComponent as AccountingAggregatesComponent, AgingComponent as AccountingAgingComponent, CurrenciesComponent as AccountingCurrenciesComponent, AccountingDashboardComponent, InvoicesComponent as AccountingInvoicesComponent, AccountingModule, ReportsComponent as AccountingReportsComponent, AccountingService, StatementComponent as AccountingStatementComponent, TransactionTypesComponent as AccountingTransactionTypesComponent, TransactionsComponent as AccountingTransactionsComponent, Action, ActivityComponent, AdminModule, AgentComponent, AgentService, AlertComponent, AlertConfig, AlertMessage, ApiResponse, AppConfig, AppModelsComponent, AssetStatus, AttachComponent, AuthService, BillingPageComponent, BrandsComponent, CacheConfig, CapItem, CapsulesComponent, CategoriesComponent, ChangePasswordComponent, ChangeUserPassword, ChartConfig, ChartsComponent, CheckComponent, ChipsComponent, Constants, Core, CreateAccountComponent, CustomersComponent, DataServiceLib, DateComponent, DatetimeComponent, DepartmentsComponent, DetailsDialog, DetailsDialogConfig, DetailsDialogProcessor, DetailsSource, DialogService, EmailComponent, EmployeesComponent, ExportService, FeatureDirective, FilterComponent, FormComponent, FormConfig, GeneralModule, GeneralService, GradesComponent, GroupsComponent, HRModule, HtmlComponent, HttpService, IndexModule, InventoryDashboardComponent, InventoryModule, InventoryService, InvitationsTableComponent, InvoiceDashboardComponent, InvoiceItemType, InvoiceStatus, LabelComponent, ListDialogComponent, ListDialogConfig, LoaderComponent, LoaderService, LoanPaymentsComponent, LoanProductsComponent, LoansComponent, LoansModule, LoansService, LogLevel, LogService, LoginComponent, LogsComponent, ManufacturingModule, MembershipComponent, MessageService, MoneyComponent, MovementType, NavMenuComponent, NotesComponent, NotesConfig, NotificationsService, NumberComponent, OnboardingComponent, OptionComponent, OverviewDashboardComponent, OverviewModule, PageComponent, PageConfig, PayrollDashboardComponent, PayrollModule, PlansComponent, PositionsComponent, PreferencesComponent, PrivacyDialogComponent, Profile, ProfileComponent, PurchaseStatus, PurchasingDashboardComponent, PurchasingModule, PushNotificationService, ReceiptStatus, RecoverAccountComponent, Register, Role, RoleAccess, RolesComponent, SalesDashboardComponent, SalesModule, SearchComponent, SearchConfig, SecurityConfig, SelectBitwiseComponent, SelectComponent, SelectLiteComponent, SelectMultiComponent, SettingsComponent, SignupComponent, SignupData, SpaAdminModule, SpaHomeModule, SpaIndexModule, SpaLandingComponent, SpaMatModule, SpaUserModule, StatusesComponent, Step, StepConfig, StepsComponent, StorageService, SubCategoriesComponent, SubscriptionPageComponent, SubscriptionService, SuppliersComponent, TabService, TableComponent, TableConfig, TabsComponent, TasksComponent, TenancyModule, TenantsComponent, TermsDialogComponent, TextAreaComponent, TextComponent, TextMaskComponent, TextMultiComponent, TextSingleComponent, TileConfig, TilesComponent, TinSpaComponent, TinSpaModule, TinSpaService, TitleActionsComponent, TransactionTiming, UnitOfMeasure, UpdateService, User, UserModule, UsersComponent, ViewerComponent, WelcomeComponent, WorkflowModule, authGuard, dialogOptions, featureGuard, loginConfig, messageDialog, viewerDialog };
+export { ALSQUARE_SVG_DARK, ALSQUARE_SVG_WHITE, Account, AccountsComponent as AccountingAccountsComponent, AggregatesComponent as AccountingAggregatesComponent, AgingComponent as AccountingAgingComponent, CurrenciesComponent as AccountingCurrenciesComponent, AccountingDashboardComponent, InvoicesComponent as AccountingInvoicesComponent, AccountingModule, ReportsComponent as AccountingReportsComponent, AccountingService, StatementComponent as AccountingStatementComponent, TransactionTypesComponent as AccountingTransactionTypesComponent, TransactionsComponent as AccountingTransactionsComponent, Action, ActivityComponent, AdminModule, AgentComponent, AgentService, AlertComponent, AlertConfig, AlertMessage, ApiResponse, AppConfig, AppModelsComponent, AssetStatus, AssetsService, AttachComponent, AuthService, BillingPageComponent, BrandsComponent, CacheConfig, CapItem, CapsulesComponent, CategoriesComponent, ChangePasswordComponent, ChangeUserPassword, ChartConfig, ChartsComponent, CheckComponent, ChipsComponent, Constants, Core, CreateAccountComponent, CustomersComponent, DataServiceLib, DateComponent, DatetimeComponent, DepartmentsComponent, DetailsDialog, DetailsDialogConfig, DetailsDialogProcessor, DetailsSource, DialogService, EmailComponent, EmployeesComponent, ExportService, FeatureDirective, FilterComponent, FormComponent, FormConfig, GeneralModule, GeneralService, GradesComponent, GroupsComponent, HRModule, HtmlComponent, HttpService, IndexModule, InventoryDashboardComponent, InventoryModule, InventoryService, InvitationsTableComponent, InvoiceDashboardComponent, InvoiceItemType, InvoiceStatus, LabelComponent, ListDialogComponent, ListDialogConfig, LoaderComponent, LoaderService, LoanPaymentsComponent, LoanProductsComponent, LoansComponent, LoansModule, LoansService, LogLevel, LogService, LoginComponent, LogsComponent, ManufacturingModule, MembershipComponent, MessageService, MoneyComponent, MovementType, NavMenuComponent, NotesComponent, NotesConfig, NotificationsService, NumberComponent, OnboardingComponent, OptionComponent, OverviewDashboardComponent, OverviewModule, PageComponent, PageConfig, PayrollDashboardComponent, PayrollModule, PlansComponent, PositionsComponent, PreferencesComponent, PrivacyDialogComponent, Profile, ProfileComponent, PurchaseStatus, PurchasingDashboardComponent, PurchasingModule, PushNotificationService, ReceiptStatus, RecoverAccountComponent, Register, Role, RoleAccess, RolesComponent, SalesDashboardComponent, SalesModule, SearchComponent, SearchConfig, SecurityConfig, SelectBitwiseComponent, SelectComponent, SelectLiteComponent, SelectMultiComponent, SettingsComponent, SignupComponent, SignupData, SpaAdminModule, SpaHomeModule, SpaIndexModule, SpaLandingComponent, SpaMatModule, SpaUserModule, StatusesComponent, Step, StepConfig, StepsComponent, StorageService, SubCategoriesComponent, SubscriptionPageComponent, SubscriptionService, SuppliersComponent, TabService, TableComponent, TableConfig, TabsComponent, TasksComponent, TenancyModule, TenantsComponent, TermsDialogComponent, TextAreaComponent, TextComponent, TextMaskComponent, TextMultiComponent, TextSingleComponent, TileConfig, TilesComponent, TinSpaComponent, TinSpaModule, TinSpaService, TitleActionsComponent, TransactionTiming, UnitOfMeasure, UpdateService, User, UserModule, UsersComponent, ViewerComponent, WelcomeComponent, WorkflowModule, authGuard, dialogOptions, featureGuard, loginConfig, messageDialog, viewerDialog };
 //# sourceMappingURL=tin-spa.mjs.map