tin-spa 20.5.1 → 20.5.2

package/fesm2022/tin-spa.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Inject, Component, InjectionToken, Optional, inject, Input, Directive, NgModule, EventEmitter, Output, forwardRef, HostListener, ViewChild, Pipe, ContentChild } from '@angular/core';
+import { Injectable, Inject, Component, InjectionToken, Optional, inject, Input, Directive, NgModule, EventEmitter, Output, forwardRef, HostListener, ViewChild, Pipe, ContentChild, ViewEncapsulation } from '@angular/core';
 import * as i1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule, MAT_DIALOG_DEFAULT_OPTIONS, MatDialog } from '@angular/material/dialog';
 import * as i2 from '@angular/common';
@@ -10,7 +10,7 @@ import * as i4$1 from '@angular/material/icon';
 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, tap, timeout, finalize, share, Observable, Subject, throwError, interval } from 'rxjs';
+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 * as i2$1 from '@angular/material/snack-bar';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
@@ -42,7 +42,7 @@ import * as i14 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
 import * as i4$4 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i12$2 from '@angular/material/paginator';
+import * as i13 from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import * as i18$1 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
@@ -53,7 +53,7 @@ import { MatSliderModule } from '@angular/material/slider';
 import { MatSortModule } from '@angular/material/sort';
 import * as i4$3 from '@angular/material/stepper';
 import { MatStepperModule } from '@angular/material/stepper';
-import * as i11 from '@angular/material/table';
+import * as i12$2 from '@angular/material/table';
 import { MatTableModule, MatTableDataSource } from '@angular/material/table';
 import * as i4$5 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
@@ -1464,14 +1464,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
-// SignalR service for real-time notification count push from backend hub
+// SignalR service for real-time notification count push and entity change broadcasts
 class SignalRService {
     constructor() {
         this.hubConnection = null;
         this.notificationCount = new BehaviorSubject(0);
         this.notificationCount$ = this.notificationCount.asObservable();
-        // Changed: Callback for reconnection count refresh (set by NotificationsService)
+        // Changed: Data hub connection for real-time entity changes
+        this.dataHubConnection = null;
+        this.entityCreated = new Subject();
+        this.entityUpdated = new Subject();
+        this.entityDeleted = new Subject();
+        this.entityCreated$ = this.entityCreated.asObservable(); // Changed: Observable for new entity rows
+        this.entityUpdated$ = this.entityUpdated.asObservable(); // Changed: Observable for updated entity rows
+        this.entityDeleted$ = this.entityDeleted.asObservable(); // Changed: Observable for deleted entity IDs
+        // Changed: Callback for reconnection — notification count refresh (set by NotificationsService)
         this.onReconnected = null;
+        // Changed: Callback for data hub reconnection — tables should reload (set by table components)
+        this.onDataReconnected = null;
     }
     startConnection(hubUrl, token) {
         if (this.hubConnection)
@@ -1489,7 +1499,34 @@ class SignalRService {
             if (this.onReconnected)
                 this.onReconnected();
         });
-        this.hubConnection.start().catch(err => console.error('SignalR connection error:', err));
+        this.hubConnection.start().catch(err => console.error('SignalR notification connection error:', err));
+    }
+    // Changed: Start data hub connection for real-time entity change broadcasts
+    startDataConnection(hubUrl, token) {
+        if (this.dataHubConnection?.state === signalR.HubConnectionState.Connected)
+            return; // Changed: Skip if already connected
+        if (this.dataHubConnection)
+            this.stopDataConnection();
+        this.dataHubConnection = new signalR.HubConnectionBuilder()
+            .withUrl(hubUrl, { accessTokenFactory: () => token })
+            .withAutomaticReconnect()
+            .build();
+        // Changed: Listen for entity CRUD broadcasts from backend DataHub
+        this.dataHubConnection.on('EntityCreated', (entityName, data) => {
+            this.entityCreated.next({ entityName, data });
+        });
+        this.dataHubConnection.on('EntityUpdated', (entityName, data) => {
+            this.entityUpdated.next({ entityName, data });
+        });
+        this.dataHubConnection.on('EntityDeleted', (entityName, data) => {
+            this.entityDeleted.next({ entityName, data });
+        });
+        // Changed: On data hub reconnect, notify tables to do a full reload (catch missed events)
+        this.dataHubConnection.onreconnected(() => {
+            if (this.onDataReconnected)
+                this.onDataReconnected();
+        });
+        this.dataHubConnection.start().catch(err => console.error('SignalR data connection error:', err));
     }
     stopConnection() {
         if (this.hubConnection) {
@@ -1497,6 +1534,13 @@ class SignalRService {
             this.hubConnection = null;
         }
     }
+    // Changed: Stop data hub connection
+    stopDataConnection() {
+        if (this.dataHubConnection) {
+            this.dataHubConnection.stop();
+            this.dataHubConnection = null;
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SignalRService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SignalRService, providedIn: 'root' }); }
 }
@@ -1580,7 +1624,8 @@ class AuthService {
                 });
             }
         }
-        this.signalRService.stopConnection(); // Changed: Stop SignalR connection before clearing session
+        this.signalRService.stopConnection(); // Changed: Stop SignalR notification connection before clearing session
+        this.signalRService.stopDataConnection(); // Changed: Stop SignalR data connection before clearing session
         this.Updateloggedin(false);
         this.UpdateAutoLogin(false);
         this.UpdateRole(new Role());
@@ -2170,7 +2215,9 @@ class DataServiceLib {
                 { name: 'delete', dialog: true, action: { url: 'employees?action=delete', method: 'post' } },
             ],
             loadAction: { url: 'employees/all/x' },
-            formConfig: this.employeeFormConfig
+            formConfig: this.employeeFormConfig,
+            // realTime: true, // Disabled: testing realtime on transactions table only
+            entityName: 'Employee' // Changed: Match backend entity name for SignalR broadcasts
         };
         //--------------------------Positions-------------------------
         this.positionsTableConfig = {
@@ -2205,7 +2252,9 @@ class DataServiceLib {
                 { name: 'delete', dialog: true, action: { url: 'positions?action=delete', method: 'post' } },
             ],
             loadAction: { url: 'positions/all/x' },
-            formConfig: this.positionFormConfig
+            formConfig: this.positionFormConfig,
+            // realTime: true, // Disabled: testing realtime on transactions table only
+            entityName: 'Position' // Changed: Match backend entity name for SignalR broadcasts
         };
         //--------------------------Departments-------------------------
         this.departmentTableConfig = {
@@ -2246,7 +2295,9 @@ class DataServiceLib {
                 { name: 'delete', dialog: true, action: { url: 'departments?action=delete', method: 'post' } },
             ],
             loadAction: { url: 'departments/all/x' },
-            formConfig: this.departmentFormConfig
+            formConfig: this.departmentFormConfig,
+            // realTime: true, // Disabled: testing realtime on transactions table only
+            entityName: 'Department' // Changed: Match backend entity name for SignalR broadcasts
         };
         //--------------------------Contact Persons-------------------------
         this.contactPersonFormConfig = {
@@ -2346,7 +2397,9 @@ class DataServiceLib {
                 { name: 'delete', dialog: true, action: { url: 'customers?action=delete', method: 'post' } },
             ],
             loadAction: { url: 'customers/all/x' },
-            formConfig: this.customerFormConfig
+            formConfig: this.customerFormConfig,
+            // realTime: true, // Disabled: testing realtime on transactions table only — no re-fetch after CUD
+            entityName: 'Customer' // Changed: Match backend typeof(Customer).Name for SignalR broadcasts
         };
         //--------------------------Suppliers-------------------------
         this.supplierFormConfig = {
@@ -2397,7 +2450,9 @@ class DataServiceLib {
                 { name: 'delete', dialog: true, action: { url: 'suppliers?action=delete', method: 'post' } },
             ],
             loadAction: { url: 'suppliers/all/x' },
-            formConfig: this.supplierFormConfig
+            formConfig: this.supplierFormConfig,
+            // realTime: true, // Disabled: testing realtime on transactions table only
+            entityName: 'Supplier' // Changed: Match backend entity name for SignalR broadcasts
         };
         //--------------------------GPT Caches-------------------------
         this.gptCachesFormConfig = {
@@ -3681,7 +3736,9 @@ class AccountingService {
             ],
             loadAction: { url: 'invoices/all/x' },
             formConfig: this.invoiceFormConfig,
-            tileConfig: this.invoicesTileConfig
+            tileConfig: this.invoicesTileConfig,
+            // realTime: true, // Disabled: testing realtime on transactions table only
+            entityName: 'Invoice'
         };
         //--------------------------Aging Report-------------------------
         // Added: Aging report summary tiles
@@ -3842,7 +3899,9 @@ class AccountingService {
                 this.taxRateDeleteButton
             ],
             loadAction: { url: 'taxrates/all/x' },
-            formConfig: this.taxRateFormConfig
+            formConfig: this.taxRateFormConfig,
+            // realTime: true, // Disabled: testing realtime on transactions table only
+            entityName: 'TaxRate'
         };
         //--------------------------Currencies-------------------------
         // Changed: Currency form configuration for multi-currency management
@@ -3887,7 +3946,9 @@ class AccountingService {
                 this.currencyDeleteButton
             ],
             loadAction: { url: 'currencies/all/x' },
-            formConfig: this.currencyFormConfig
+            formConfig: this.currencyFormConfig,
+            // realTime: true, // Disabled: testing realtime on transactions table only
+            entityName: 'Currency'
         };
         //--------------------------Transaction Types-------------------------
         this.transactionTypeFormConfig = {
@@ -3942,7 +4003,9 @@ class AccountingService {
                 { name: 'delete', dialog: true, action: { url: 'transactiontypes?action=delete', method: 'post' } },
             ],
             loadAction: { url: 'transactiontypes/all/x' },
-            formConfig: this.transactionTypeFormConfig
+            formConfig: this.transactionTypeFormConfig,
+            // realTime: true, // Disabled: testing realtime on transactions table only
+            entityName: 'TransactionType'
         };
         //--------------------------Transaction Import-------------------------
         // Edit form for a single import item (sub-dialog)
@@ -3958,6 +4021,7 @@ class AccountingService {
         };
         // Nested table showing imported items in the review dialog
         this.transactionImportItemsTableConfig = {
+            tabTitle: 'Imported Items', // Changed: Add meaningful tab title instead of default 'Untitled'
             showFilter: false,
             causeFormRefresh: true,
             minColumns: ['date', 'description', 'amount', 'transactionTypeName'],
@@ -4109,7 +4173,23 @@ class AccountingService {
                 this.transactionVoidButton,
             ],
             loadAction: { url: 'transactions/all/x' },
-            formConfig: this.transactionFormConfig
+            formConfig: this.transactionFormConfig,
+            realTime: true,
+            entityName: 'Transaction'
+        };
+        // Changed: Search mode config for transactions — date range, description contains, account filter
+        this.transactionSearchTableConfig = {
+            ...this.transactionsTableConfig,
+            searchConfig: {
+                fields: [
+                    { name: 'dateFrom', type: 'date', alias: 'From Date', show: true },
+                    { name: 'dateTo', type: 'date', alias: 'To Date', show: true },
+                    { name: 'description', type: 'text', alias: 'Description', show: true },
+                    { name: 'accountID', type: 'select', alias: 'Account', show: true, loadAction: { url: 'accounts/list/x' } },
+                    { name: 'typeName', type: 'select', alias: 'Transaction Type', show: true, loadAction: { url: 'transactiontypes/list/x' } },
+                ],
+                searchAction: { url: 'transactions/search', method: 'post' }
+            }
         };
         this.accountTransactionsTableConfig = {
             ...this.transactionsTableConfig,
@@ -4291,7 +4371,9 @@ class AccountingService {
                 this.standingOrderDeleteButton
             ],
             loadAction: { url: 'standingorders/all/x' },
-            formConfig: this.standingOrderFormConfig
+            formConfig: this.standingOrderFormConfig,
+            // realTime: true, // Disabled: testing realtime on transactions table only
+            entityName: 'StandingOrder'
         };
         //--------------------------Accounts-------------------------
         this.accountDetailsConfig = {
@@ -4327,13 +4409,15 @@ class AccountingService {
                 { name: 'view', dialog: true, detailsConfig: this.accountDetailsConfig },
                 this.finAccounEditButton,
                 { name: 'delete', dialog: true, action: { url: 'accounts?action=delete', method: 'post' } },
-                { name: 'revalue', display: 'Revalue Forex', inHeader: true, icon: { name: 'currency_exchange', color: 'blue' }, // Changed: Added forex revaluation button
-                    action: { url: 'accounts?action=revalue', method: 'post', successMessage: 'Forex revaluation complete' },
-                    confirm: { message: 'Revalue all forex accounts at current exchange rates?' }
-                },
+                // { name: 'revalue', display: 'Revalue Forex', inHeader: true, icon: { name: 'currency_exchange', color: 'blue' }, // Changed: Commented out — forex revaluation deferred
+                //   action: { url: 'accounts?action=revalue', method: 'post', successMessage: 'Forex revaluation complete' },
+                //   confirm: { message: 'Revalue all forex accounts at current exchange rates?' }
+                // },
             ],
             loadAction: { url: 'accounts/all/x' },
-            formConfig: this.accountFormConfig
+            formConfig: this.accountFormConfig,
+            // realTime: true, // Disabled: testing realtime on transactions table only
+            entityName: 'Account'
         };
         //--------------------------Financial Reports-------------------------
         // Trial Balance table config — shows all accounts with debit/credit totals
@@ -4493,10 +4577,12 @@ class AccountingService {
                 { name: 'updatedByDetails', alias: 'Last Updated', type: 'text' },
             ],
             buttons: [
-                { name: 'create', dialog: true, detailsConfig: this.categoryDetailsConfig, action: { url: 'fixedassetcategories?action=create', method: 'post' } },
+                { 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
@@ -4593,13 +4679,15 @@ class AccountingService {
                 { name: 'updatedByDetails', alias: 'Last Updated', type: 'text' },
             ],
             buttons: [
-                { name: 'create', dialog: true, detailsConfig: this.assetDetailsConfig, action: { url: 'fixedassets?action=create', method: 'post' } },
+                { 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
+            tileConfig: this.assetTileConfig,
+            // realTime: true, // Disabled: testing realtime on transactions table only
+            entityName: 'FixedAsset'
         };
         //--------------------------Budgets-------------------------
         // Budget form configuration
@@ -4693,7 +4781,9 @@ class AccountingService {
                 { name: 'delete', inDialog: true, icon: { name: 'delete', color: 'red' }, action: { url: 'budgets?action=delete', method: 'post', successMessage: 'Budget deleted' }, confirm: { message: 'Delete this budget?' }, visible: (x) => x.status == 1 }
             ],
             loadAction: { url: 'budgets/all/x' },
-            formConfig: this.budgetFormConfig
+            formConfig: this.budgetFormConfig,
+            // realTime: true, // Disabled: testing realtime on transactions table only
+            entityName: 'Budget'
         };
         //--------------------------Budget vs Actual Report-------------------------
         // Budget vs Actual - By Period detail table
@@ -4920,7 +5010,9 @@ class LoansService {
             loadAction: { url: 'loans/all/x' },
             minColumns: ['borrowerName', 'principalAmount', 'statusName'],
             formConfig: this.loanFormConfig,
-            buttons: [this.loanViewButton, this.loanCreateButton, this.loanEditButton, this.loanDisburseButton]
+            buttons: [this.loanViewButton, this.loanCreateButton, this.loanEditButton, this.loanDisburseButton],
+            // realTime: true, // Disabled: testing realtime on transactions table only
+            entityName: 'Loan'
         };
         // ========== LOAN PAYMENTS BUTTONS ==========
         this.loanPaymentCreateButton = { name: 'create', display: 'Record Payment', dialog: true, action: { url: 'loanpayments?action=create', method: 'post' } };
@@ -4951,7 +5043,9 @@ class LoansService {
             loadAction: { url: 'loanpayments/all/x' },
             minColumns: ['paymentDate', 'customerName', 'amount'],
             formConfig: this.loanPaymentFormConfig,
-            buttons: [this.loanPaymentCreateButton]
+            buttons: [this.loanPaymentCreateButton],
+            // realTime: true, // Disabled: testing realtime on transactions table only
+            entityName: 'LoanPayment'
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LoansService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -5002,7 +5096,9 @@ class GeneralService {
                 this.categoryDeleteButton
             ],
             loadAction: { url: 'categories/all/x' },
-            formConfig: this.categoryFormConfig
+            formConfig: this.categoryFormConfig,
+            // realTime: true, // Disabled: testing realtime on transactions table only
+            entityName: 'Category'
         };
         //--------------------------SubCategories-------------------------
         this.subCategoryFormConfig = {
@@ -5041,7 +5137,9 @@ class GeneralService {
                 this.subCategoryDeleteButton
             ],
             loadAction: { url: 'subcategories/all/x' },
-            formConfig: this.subCategoryFormConfig
+            formConfig: this.subCategoryFormConfig,
+            // realTime: true, // Disabled: testing realtime on transactions table only
+            entityName: 'SubCategory'
         };
         //--------------------------Brands-------------------------
         this.brandFormConfig = {
@@ -5077,7 +5175,9 @@ class GeneralService {
                 this.brandDeleteButton
             ],
             loadAction: { url: 'brands/all/x' },
-            formConfig: this.brandFormConfig
+            formConfig: this.brandFormConfig,
+            // realTime: true, // Disabled: testing realtime on transactions table only
+            entityName: 'Brand'
         };
         //--------------------------ListItems-------------------------
         this.listItemFormConfig = {
@@ -5113,7 +5213,9 @@ class GeneralService {
                 this.listItemDeleteButton
             ],
             loadAction: { url: 'listitems/all/x' },
-            formConfig: this.listItemFormConfig
+            formConfig: this.listItemFormConfig,
+            // realTime: true, // Disabled: testing realtime on transactions table only
+            entityName: 'ListItem'
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: GeneralService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -5187,7 +5289,9 @@ class InventoryService {
                 this.productDeleteButton,
             ],
             loadAction: { url: 'products/all/x' },
-            formConfig: this.productFormConfig
+            formConfig: this.productFormConfig,
+            // realTime: true, // Disabled: testing realtime on transactions table only
+            entityName: 'Product'
         };
         //--------------------------Product Components (Bundle Configuration)-------------------------
         // Product component form for adding/editing bundle components
@@ -5329,7 +5433,9 @@ class InventoryService {
                 this.serviceItemDeleteButton
             ],
             loadAction: { url: 'serviceitems/all/x' },
-            formConfig: this.serviceItemFormConfig
+            formConfig: this.serviceItemFormConfig,
+            // realTime: true, // Disabled: testing realtime on transactions table only
+            entityName: 'ServiceItem'
         };
         //--------------------------Requisitions-------------------------
         this.requisitionItemFormConfig = {
@@ -5418,7 +5524,9 @@ class InventoryService {
                 this.requisitionCancelButton
             ],
             loadAction: { url: 'requisitions/all/x' },
-            formConfig: this.requisitionFormConfig
+            formConfig: this.requisitionFormConfig,
+            // realTime: true, // Disabled: testing realtime on transactions table only
+            entityName: 'Requisition'
         };
         // Removed: Purchase Orders configs moved to PurchasingService
         // Removed: Inventory Receipts configs moved to PurchasingService
@@ -5462,7 +5570,9 @@ class InventoryService {
                 { name: 'view', dialog: true, detailsConfig: this.inventoryItemDetailsConfig }
             ],
             loadAction: { url: 'inventoryitems/all/x' },
-            formConfig: this.inventoryItemFormConfig
+            formConfig: this.inventoryItemFormConfig,
+            // realTime: true, // Disabled: testing realtime on transactions table only
+            entityName: 'InventoryItem'
         };
         //--------------------------Inventory Adjustments-------------------------
         // Updated: Changed form from all-readonly to editable fields for create/edit
@@ -5515,7 +5625,9 @@ class InventoryService {
                 this.inventoryAdjustmentDeleteButton
             ],
             loadAction: { url: 'inventoryadjustments/all/x' },
-            formConfig: this.inventoryAdjustmentFormConfig
+            formConfig: this.inventoryAdjustmentFormConfig,
+            // realTime: true, // Disabled: testing realtime on transactions table only
+            entityName: 'InventoryAdjustment'
         };
         //--------------------------Inventory Returns-------------------------
         // Added: Return item form config with conditional fields based on return type
@@ -5619,7 +5731,9 @@ class InventoryService {
                 this.inventoryReturnRejectButton
             ],
             loadAction: { url: 'inventoryreturns/all/x' },
-            formConfig: this.inventoryReturnFormConfig
+            formConfig: this.inventoryReturnFormConfig,
+            // realTime: true, // Disabled: testing realtime on transactions table only
+            entityName: 'InventoryReturn'
         };
         //--------------------------Inventory Transactions-------------------------
         this.inventoryTransactionFormConfig = {
@@ -5660,7 +5774,9 @@ class InventoryService {
                 { name: 'view', dialog: true, detailsConfig: this.inventoryTransactionDetailsConfig }
             ],
             loadAction: { url: 'inventorytransactions/all/x' },
-            formConfig: this.inventoryTransactionFormConfig
+            formConfig: this.inventoryTransactionFormConfig,
+            // realTime: true, // Disabled: testing realtime on transactions table only
+            entityName: 'InventoryTransaction'
         };
         //--------------------------Inventory Stock (Grouped by Product)-------------------------
         // Changed: Reuse existing inventoryItemsTableConfig with product criteria filter
@@ -6259,9 +6375,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
 
 // Functional guard for Angular 15+ (replaces deprecated class-based CanActivate)
 // Changed: Returns Promise<boolean> to properly await token refresh before allowing navigation
-const authGuard = (route, state) => {
+const authGuard = async (route, state) => {
     const authService = inject(AuthService);
-    return authService.checkAuthentication();
+    const signalRService = inject(SignalRService);
+    const httpService = inject(HttpService);
+    const storageService = inject(StorageService);
+    const isAuthenticated = await authService.checkAuthentication();
+    // Changed: Ensure SignalR data hub connection is started on every authenticated route access
+    if (isAuthenticated) {
+        const dataHubUrl = httpService.apiUrl.replace(/\/api\/$/, '/hubs/data');
+        const token = await storageService.get(Constants.AUTH_TOKEN);
+        if (token)
+            signalRService.startDataConnection(dataHubUrl, token);
+    }
+    return isAuthenticated;
 };
 
 // Functional guard for plan-based feature gating — blocks navigation to restricted routes
@@ -11260,11 +11387,11 @@ class TableHeaderComponent {
         return this.buttonService.getButtonColor(button, row);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableHeaderComponent, deps: [{ token: ButtonService }, { token: DialogService }, { token: MessageService }, { token: CsvService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TableHeaderComponent, isStandalone: false, selector: "app-table-header", inputs: { lastSearch: "lastSearch", config: "config", hideTitle: "hideTitle", tableDataSource: "tableDataSource", tileConfig: "tileConfig", smallScreen: "smallScreen", tileReload: "tileReload", showFilterButton: "showFilterButton", data: "data", tileData: "tileData" }, outputs: { createClick: "createClick", customClick: "customClick", refreshClick: "refreshClick", tileClick: "tileClick", tileUnClick: "tileUnClick" }, ngImport: i0, template: "<!--Tiles Top Position -->\r\n<ng-container *ngIf=\"config.tileConfig && !smallScreen && config.tileConfig.headerPosition == 'top'\">\r\n  <spa-tiles [config]=\"config.tileConfig\" [reload]=\"tileReload\" [data]=\"tileData\" [lastSearch]=\"lastSearch\" (tileClick)=\"onTileClick($event)\" (tileUnClick)=\"onTileUnClick($event)\"></spa-tiles>\r\n</ng-container>\r\n\r\n<div class=\"top\">\r\n\r\n    <!-- buttons -->\r\n  <div class=\"tin-row\" style=\"margin-right: 10px;\" *ngIf=\"getHeaderButtons().length > 0\" >\r\n\r\n    <ng-container *ngFor=\"let button of getHeaderButtons()\">\r\n      <ng-container *ngIf=\"testVisible(button)\" >\r\n        <button *ngIf=\"!config.flatButtons\" mat-raised-button color=\"primary\" [disabled]=\"testDisabled(button)\" (click)=\"onButtonClick(button)\" >\r\n          {{button.display}}\r\n        </button>\r\n        <button *ngIf=\"config.flatButtons\" mat-stroked-button [disabled]=\"testDisabled(button)\" (click)=\"onButtonClick(button)\" [ngStyle]=\"{'color': getButtonColor(button, config.parentData)}\">\r\n          {{button.display}}\r\n        </button>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n  <div *ngIf=\"getHeaderButtons().length == 0 && config.holdHeaderButtonSpace || getHeaderButtons().length == 0 && !config.tileConfig\"></div>\r\n\r\n  <!-- tiles -->\r\n  <div *ngIf=\"config.tileConfig && !smallScreen && (!config.tileConfig.headerPosition || config.tileConfig.headerPosition == 'middle')\" style=\"min-width: 75%;\">\r\n    <spa-tiles [config]=\"config.tileConfig\" [reload]=\"tileReload\" [data]=\"tileData\" [lastSearch]=\"lastSearch\" (tileClick)=\"onTileClick($event)\" (tileUnClick)=\"onTileUnClick($event)\"></spa-tiles>\r\n  </div>\r\n\r\n  <!-- filter -->\r\n  <div class=\"tin-row d-flex justify-content-end\" >\r\n\r\n    <button *ngIf=\"config.download && testVisibleHeaderButton(config.download)\" mat-icon-button class=\"header-action-btn\" matTooltip=\"Download\" matTooltipPosition=\"above\" color=\"primary\" (click)=\"onDownloadClick()\">\r\n      <mat-icon>download</mat-icon>\r\n    </button>\r\n\r\n    <button *ngIf=\"config.upload && testVisibleHeaderButton(config.upload)\" mat-icon-button class=\"header-action-btn\" matTooltip=\"Upload\" matTooltipPosition=\"above\" color=\"primary\"  (click)=\"onUploadClick()\">\r\n      <mat-icon>upload</mat-icon>\r\n    </button>\r\n\r\n    <div *ngIf=\"config.showFilter\" >\r\n      <spa-filter [showText]=\"!smallScreen || (smallScreen && tableDataSource?.data?.length > 10)\" [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" [flatButtons]=\"config.flatButtons\" [smallScreen]=\"smallScreen\" (refreshClick)=\"onRefreshClick()\"></spa-filter> <!-- Changed: Use .data.length for MatTableDataSource, pass smallScreen for compact width -->\r\n    </div>\r\n    <div *ngIf=\"!config.showFilter && config.holdFilterSpace\"></div>\r\n  </div>\r\n\r\n\r\n</div>\r\n\r\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\r\n  <spa-tiles [config]=\"config.tileConfig\" [reload]=\"tileReload\" [data]=\"tileData\"[lastSearch]=\"lastSearch\" (tileClick)=\"onTileClick($event)\" (tileUnClick)=\"onTileUnClick($event)\"></spa-tiles>\r\n</div>\r\n\r\n<!-- <div *ngIf=\"config.title && !hideTitle\" class=\"title\">\r\n  {{config.title | camelToWords}}\r\n</div> -->\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;row-gap:8px;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.header-action-btn{width:20px!important;height:20px!important}.header-action-btn mat-icon{font-size:18px!important;margin-top:0!important}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.tin-row{display:flex;align-items:center}\n"], dependencies: [{ 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.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: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["flatButtons", "showText", "showButton", "smallScreen", "data"], outputs: ["refreshClick"] }, { kind: "component", type: TilesComponent, selector: "spa-tiles", inputs: ["config", "lastSearch", "data", "reload"], outputs: ["tileActionSelected", "tileClick", "tileUnClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TableHeaderComponent, isStandalone: false, selector: "app-table-header", inputs: { lastSearch: "lastSearch", config: "config", hideTitle: "hideTitle", tableDataSource: "tableDataSource", tileConfig: "tileConfig", smallScreen: "smallScreen", tileReload: "tileReload", showFilterButton: "showFilterButton", data: "data", tileData: "tileData" }, outputs: { createClick: "createClick", customClick: "customClick", refreshClick: "refreshClick", tileClick: "tileClick", tileUnClick: "tileUnClick" }, ngImport: i0, template: "<!--Tiles Top Position -->\r\n<ng-container *ngIf=\"config.tileConfig && !smallScreen && config.tileConfig.headerPosition == 'top'\">\r\n  <spa-tiles [config]=\"config.tileConfig\" [reload]=\"tileReload\" [data]=\"tileData\" [lastSearch]=\"lastSearch\" (tileClick)=\"onTileClick($event)\" (tileUnClick)=\"onTileUnClick($event)\"></spa-tiles>\r\n</ng-container>\r\n\r\n<!-- Changed: Small screen tiles render above header buttons/filter -->\r\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\r\n  <spa-tiles [config]=\"config.tileConfig\" [reload]=\"tileReload\" [data]=\"tileData\" [lastSearch]=\"lastSearch\" (tileClick)=\"onTileClick($event)\" (tileUnClick)=\"onTileUnClick($event)\"></spa-tiles>\r\n</div>\r\n\r\n<div class=\"top\">\r\n\r\n    <!-- buttons -->\r\n  <div class=\"tin-row\" style=\"margin-right: 10px;\" *ngIf=\"getHeaderButtons().length > 0\" >\r\n\r\n    <ng-container *ngFor=\"let button of getHeaderButtons()\">\r\n      <ng-container *ngIf=\"testVisible(button)\" >\r\n        <button *ngIf=\"!config.flatButtons\" mat-raised-button color=\"primary\" [disabled]=\"testDisabled(button)\" (click)=\"onButtonClick(button)\" >\r\n          {{button.display}}\r\n        </button>\r\n        <button *ngIf=\"config.flatButtons\" mat-stroked-button [disabled]=\"testDisabled(button)\" (click)=\"onButtonClick(button)\" [ngStyle]=\"{'color': getButtonColor(button, config.parentData)}\">\r\n          {{button.display}}\r\n        </button>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n  <div *ngIf=\"getHeaderButtons().length == 0 && config.holdHeaderButtonSpace || getHeaderButtons().length == 0 && !config.tileConfig\"></div>\r\n\r\n  <!-- tiles -->\r\n  <div *ngIf=\"config.tileConfig && !smallScreen && (!config.tileConfig.headerPosition || config.tileConfig.headerPosition == 'middle')\" style=\"min-width: 75%;\">\r\n    <spa-tiles [config]=\"config.tileConfig\" [reload]=\"tileReload\" [data]=\"tileData\" [lastSearch]=\"lastSearch\" (tileClick)=\"onTileClick($event)\" (tileUnClick)=\"onTileUnClick($event)\"></spa-tiles>\r\n  </div>\r\n\r\n  <!-- filter -->\r\n  <div class=\"tin-row d-flex justify-content-end\" >\r\n\r\n    <button *ngIf=\"config.download && testVisibleHeaderButton(config.download)\" mat-icon-button class=\"header-action-btn\" matTooltip=\"Download\" matTooltipPosition=\"above\" color=\"primary\" (click)=\"onDownloadClick()\">\r\n      <mat-icon>download</mat-icon>\r\n    </button>\r\n\r\n    <button *ngIf=\"config.upload && testVisibleHeaderButton(config.upload)\" mat-icon-button class=\"header-action-btn\" matTooltip=\"Upload\" matTooltipPosition=\"above\" color=\"primary\"  (click)=\"onUploadClick()\">\r\n      <mat-icon>upload</mat-icon>\r\n    </button>\r\n\r\n    <div *ngIf=\"config.showFilter\" >\r\n      <spa-filter [showText]=\"!smallScreen || (smallScreen && tableDataSource?.data?.length > 10)\" [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" [flatButtons]=\"config.flatButtons\" [smallScreen]=\"smallScreen\" (refreshClick)=\"onRefreshClick()\"></spa-filter> <!-- Changed: Use .data.length for MatTableDataSource, pass smallScreen for compact width -->\r\n    </div>\r\n    <div *ngIf=\"!config.showFilter && config.holdFilterSpace\"></div>\r\n  </div>\r\n\r\n\r\n</div>\r\n\r\n<!-- <div *ngIf=\"config.title && !hideTitle\" class=\"title\">\r\n  {{config.title | camelToWords}}\r\n</div> -->\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;row-gap:8px;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.header-action-btn{width:20px!important;height:20px!important}.header-action-btn mat-icon{font-size:18px!important;margin-top:0!important}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.tin-row{display:flex;align-items:center}\n"], dependencies: [{ 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.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: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FilterComponent, selector: "spa-filter", inputs: ["flatButtons", "showText", "showButton", "smallScreen", "data"], outputs: ["refreshClick"] }, { kind: "component", type: TilesComponent, selector: "spa-tiles", inputs: ["config", "lastSearch", "data", "reload"], outputs: ["tileActionSelected", "tileClick", "tileUnClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-table-header', standalone: false, template: "<!--Tiles Top Position -->\r\n<ng-container *ngIf=\"config.tileConfig && !smallScreen && config.tileConfig.headerPosition == 'top'\">\r\n  <spa-tiles [config]=\"config.tileConfig\" [reload]=\"tileReload\" [data]=\"tileData\" [lastSearch]=\"lastSearch\" (tileClick)=\"onTileClick($event)\" (tileUnClick)=\"onTileUnClick($event)\"></spa-tiles>\r\n</ng-container>\r\n\r\n<div class=\"top\">\r\n\r\n    <!-- buttons -->\r\n  <div class=\"tin-row\" style=\"margin-right: 10px;\" *ngIf=\"getHeaderButtons().length > 0\" >\r\n\r\n    <ng-container *ngFor=\"let button of getHeaderButtons()\">\r\n      <ng-container *ngIf=\"testVisible(button)\" >\r\n        <button *ngIf=\"!config.flatButtons\" mat-raised-button color=\"primary\" [disabled]=\"testDisabled(button)\" (click)=\"onButtonClick(button)\" >\r\n          {{button.display}}\r\n        </button>\r\n        <button *ngIf=\"config.flatButtons\" mat-stroked-button [disabled]=\"testDisabled(button)\" (click)=\"onButtonClick(button)\" [ngStyle]=\"{'color': getButtonColor(button, config.parentData)}\">\r\n          {{button.display}}\r\n        </button>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n  <div *ngIf=\"getHeaderButtons().length == 0 && config.holdHeaderButtonSpace || getHeaderButtons().length == 0 && !config.tileConfig\"></div>\r\n\r\n  <!-- tiles -->\r\n  <div *ngIf=\"config.tileConfig && !smallScreen && (!config.tileConfig.headerPosition || config.tileConfig.headerPosition == 'middle')\" style=\"min-width: 75%;\">\r\n    <spa-tiles [config]=\"config.tileConfig\" [reload]=\"tileReload\" [data]=\"tileData\" [lastSearch]=\"lastSearch\" (tileClick)=\"onTileClick($event)\" (tileUnClick)=\"onTileUnClick($event)\"></spa-tiles>\r\n  </div>\r\n\r\n  <!-- filter -->\r\n  <div class=\"tin-row d-flex justify-content-end\" >\r\n\r\n    <button *ngIf=\"config.download && testVisibleHeaderButton(config.download)\" mat-icon-button class=\"header-action-btn\" matTooltip=\"Download\" matTooltipPosition=\"above\" color=\"primary\" (click)=\"onDownloadClick()\">\r\n      <mat-icon>download</mat-icon>\r\n    </button>\r\n\r\n    <button *ngIf=\"config.upload && testVisibleHeaderButton(config.upload)\" mat-icon-button class=\"header-action-btn\" matTooltip=\"Upload\" matTooltipPosition=\"above\" color=\"primary\"  (click)=\"onUploadClick()\">\r\n      <mat-icon>upload</mat-icon>\r\n    </button>\r\n\r\n    <div *ngIf=\"config.showFilter\" >\r\n      <spa-filter [showText]=\"!smallScreen || (smallScreen && tableDataSource?.data?.length > 10)\" [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" [flatButtons]=\"config.flatButtons\" [smallScreen]=\"smallScreen\" (refreshClick)=\"onRefreshClick()\"></spa-filter> <!-- Changed: Use .data.length for MatTableDataSource, pass smallScreen for compact width -->\r\n    </div>\r\n    <div *ngIf=\"!config.showFilter && config.holdFilterSpace\"></div>\r\n  </div>\r\n\r\n\r\n</div>\r\n\r\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\r\n  <spa-tiles [config]=\"config.tileConfig\" [reload]=\"tileReload\" [data]=\"tileData\"[lastSearch]=\"lastSearch\" (tileClick)=\"onTileClick($event)\" (tileUnClick)=\"onTileUnClick($event)\"></spa-tiles>\r\n</div>\r\n\r\n<!-- <div *ngIf=\"config.title && !hideTitle\" class=\"title\">\r\n  {{config.title | camelToWords}}\r\n</div> -->\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;row-gap:8px;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.header-action-btn{width:20px!important;height:20px!important}.header-action-btn mat-icon{font-size:18px!important;margin-top:0!important}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.tin-row{display:flex;align-items:center}\n"] }]
+            args: [{ selector: 'app-table-header', standalone: false, template: "<!--Tiles Top Position -->\r\n<ng-container *ngIf=\"config.tileConfig && !smallScreen && config.tileConfig.headerPosition == 'top'\">\r\n  <spa-tiles [config]=\"config.tileConfig\" [reload]=\"tileReload\" [data]=\"tileData\" [lastSearch]=\"lastSearch\" (tileClick)=\"onTileClick($event)\" (tileUnClick)=\"onTileUnClick($event)\"></spa-tiles>\r\n</ng-container>\r\n\r\n<!-- Changed: Small screen tiles render above header buttons/filter -->\r\n<div *ngIf=\"config.tileConfig && smallScreen\" style=\"width: 100%;\">\r\n  <spa-tiles [config]=\"config.tileConfig\" [reload]=\"tileReload\" [data]=\"tileData\" [lastSearch]=\"lastSearch\" (tileClick)=\"onTileClick($event)\" (tileUnClick)=\"onTileUnClick($event)\"></spa-tiles>\r\n</div>\r\n\r\n<div class=\"top\">\r\n\r\n    <!-- buttons -->\r\n  <div class=\"tin-row\" style=\"margin-right: 10px;\" *ngIf=\"getHeaderButtons().length > 0\" >\r\n\r\n    <ng-container *ngFor=\"let button of getHeaderButtons()\">\r\n      <ng-container *ngIf=\"testVisible(button)\" >\r\n        <button *ngIf=\"!config.flatButtons\" mat-raised-button color=\"primary\" [disabled]=\"testDisabled(button)\" (click)=\"onButtonClick(button)\" >\r\n          {{button.display}}\r\n        </button>\r\n        <button *ngIf=\"config.flatButtons\" mat-stroked-button [disabled]=\"testDisabled(button)\" (click)=\"onButtonClick(button)\" [ngStyle]=\"{'color': getButtonColor(button, config.parentData)}\">\r\n          {{button.display}}\r\n        </button>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n  </div>\r\n  <div *ngIf=\"getHeaderButtons().length == 0 && config.holdHeaderButtonSpace || getHeaderButtons().length == 0 && !config.tileConfig\"></div>\r\n\r\n  <!-- tiles -->\r\n  <div *ngIf=\"config.tileConfig && !smallScreen && (!config.tileConfig.headerPosition || config.tileConfig.headerPosition == 'middle')\" style=\"min-width: 75%;\">\r\n    <spa-tiles [config]=\"config.tileConfig\" [reload]=\"tileReload\" [data]=\"tileData\" [lastSearch]=\"lastSearch\" (tileClick)=\"onTileClick($event)\" (tileUnClick)=\"onTileUnClick($event)\"></spa-tiles>\r\n  </div>\r\n\r\n  <!-- filter -->\r\n  <div class=\"tin-row d-flex justify-content-end\" >\r\n\r\n    <button *ngIf=\"config.download && testVisibleHeaderButton(config.download)\" mat-icon-button class=\"header-action-btn\" matTooltip=\"Download\" matTooltipPosition=\"above\" color=\"primary\" (click)=\"onDownloadClick()\">\r\n      <mat-icon>download</mat-icon>\r\n    </button>\r\n\r\n    <button *ngIf=\"config.upload && testVisibleHeaderButton(config.upload)\" mat-icon-button class=\"header-action-btn\" matTooltip=\"Upload\" matTooltipPosition=\"above\" color=\"primary\"  (click)=\"onUploadClick()\">\r\n      <mat-icon>upload</mat-icon>\r\n    </button>\r\n\r\n    <div *ngIf=\"config.showFilter\" >\r\n      <spa-filter [showText]=\"!smallScreen || (smallScreen && tableDataSource?.data?.length > 10)\" [showButton]=\"showFilterButton\" [data]=\"tableDataSource\" [flatButtons]=\"config.flatButtons\" [smallScreen]=\"smallScreen\" (refreshClick)=\"onRefreshClick()\"></spa-filter> <!-- Changed: Use .data.length for MatTableDataSource, pass smallScreen for compact width -->\r\n    </div>\r\n    <div *ngIf=\"!config.showFilter && config.holdFilterSpace\"></div>\r\n  </div>\r\n\r\n\r\n</div>\r\n\r\n<!-- <div *ngIf=\"config.title && !hideTitle\" class=\"title\">\r\n  {{config.title | camelToWords}}\r\n</div> -->\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;row-gap:8px;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.header-action-btn{width:20px!important;height:20px!important}.header-action-btn mat-icon{font-size:18px!important;margin-top:0!important}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.tin-row{display:flex;align-items:center}\n"] }]
         }], ctorParameters: () => [{ type: ButtonService }, { type: DialogService }, { type: MessageService }, { type: CsvService }], propDecorators: { lastSearch: [{
                 type: Input
             }], config: [{
@@ -11359,11 +11486,11 @@ class TableRowComponent {
         return false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableRowComponent, deps: [{ token: ButtonService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TableRowComponent, isStandalone: false, selector: "app-table-row", inputs: { column: "column", row: "row", config: "config", smallScreen: "smallScreen" }, outputs: { actionClick: "actionClick", columnClick: "columnClick", showBannerEvent: "showBannerEvent" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"column.type\">\r\n  <ng-container *ngSwitchCase=\"'checkbox'\">\r\n    <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'select'\">\r\n    <spa-select-lite [options]=\"column.options\" [optionDisplay]=\"column.optionDisplay\" [optionValue]=\"column.optionValue\" [(value)]=\"row[column.name]\" width=\"90%\"></spa-select-lite>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'chip'\">\r\n    <button mat-stroked-button (click)=\"onColumnClick(column, row)\" [ngStyle]=\"{'background-color': getColorOnCondition(row, column), 'color': 'rgba(0, 0, 0, 0.87)', 'border': 'none'}\">{{row[column.name]}}</button>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'icon'\">\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'date'\">\r\n    {{row[column.name] | date : 'dd/MM/yyyy'}}\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'datetime'\">\r\n    {{row[column.name] | date : 'dd/MM/yyyy HH:mm'}}\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'datetimesec'\">\r\n    {{row[column.name] | date : 'dd/MM/yyyy HH:mm:ss'}}\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'money'\">\r\n    <label [ngStyle]=\"{'color': getColorOnCondition(row, column) }\">{{row[column.name] | currency:'':''}}</label>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'button'\">\r\n    <button mat-stroked-button (click)=\"onColumnClick(column, row)\" [ngStyle]=\"{'color': getColorOnCondition(row, column)}\" >{{row[column.name]}}</button>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchDefault>\r\n    <label [ngStyle]=\"{'color': getColorOnCondition(row, column) }\">\r\n      <ng-container *ngIf=\"column.type === 'number'\">\r\n        {{row[column.name] | number:'1.0-2'}}\r\n      </ng-container>\r\n      <ng-container *ngIf=\"column.type !== 'number'\">\r\n        {{textDisplayed(row, column)}}\r\n      </ng-container>\r\n    </label>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"textTruncated(row, column)\" matTooltip='Show more'  matTooltipPosition=\"above\" (click)=\"showBanner(row[column.name])\">more_horiz</mat-icon>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-container>\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px;vertical-align:middle}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.table-chip{font-size:14px!important;font-weight:500!important;letter-spacing:.25px!important;padding:8px 20px!important;min-height:36px!important;height:auto!important;border-radius:24px!important;cursor:pointer!important;transition:all .2s ease!important;color:#000000de!important;box-shadow:none!important;border:1.5px solid rgba(0,0,0,.2)!important;text-transform:none!important;white-space:nowrap!important;background-clip:padding-box!important}.table-chip:hover{transform:none!important;box-shadow:none!important;filter:brightness(.96)!important;border-color:#0000004d!important}.table-chip:active{transform:scale(.98)!important;box-shadow:none!important;transition-duration:.1s!important;filter:brightness(.92)!important}\n"], dependencies: [{ 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: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i4.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: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value", "infoMessage"], outputs: ["valueChange", "click", "check", "uncheck", "infoClick"] }, { kind: "component", type: SelectLiteComponent, selector: "spa-select-lite" }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i2.DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TableRowComponent, isStandalone: false, selector: "app-table-row", inputs: { column: "column", row: "row", config: "config", smallScreen: "smallScreen" }, outputs: { actionClick: "actionClick", columnClick: "columnClick", showBannerEvent: "showBannerEvent" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"column.type\">\r\n  <ng-container *ngSwitchCase=\"'checkbox'\">\r\n    <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'select'\">\r\n    <spa-select-lite [options]=\"column.options\" [optionDisplay]=\"column.optionDisplay\" [optionValue]=\"column.optionValue\" [(value)]=\"row[column.name]\" width=\"90%\"></spa-select-lite>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'chip'\">\r\n    <button mat-stroked-button (click)=\"onColumnClick(column, row)\" [ngStyle]=\"{'background-color': getColorOnCondition(row, column), 'color': 'rgba(0, 0, 0, 0.87)', 'border': 'none'}\">{{row[column.name]}}</button>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'icon'\">\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'date'\">\r\n    {{row[column.name] | date : 'dd/MM/yyyy'}}\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'datetime'\">\r\n    {{row[column.name] | date : 'dd/MM/yyyy HH:mm'}}\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'datetimesec'\">\r\n    {{row[column.name] | date : 'dd/MM/yyyy HH:mm:ss'}}\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'money'\">\r\n    <label [ngStyle]=\"{'color': getColorOnCondition(row, column) }\">{{row[column.name] | currency:'':''}}</label>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'button'\">\r\n    <button mat-stroked-button (click)=\"onColumnClick(column, row)\" [ngStyle]=\"{'color': getColorOnCondition(row, column)}\" >{{row[column.name]}}</button>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchDefault>\r\n    <label [ngStyle]=\"{'color': getColorOnCondition(row, column) }\">\r\n      <ng-container *ngIf=\"column.type === 'number'\">\r\n        {{row[column.name] | number:'1.0-2'}}\r\n      </ng-container>\r\n      <ng-container *ngIf=\"column.type !== 'number'\">\r\n        {{textDisplayed(row, column)}}\r\n      </ng-container>\r\n    </label>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"textTruncated(row, column)\" matTooltip='Show more'  matTooltipPosition=\"above\" (click)=\"showBanner(row[column.name])\">more_horiz</mat-icon>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-container>\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px;vertical-align:middle}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.mat-mdc-cell .mat-mdc-outlined-button,.mat-mdc-cell .mat-mdc-button-base:not(.mat-mdc-icon-button){height:auto!important;min-height:36px!important;white-space:normal!important;word-break:break-word!important;overflow-wrap:break-word!important;line-height:1.4!important;text-align:left!important;padding:6px 16px!important}.mat-mdc-cell .mat-mdc-outlined-button .mdc-button__label,.mat-mdc-cell .mat-mdc-button-base:not(.mat-mdc-icon-button) .mdc-button__label{white-space:normal!important;word-break:break-word!important;overflow-wrap:break-word!important}\n"], dependencies: [{ 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: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i4.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: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value", "infoMessage"], outputs: ["valueChange", "click", "check", "uncheck", "infoClick"] }, { kind: "component", type: SelectLiteComponent, selector: "spa-select-lite" }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i2.DatePipe, name: "date" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableRowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-table-row', standalone: false, template: "<ng-container [ngSwitch]=\"column.type\">\r\n  <ng-container *ngSwitchCase=\"'checkbox'\">\r\n    <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'select'\">\r\n    <spa-select-lite [options]=\"column.options\" [optionDisplay]=\"column.optionDisplay\" [optionValue]=\"column.optionValue\" [(value)]=\"row[column.name]\" width=\"90%\"></spa-select-lite>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'chip'\">\r\n    <button mat-stroked-button (click)=\"onColumnClick(column, row)\" [ngStyle]=\"{'background-color': getColorOnCondition(row, column), 'color': 'rgba(0, 0, 0, 0.87)', 'border': 'none'}\">{{row[column.name]}}</button>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'icon'\">\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'date'\">\r\n    {{row[column.name] | date : 'dd/MM/yyyy'}}\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'datetime'\">\r\n    {{row[column.name] | date : 'dd/MM/yyyy HH:mm'}}\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'datetimesec'\">\r\n    {{row[column.name] | date : 'dd/MM/yyyy HH:mm:ss'}}\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'money'\">\r\n    <label [ngStyle]=\"{'color': getColorOnCondition(row, column) }\">{{row[column.name] | currency:'':''}}</label>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'button'\">\r\n    <button mat-stroked-button (click)=\"onColumnClick(column, row)\" [ngStyle]=\"{'color': getColorOnCondition(row, column)}\" >{{row[column.name]}}</button>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchDefault>\r\n    <label [ngStyle]=\"{'color': getColorOnCondition(row, column) }\">\r\n      <ng-container *ngIf=\"column.type === 'number'\">\r\n        {{row[column.name] | number:'1.0-2'}}\r\n      </ng-container>\r\n      <ng-container *ngIf=\"column.type !== 'number'\">\r\n        {{textDisplayed(row, column)}}\r\n      </ng-container>\r\n    </label>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"textTruncated(row, column)\" matTooltip='Show more'  matTooltipPosition=\"above\" (click)=\"showBanner(row[column.name])\">more_horiz</mat-icon>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-container>\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px;vertical-align:middle}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.table-chip{font-size:14px!important;font-weight:500!important;letter-spacing:.25px!important;padding:8px 20px!important;min-height:36px!important;height:auto!important;border-radius:24px!important;cursor:pointer!important;transition:all .2s ease!important;color:#000000de!important;box-shadow:none!important;border:1.5px solid rgba(0,0,0,.2)!important;text-transform:none!important;white-space:nowrap!important;background-clip:padding-box!important}.table-chip:hover{transform:none!important;box-shadow:none!important;filter:brightness(.96)!important;border-color:#0000004d!important}.table-chip:active{transform:scale(.98)!important;box-shadow:none!important;transition-duration:.1s!important;filter:brightness(.92)!important}\n"] }]
+            args: [{ selector: 'app-table-row', encapsulation: ViewEncapsulation.None, standalone: false, template: "<ng-container [ngSwitch]=\"column.type\">\r\n  <ng-container *ngSwitchCase=\"'checkbox'\">\r\n    <spa-check [value]=\"row[column.name]\" [readonly]=\"true\"></spa-check>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'select'\">\r\n    <spa-select-lite [options]=\"column.options\" [optionDisplay]=\"column.optionDisplay\" [optionValue]=\"column.optionValue\" [(value)]=\"row[column.name]\" width=\"90%\"></spa-select-lite>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'chip'\">\r\n    <button mat-stroked-button (click)=\"onColumnClick(column, row)\" [ngStyle]=\"{'background-color': getColorOnCondition(row, column), 'color': 'rgba(0, 0, 0, 0.87)', 'border': 'none'}\">{{row[column.name]}}</button>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'icon'\">\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'date'\">\r\n    {{row[column.name] | date : 'dd/MM/yyyy'}}\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'datetime'\">\r\n    {{row[column.name] | date : 'dd/MM/yyyy HH:mm'}}\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'datetimesec'\">\r\n    {{row[column.name] | date : 'dd/MM/yyyy HH:mm:ss'}}\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'money'\">\r\n    <label [ngStyle]=\"{'color': getColorOnCondition(row, column) }\">{{row[column.name] | currency:'':''}}</label>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchCase=\"'button'\">\r\n    <button mat-stroked-button (click)=\"onColumnClick(column, row)\" [ngStyle]=\"{'color': getColorOnCondition(row, column)}\" >{{row[column.name]}}</button>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngSwitchDefault>\r\n    <label [ngStyle]=\"{'color': getColorOnCondition(row, column) }\">\r\n      <ng-container *ngIf=\"column.type === 'number'\">\r\n        {{row[column.name] | number:'1.0-2'}}\r\n      </ng-container>\r\n      <ng-container *ngIf=\"column.type !== 'number'\">\r\n        {{textDisplayed(row, column)}}\r\n      </ng-container>\r\n    </label>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"textTruncated(row, column)\" matTooltip='Show more'  matTooltipPosition=\"above\" (click)=\"showBanner(row[column.name])\">more_horiz</mat-icon>\r\n    <mat-icon class=\"col-icon\" *ngIf=\"column.icon && testIconCondition(row, column.icon)\" [matTooltip]=\"row[column.icon.tipField] ?? column.icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[column.icon.tipField])\" [ngStyle]=\"{'color':column.icon?.color}\">{{column.icon.name }}</mat-icon>\r\n    <ng-container *ngFor=\"let icon of column.icons\">\r\n      <mat-icon class=\"col-icon\" *ngIf=\"testIconCondition(row, icon)\" [matTooltip]=\"row[icon.tipField] ?? icon?.tip\" matTooltipPosition=\"above\" (click)=\"showBanner(row[icon.tipField])\" [ngStyle]=\"{'color':icon?.color}\">{{icon.name }}</mat-icon>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-container>\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px;vertical-align:middle}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#e5e5e5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.mat-mdc-cell .mat-mdc-outlined-button,.mat-mdc-cell .mat-mdc-button-base:not(.mat-mdc-icon-button){height:auto!important;min-height:36px!important;white-space:normal!important;word-break:break-word!important;overflow-wrap:break-word!important;line-height:1.4!important;text-align:left!important;padding:6px 16px!important}.mat-mdc-cell .mat-mdc-outlined-button .mdc-button__label,.mat-mdc-cell .mat-mdc-button-base:not(.mat-mdc-icon-button) .mdc-button__label{white-space:normal!important;word-break:break-word!important;overflow-wrap:break-word!important}\n"] }]
         }], ctorParameters: () => [{ type: ButtonService }], propDecorators: { column: [{
                 type: Input
             }], row: [{
@@ -12245,7 +12372,7 @@ class TableLiteComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableLiteComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i1$3.BreakpointObserver }, { token: i1.MatDialog }, { token: ButtonService }, { token: DialogService }, { token: TableConfigService }, { token: ConditionService }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TableLiteComponent, isStandalone: false, selector: "spa-table-lite", inputs: { data: "data", tileData: "tileData", config: "config", reload: "reload", activeTab: "activeTab", inTab: "inTab" }, outputs: { dataLoad: "dataLoad", actionSuccess: "actionSuccess", refreshClick: "refreshClick", searchClick: "searchClick", createClick: "createClick", actionClick: "actionClick", inputChange: "inputChange", actionResponse: "actionResponse" }, viewQueries: [{ propertyName: "tablePaginator", first: true, predicate: ["tablePaginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\r\n<ng-container *ngIf=\"hasFormAccess\">\r\n\r\n  <!-- Search -->\r\n  <spa-search\r\n    *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" [smallScreen]=\"smallScreen\" [tableDataSource]=\"tableDataSource\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\">\r\n  </spa-search>\r\n\r\n  <!-- Header -->\r\n  <app-table-header\r\n    [config]=\"config\" [data]=\"dataSource\" [tableDataSource]=\"tableDataSource\" [tileConfig]=\"config.tileConfig\" [tileData]=\"tileData\" [tileReload]=\"tileReload\" [lastSearch]=\"lastSearch\" [smallScreen]=\"smallScreen\"\r\n    [showFilterButton]=\"showFilterButton\" (createClick)=\"newModel()\" (customClick)=\"customModel($event,null)\"\r\n    (refreshClick)=\"refreshClicked()\" (tileClick)=\"tileClicked($event)\" (tileUnClick)=\"tileUnClicked($event)\">\r\n  </app-table-header>\r\n\r\n\r\n  <!-- Table -->\r\n  <div *ngIf=\"!config.viewType || config?.viewType === 'table'\">\r\n\r\n    <p *ngIf=\"!config\"><em>Configure Table</em></p>\r\n    <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\r\n\r\n    <div *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\">\r\n\r\n      <table mat-table [dataSource]=\"tableDataSource\"  [ngClass]=\"elevation\">\r\n\r\n        <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\r\n          <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\r\n          <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\r\n\r\n            <!-- Rows -->\r\n            <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\" [smallScreen]=\"smallScreen\"\r\n              (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\r\n            </app-table-row>\r\n\r\n          </td>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"action\">\r\n          <th mat-header-cell *matHeaderCellDef> Action </th>\r\n          <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\r\n            <div class=\"action-buttons-container\">\r\n\r\n              <!-- Actions -->\r\n              <app-table-action\r\n                [displayedButtons]=\"displayedButtons\" [config]=\"config\" [smallScreen]=\"smallScreen\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\r\n              </app-table-action>\r\n\r\n            </div>\r\n          </td>\r\n        </ng-container>\r\n\r\n\r\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': (config.greyOut && config.greyOut(row)) || row.pendingApproval}\"></tr>\r\n      </table>\r\n\r\n    </div>\r\n\r\n    <!-- Changed: Removed *ngIf condition to keep paginator always in DOM and maintain ViewChild reference -->\r\n    <!-- Changed: Added CSS class binding to hide when no data instead of conditional rendering -->\r\n    <mat-paginator \r\n      #tablePaginator \r\n      [pageSizeOptions]=\"config.pageSizes ?? [10, 20, 50]\" \r\n      [ngClass]=\"{'paginator-hidden': !dataSource || (smallScreen && dataSource?.length === 0)}\"\r\n      showFirstLastButtons>\r\n    </mat-paginator>\r\n\r\n  </div>\r\n  \r\n  <!-- Capsules -->\r\n  <spa-capsules *ngIf=\"config?.viewType === 'capsule'\"\r\n    [config]=\"config\"\r\n    [dataSource]=\"dataSource\"\r\n    [displayedButtons]=\"displayedButtons\"\r\n    (actionClick)=\"actionClicked($event.name, $event.row)\">\r\n  </spa-capsules>\r\n\r\n    <!-- Cards -->\r\n  <spa-cards *ngIf=\"config?.viewType === 'card'\"\r\n    [config]=\"config\"\r\n    [dataSource]=\"dataSource\"\r\n    [displayedButtons]=\"displayedButtons\"\r\n    [smallScreen]=\"smallScreen\"\r\n    (actionClick)=\"actionClicked($event.name, $event.row)\"\r\n    (columnClick)=\"columnClicked($event.column, $event.row)\"\r\n    (showBannerEvent)=\"showBanner($event)\">\r\n  </spa-cards>\r\n\r\n  <!-- Groups -->\r\n  <spa-groups *ngIf=\"config?.viewType === 'grouped'\"\r\n    [config]=\"config\"\r\n    [dataSource]=\"dataSource\"\r\n    [displayedButtons]=\"displayedButtons\"\r\n    (actionClick)=\"actionClicked($event.name, $event.row, $event.group, $event.button)\">\r\n  </spa-groups>\r\n\r\n  <div class=\"tin-center\">\r\n    <p *ngIf=\"dataSource?.length == 0\"><em>{{config.noDataMessage ?? 'No Data'}}</em></p>\r\n  </div>\r\n\r\n</ng-container>\r\n\r\n\r\n<ng-container *ngIf=\"!hasFormAccess\">\r\n  <div class=\"tin-center\">\r\n    <p><em>Access Restricted</em></p>\r\n  </div>\r\n</ng-container>\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#f5f5f5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0;justify-content:flex-start}.paginator-hidden{display:none!important}\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: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i11.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i12$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: SearchComponent, selector: "spa-search", inputs: ["config", "smallScreen", "tableDataSource"], outputs: ["searchClick"] }, { kind: "component", type: TableHeaderComponent, selector: "app-table-header", inputs: ["lastSearch", "config", "hideTitle", "tableDataSource", "tileConfig", "smallScreen", "tileReload", "showFilterButton", "data", "tileData"], outputs: ["createClick", "customClick", "refreshClick", "tileClick", "tileUnClick"] }, { kind: "component", type: TableRowComponent, selector: "app-table-row", inputs: ["column", "row", "config", "smallScreen"], outputs: ["actionClick", "columnClick", "showBannerEvent"] }, { kind: "component", type: TableActionComponent, selector: "app-table-action", inputs: ["displayedButtons", "config", "row", "smallScreen"], outputs: ["actionClick"] }, { kind: "component", type: CapsulesComponent, selector: "spa-capsules", inputs: ["config", "dataSource", "displayedButtons"], outputs: ["actionClick"] }, { kind: "component", type: CardsComponent, selector: "spa-cards", inputs: ["config", "dataSource", "displayedButtons", "smallScreen"], outputs: ["actionClick", "columnClick", "showBannerEvent"] }, { kind: "component", type: GroupsComponent, selector: "spa-groups", inputs: ["config", "dataSource", "displayedButtons"], outputs: ["actionClick"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TableLiteComponent, isStandalone: false, selector: "spa-table-lite", inputs: { data: "data", tileData: "tileData", config: "config", reload: "reload", activeTab: "activeTab", inTab: "inTab" }, outputs: { dataLoad: "dataLoad", actionSuccess: "actionSuccess", refreshClick: "refreshClick", searchClick: "searchClick", createClick: "createClick", actionClick: "actionClick", inputChange: "inputChange", actionResponse: "actionResponse" }, viewQueries: [{ propertyName: "tablePaginator", first: true, predicate: ["tablePaginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\r\n<ng-container *ngIf=\"hasFormAccess\">\r\n\r\n  <!-- Search -->\r\n  <spa-search\r\n    *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" [smallScreen]=\"smallScreen\" [tableDataSource]=\"tableDataSource\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\">\r\n  </spa-search>\r\n\r\n  <!-- Header -->\r\n  <app-table-header\r\n    [config]=\"config\" [data]=\"dataSource\" [tableDataSource]=\"tableDataSource\" [tileConfig]=\"config.tileConfig\" [tileData]=\"tileData\" [tileReload]=\"tileReload\" [lastSearch]=\"lastSearch\" [smallScreen]=\"smallScreen\"\r\n    [showFilterButton]=\"showFilterButton\" (createClick)=\"newModel()\" (customClick)=\"customModel($event,null)\"\r\n    (refreshClick)=\"refreshClicked()\" (tileClick)=\"tileClicked($event)\" (tileUnClick)=\"tileUnClicked($event)\">\r\n  </app-table-header>\r\n\r\n\r\n  <!-- Table -->\r\n  <div *ngIf=\"!config.viewType || config?.viewType === 'table'\">\r\n\r\n    <p *ngIf=\"!config\"><em>Configure Table</em></p>\r\n    <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\r\n\r\n    <div *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\">\r\n\r\n      <table mat-table [dataSource]=\"tableDataSource\"  [ngClass]=\"elevation\">\r\n\r\n        <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\r\n          <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\r\n          <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\r\n\r\n            <!-- Rows -->\r\n            <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\" [smallScreen]=\"smallScreen\"\r\n              (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\r\n            </app-table-row>\r\n\r\n          </td>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"action\">\r\n          <th mat-header-cell *matHeaderCellDef> Action </th>\r\n          <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\r\n            <div class=\"action-buttons-container\">\r\n\r\n              <!-- Actions -->\r\n              <app-table-action\r\n                [displayedButtons]=\"displayedButtons\" [config]=\"config\" [smallScreen]=\"smallScreen\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\r\n              </app-table-action>\r\n\r\n            </div>\r\n          </td>\r\n        </ng-container>\r\n\r\n\r\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': (config.greyOut && config.greyOut(row)) || row.pendingApproval}\"></tr>\r\n      </table>\r\n\r\n    </div>\r\n\r\n    <!-- Changed: Removed *ngIf condition to keep paginator always in DOM and maintain ViewChild reference -->\r\n    <!-- Changed: Added CSS class binding to hide when no data instead of conditional rendering -->\r\n    <mat-paginator \r\n      #tablePaginator \r\n      [pageSizeOptions]=\"config.pageSizes ?? [10, 20, 50]\" \r\n      [ngClass]=\"{'paginator-hidden': !dataSource || (smallScreen && dataSource?.length === 0)}\"\r\n      showFirstLastButtons>\r\n    </mat-paginator>\r\n\r\n  </div>\r\n  \r\n  <!-- Capsules -->\r\n  <spa-capsules *ngIf=\"config?.viewType === 'capsule'\"\r\n    [config]=\"config\"\r\n    [dataSource]=\"dataSource\"\r\n    [displayedButtons]=\"displayedButtons\"\r\n    (actionClick)=\"actionClicked($event.name, $event.row)\">\r\n  </spa-capsules>\r\n\r\n    <!-- Cards -->\r\n  <spa-cards *ngIf=\"config?.viewType === 'card'\"\r\n    [config]=\"config\"\r\n    [dataSource]=\"dataSource\"\r\n    [displayedButtons]=\"displayedButtons\"\r\n    [smallScreen]=\"smallScreen\"\r\n    (actionClick)=\"actionClicked($event.name, $event.row)\"\r\n    (columnClick)=\"columnClicked($event.column, $event.row)\"\r\n    (showBannerEvent)=\"showBanner($event)\">\r\n  </spa-cards>\r\n\r\n  <!-- Groups -->\r\n  <spa-groups *ngIf=\"config?.viewType === 'grouped'\"\r\n    [config]=\"config\"\r\n    [dataSource]=\"dataSource\"\r\n    [displayedButtons]=\"displayedButtons\"\r\n    (actionClick)=\"actionClicked($event.name, $event.row, $event.group, $event.button)\">\r\n  </spa-groups>\r\n\r\n  <div class=\"tin-center\">\r\n    <p *ngIf=\"dataSource?.length == 0\"><em>{{config.noDataMessage ?? 'No Data'}}</em></p>\r\n  </div>\r\n\r\n</ng-container>\r\n\r\n\r\n<ng-container *ngIf=\"!hasFormAccess\">\r\n  <div class=\"tin-center\">\r\n    <p><em>Access Restricted</em></p>\r\n  </div>\r\n</ng-container>\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#f5f5f5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0;justify-content:flex-start}.paginator-hidden{display:none!important}\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: i12$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i12$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i12$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i12$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i12$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i12$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i12$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i12$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i12$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i12$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i13.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: SearchComponent, selector: "spa-search", inputs: ["config", "smallScreen", "tableDataSource"], outputs: ["searchClick"] }, { kind: "component", type: TableHeaderComponent, selector: "app-table-header", inputs: ["lastSearch", "config", "hideTitle", "tableDataSource", "tileConfig", "smallScreen", "tileReload", "showFilterButton", "data", "tileData"], outputs: ["createClick", "customClick", "refreshClick", "tileClick", "tileUnClick"] }, { kind: "component", type: TableRowComponent, selector: "app-table-row", inputs: ["column", "row", "config", "smallScreen"], outputs: ["actionClick", "columnClick", "showBannerEvent"] }, { kind: "component", type: TableActionComponent, selector: "app-table-action", inputs: ["displayedButtons", "config", "row", "smallScreen"], outputs: ["actionClick"] }, { kind: "component", type: CapsulesComponent, selector: "spa-capsules", inputs: ["config", "dataSource", "displayedButtons"], outputs: ["actionClick"] }, { kind: "component", type: CardsComponent, selector: "spa-cards", inputs: ["config", "dataSource", "displayedButtons", "smallScreen"], outputs: ["actionClick", "columnClick", "showBannerEvent"] }, { kind: "component", type: GroupsComponent, selector: "spa-groups", inputs: ["config", "dataSource", "displayedButtons"], outputs: ["actionClick"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableLiteComponent, decorators: [{
             type: Component,
@@ -12742,7 +12869,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
 ;
 
 class TableInternalComponent {
-    constructor(dataService, messageService, breakpointObserver, dialog, buttonService, dialogService, tableConfigService, conditionService, authService) {
+    constructor(dataService, messageService, breakpointObserver, dialog, buttonService, dialogService, tableConfigService, conditionService, authService, signalRService) {
         this.dataService = dataService;
         this.messageService = messageService;
         this.breakpointObserver = breakpointObserver;
@@ -12752,6 +12879,7 @@ class TableInternalComponent {
         this.tableConfigService = tableConfigService;
         this.conditionService = conditionService;
         this.authService = authService;
+        this.signalRService = signalRService;
         this.elevation = "mat-elevation-z5";
         this.actionsWidth = "50px";
         this.showFilterButton = true;
@@ -12773,6 +12901,10 @@ class TableInternalComponent {
         this.actionClick = new EventEmitter();
         this.inputChange = new EventEmitter();
         this.actionResponse = new EventEmitter();
+        // Changed: Real-time SignalR subscription management
+        this.realTimeSubs = [];
+        this.realTimeEntityName = '';
+        this.pendingRealTimeUpdate = false;
         // detect screen size changes
         this.breakpointObserver.observe(["(max-width: 600px)"]).subscribe((result) => {
             this.smallScreen = result.matches;
@@ -12812,6 +12944,8 @@ class TableInternalComponent {
         this.dataSource = this.data;
         this.tableDataSource = new MatTableDataSource(this.dataSource);
         this.setPaginator(); // Set paginator after datasource initialization
+        if (this.config.realTime)
+            this.setupRealTimeSubscriptions(); // Changed: Subscribe to SignalR entity changes
     }
     updateTableConfiguration() {
         this.elevation = this.getElevationClass(this.config?.elevation);
@@ -13057,7 +13191,7 @@ class TableInternalComponent {
             else if (result.message === 'success') {
                 this.actionClickedEmit(buttonName, result.data);
                 this.actionResponse.emit({ name: buttonName, data: result.data });
-                this.refreshClicked();
+                this.realTimeRefreshOrFallback(); // Changed: Use real-time update if enabled, otherwise refresh
                 this.actionSuccess.emit();
                 if (buttonName == 'create' && btn.editOnSuccess) {
                     this.editModel(result.data.data);
@@ -13123,7 +13257,7 @@ class TableInternalComponent {
                 else {
                     this.messageService.toast("Updated");
                 }
-                this.refreshClicked();
+                this.realTimeRefreshOrFallback(); // Changed: Use real-time update if enabled, otherwise refresh
                 this.actionSuccess.emit();
             }
             else {
@@ -13152,13 +13286,87 @@ class TableInternalComponent {
             return "mat-elevation-z5";
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableInternalComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i1$3.BreakpointObserver }, { token: i1.MatDialog }, { token: ButtonService }, { token: DialogService }, { token: TableConfigService }, { token: ConditionService }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TableInternalComponent, isStandalone: false, selector: "spa-table-internal", inputs: { data: "data", tileData: "tileData", config: "config", reload: "reload", activeTab: "activeTab", inTab: "inTab" }, outputs: { dataLoad: "dataLoad", actionSuccess: "actionSuccess", refreshClick: "refreshClick", searchClick: "searchClick", createClick: "createClick", actionClick: "actionClick", inputChange: "inputChange", actionResponse: "actionResponse" }, viewQueries: [{ propertyName: "tablePaginator", first: true, predicate: ["tablePaginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\r\n<ng-container *ngIf=\"hasFormAccess\">\r\n\r\n  <!-- Search -->\r\n  <spa-search\r\n    *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" [smallScreen]=\"smallScreen\" [tableDataSource]=\"tableDataSource\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\">\r\n  </spa-search>\r\n\r\n  <!-- Header -->\r\n  <app-table-header\r\n    [config]=\"config\" [data]=\"dataSource\" [tableDataSource]=\"tableDataSource\" [tileConfig]=\"config.tileConfig\" [tileData]=\"tileData\" [tileReload]=\"tileReload\" [lastSearch]=\"lastSearch\" [smallScreen]=\"smallScreen\"\r\n    [showFilterButton]=\"showFilterButton\" (createClick)=\"newModel()\" (customClick)=\"customModel($event,null)\"\r\n    (refreshClick)=\"refreshClicked()\" (tileClick)=\"tileClicked($event)\" (tileUnClick)=\"tileUnClicked($event)\">\r\n  </app-table-header>\r\n\r\n\r\n  <!-- Table -->\r\n  <div *ngIf=\"!config.viewType || config?.viewType === 'table'\">\r\n\r\n    <p *ngIf=\"!config\"><em>Configure Table</em></p>\r\n    <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\r\n\r\n    <div *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\">\r\n\r\n      <table mat-table [dataSource]=\"tableDataSource\"  [ngClass]=\"elevation\">\r\n\r\n        <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\r\n          <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\r\n          <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\r\n\r\n            <!-- Rows -->\r\n            <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\" [smallScreen]=\"smallScreen\"\r\n              (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\r\n            </app-table-row>\r\n\r\n          </td>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"action\">\r\n          <th mat-header-cell *matHeaderCellDef> Action </th>\r\n          <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\r\n            <div class=\"action-buttons-container\">\r\n\r\n              <!-- Actions -->\r\n              <app-table-action\r\n                [displayedButtons]=\"displayedButtons\" [config]=\"config\" [smallScreen]=\"smallScreen\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\r\n              </app-table-action>\r\n\r\n            </div>\r\n          </td>\r\n        </ng-container>\r\n\r\n\r\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': (config.greyOut && config.greyOut(row)) || row.pendingApproval}\"></tr>\r\n      </table>\r\n\r\n    </div>\r\n\r\n    <!-- Changed: Removed *ngIf condition to keep paginator always in DOM and maintain ViewChild reference -->\r\n    <!-- Changed: Added CSS class binding to hide when no data instead of conditional rendering -->\r\n    <mat-paginator \r\n      #tablePaginator \r\n      [pageSizeOptions]=\"config.pageSizes ?? [10, 20, 50]\" \r\n      [ngClass]=\"{'paginator-hidden': !dataSource || (smallScreen && dataSource?.length === 0)}\"\r\n      showFirstLastButtons>\r\n    </mat-paginator>\r\n\r\n  </div>\r\n  \r\n  <!-- Capsules -->\r\n  <spa-capsules *ngIf=\"config?.viewType === 'capsule'\"\r\n    [config]=\"config\"\r\n    [dataSource]=\"dataSource\"\r\n    [displayedButtons]=\"displayedButtons\"\r\n    (actionClick)=\"actionClicked($event.name, $event.row)\">\r\n  </spa-capsules>\r\n\r\n    <!-- Cards -->\r\n  <spa-cards *ngIf=\"config?.viewType === 'card'\"\r\n    [config]=\"config\"\r\n    [dataSource]=\"dataSource\"\r\n    [displayedButtons]=\"displayedButtons\"\r\n    [smallScreen]=\"smallScreen\"\r\n    (actionClick)=\"actionClicked($event.name, $event.row)\"\r\n    (columnClick)=\"columnClicked($event.column, $event.row)\"\r\n    (showBannerEvent)=\"showBanner($event)\">\r\n  </spa-cards>\r\n\r\n  <!-- Groups -->\r\n  <spa-groups *ngIf=\"config?.viewType === 'grouped'\"\r\n    [config]=\"config\"\r\n    [dataSource]=\"dataSource\"\r\n    [displayedButtons]=\"displayedButtons\"\r\n    (actionClick)=\"actionClicked($event.name, $event.row, $event.group, $event.button)\">\r\n  </spa-groups>\r\n\r\n  <div class=\"tin-center\">\r\n    <p *ngIf=\"dataSource?.length == 0\"><em>{{config.noDataMessage ?? 'No Data'}}</em></p>\r\n  </div>\r\n\r\n</ng-container>\r\n\r\n\r\n<ng-container *ngIf=\"!hasFormAccess\">\r\n  <div class=\"tin-center\">\r\n    <p><em>Access Restricted</em></p>\r\n  </div>\r\n</ng-container>\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#f5f5f5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0;justify-content:flex-start}.paginator-hidden{display:none!important}\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: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i11.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i12$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: SearchComponent, selector: "spa-search", inputs: ["config", "smallScreen", "tableDataSource"], outputs: ["searchClick"] }, { kind: "component", type: TableHeaderComponent, selector: "app-table-header", inputs: ["lastSearch", "config", "hideTitle", "tableDataSource", "tileConfig", "smallScreen", "tileReload", "showFilterButton", "data", "tileData"], outputs: ["createClick", "customClick", "refreshClick", "tileClick", "tileUnClick"] }, { kind: "component", type: TableRowComponent, selector: "app-table-row", inputs: ["column", "row", "config", "smallScreen"], outputs: ["actionClick", "columnClick", "showBannerEvent"] }, { kind: "component", type: TableActionComponent, selector: "app-table-action", inputs: ["displayedButtons", "config", "row", "smallScreen"], outputs: ["actionClick"] }, { kind: "component", type: CapsulesComponent, selector: "spa-capsules", inputs: ["config", "dataSource", "displayedButtons"], outputs: ["actionClick"] }, { kind: "component", type: CardsComponent, selector: "spa-cards", inputs: ["config", "dataSource", "displayedButtons", "smallScreen"], outputs: ["actionClick", "columnClick", "showBannerEvent"] }, { kind: "component", type: GroupsComponent, selector: "spa-groups", inputs: ["config", "dataSource", "displayedButtons"], outputs: ["actionClick"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] }); }
+    // Changed: Skip refresh if real-time is enabled — SignalR will handle it. 3s safety fallback.
+    realTimeRefreshOrFallback() {
+        if (!this.config.realTime) {
+            this.refreshClicked();
+            return;
+        }
+        this.pendingRealTimeUpdate = false;
+        setTimeout(() => {
+            if (!this.pendingRealTimeUpdate)
+                this.refreshClicked(); // Fallback if SignalR event didn't arrive
+        }, 3000);
+    }
+    // Changed: Set up SignalR subscriptions for real-time entity change updates
+    setupRealTimeSubscriptions() {
+        this.realTimeEntityName = this.config.entityName || this.deriveEntityName();
+        // Changed: Subscribe to entity created — add new row to table
+        this.realTimeSubs.push(this.signalRService.entityCreated$.subscribe(event => {
+            if (event.entityName !== this.realTimeEntityName)
+                return;
+            if (!this.tableDataSource)
+                return;
+            this.pendingRealTimeUpdate = true;
+            const data = [...this.tableDataSource.data, event.data];
+            this.tableDataSource.data = data;
+            this.dataSource = data;
+        }));
+        // Changed: Subscribe to entity updated — replace existing row by ID
+        this.realTimeSubs.push(this.signalRService.entityUpdated$.subscribe(event => {
+            if (event.entityName !== this.realTimeEntityName)
+                return;
+            if (!this.tableDataSource)
+                return;
+            this.pendingRealTimeUpdate = true;
+            const idKey = this.findIdKey(event.data);
+            if (!idKey)
+                return;
+            const data = this.tableDataSource.data.map(row => row[idKey] === event.data[idKey] ? event.data : row);
+            this.tableDataSource.data = data;
+            this.dataSource = data;
+        }));
+        // Changed: Subscribe to entity deleted — remove row by ID
+        this.realTimeSubs.push(this.signalRService.entityDeleted$.subscribe(event => {
+            if (event.entityName !== this.realTimeEntityName)
+                return;
+            if (!this.tableDataSource)
+                return;
+            this.pendingRealTimeUpdate = true;
+            const idKey = this.findIdKey(this.tableDataSource.data[0]);
+            if (!idKey)
+                return;
+            const data = this.tableDataSource.data.filter(row => row[idKey] !== event.data);
+            this.tableDataSource.data = data;
+            this.dataSource = data;
+        }));
+    }
+    // Changed: Derive entity name from loadAction URL (e.g. 'products/all/x' → 'Product')
+    deriveEntityName() {
+        const url = this.config.loadAction?.url || '';
+        const segment = url.split('/')[0];
+        if (!segment)
+            return '';
+        const name = segment.charAt(0).toUpperCase() + segment.slice(1);
+        return name.endsWith('s') ? name.slice(0, -1) : name;
+    }
+    // Changed: Find the ID property key in a row object (convention: ends with 'ID')
+    findIdKey(row) {
+        if (!row)
+            return null;
+        return Object.keys(row).find(k => k.endsWith('ID') && k !== 'TenantID') || null;
+    }
+    // Changed: Clean up SignalR subscriptions on component destroy
+    ngOnDestroy() {
+        this.realTimeSubs.forEach(s => s.unsubscribe());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableInternalComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i1$3.BreakpointObserver }, { token: i1.MatDialog }, { token: ButtonService }, { token: DialogService }, { token: TableConfigService }, { token: ConditionService }, { token: AuthService }, { token: SignalRService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TableInternalComponent, isStandalone: false, selector: "spa-table-internal", inputs: { data: "data", tileData: "tileData", config: "config", reload: "reload", activeTab: "activeTab", inTab: "inTab" }, outputs: { dataLoad: "dataLoad", actionSuccess: "actionSuccess", refreshClick: "refreshClick", searchClick: "searchClick", createClick: "createClick", actionClick: "actionClick", inputChange: "inputChange", actionResponse: "actionResponse" }, viewQueries: [{ propertyName: "tablePaginator", first: true, predicate: ["tablePaginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\r\n<ng-container *ngIf=\"hasFormAccess\">\r\n\r\n  <!-- Search -->\r\n  <spa-search\r\n    *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" [smallScreen]=\"smallScreen\" [tableDataSource]=\"tableDataSource\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\">\r\n  </spa-search>\r\n\r\n  <!-- Header -->\r\n  <app-table-header\r\n    [config]=\"config\" [data]=\"dataSource\" [tableDataSource]=\"tableDataSource\" [tileConfig]=\"config.tileConfig\" [tileData]=\"tileData\" [tileReload]=\"tileReload\" [lastSearch]=\"lastSearch\" [smallScreen]=\"smallScreen\"\r\n    [showFilterButton]=\"showFilterButton\" (createClick)=\"newModel()\" (customClick)=\"customModel($event,null)\"\r\n    (refreshClick)=\"refreshClicked()\" (tileClick)=\"tileClicked($event)\" (tileUnClick)=\"tileUnClicked($event)\">\r\n  </app-table-header>\r\n\r\n\r\n  <!-- Table -->\r\n  <div *ngIf=\"!config.viewType || config?.viewType === 'table'\">\r\n\r\n    <p *ngIf=\"!config\"><em>Configure Table</em></p>\r\n    <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\r\n\r\n    <div *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\">\r\n\r\n      <table mat-table [dataSource]=\"tableDataSource\"  [ngClass]=\"elevation\">\r\n\r\n        <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\r\n          <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\r\n          <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\r\n\r\n            <!-- Rows -->\r\n            <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\" [smallScreen]=\"smallScreen\"\r\n              (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\r\n            </app-table-row>\r\n\r\n          </td>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"action\">\r\n          <th mat-header-cell *matHeaderCellDef> Action </th>\r\n          <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\r\n            <div class=\"action-buttons-container\">\r\n\r\n              <!-- Actions -->\r\n              <app-table-action\r\n                [displayedButtons]=\"displayedButtons\" [config]=\"config\" [smallScreen]=\"smallScreen\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\r\n              </app-table-action>\r\n\r\n            </div>\r\n          </td>\r\n        </ng-container>\r\n\r\n\r\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': (config.greyOut && config.greyOut(row)) || row.pendingApproval}\"></tr>\r\n      </table>\r\n\r\n    </div>\r\n\r\n    <!-- Changed: Removed *ngIf condition to keep paginator always in DOM and maintain ViewChild reference -->\r\n    <!-- Changed: Added CSS class binding to hide when no data instead of conditional rendering -->\r\n    <mat-paginator \r\n      #tablePaginator \r\n      [pageSizeOptions]=\"config.pageSizes ?? [10, 20, 50]\" \r\n      [ngClass]=\"{'paginator-hidden': !dataSource || (smallScreen && dataSource?.length === 0)}\"\r\n      showFirstLastButtons>\r\n    </mat-paginator>\r\n\r\n  </div>\r\n  \r\n  <!-- Capsules -->\r\n  <spa-capsules *ngIf=\"config?.viewType === 'capsule'\"\r\n    [config]=\"config\"\r\n    [dataSource]=\"dataSource\"\r\n    [displayedButtons]=\"displayedButtons\"\r\n    (actionClick)=\"actionClicked($event.name, $event.row)\">\r\n  </spa-capsules>\r\n\r\n    <!-- Cards -->\r\n  <spa-cards *ngIf=\"config?.viewType === 'card'\"\r\n    [config]=\"config\"\r\n    [dataSource]=\"dataSource\"\r\n    [displayedButtons]=\"displayedButtons\"\r\n    [smallScreen]=\"smallScreen\"\r\n    (actionClick)=\"actionClicked($event.name, $event.row)\"\r\n    (columnClick)=\"columnClicked($event.column, $event.row)\"\r\n    (showBannerEvent)=\"showBanner($event)\">\r\n  </spa-cards>\r\n\r\n  <!-- Groups -->\r\n  <spa-groups *ngIf=\"config?.viewType === 'grouped'\"\r\n    [config]=\"config\"\r\n    [dataSource]=\"dataSource\"\r\n    [displayedButtons]=\"displayedButtons\"\r\n    (actionClick)=\"actionClicked($event.name, $event.row, $event.group, $event.button)\">\r\n  </spa-groups>\r\n\r\n  <div class=\"tin-center\">\r\n    <p *ngIf=\"dataSource?.length == 0\"><em>{{config.noDataMessage ?? 'No Data'}}</em></p>\r\n  </div>\r\n\r\n</ng-container>\r\n\r\n\r\n<ng-container *ngIf=\"!hasFormAccess\">\r\n  <div class=\"tin-center\">\r\n    <p><em>Access Restricted</em></p>\r\n  </div>\r\n</ng-container>\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#f5f5f5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0;justify-content:flex-start}.paginator-hidden{display:none!important}\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: i12$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i12$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i12$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i12$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i12$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i12$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i12$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i12$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i12$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i12$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i13.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: SearchComponent, selector: "spa-search", inputs: ["config", "smallScreen", "tableDataSource"], outputs: ["searchClick"] }, { kind: "component", type: TableHeaderComponent, selector: "app-table-header", inputs: ["lastSearch", "config", "hideTitle", "tableDataSource", "tileConfig", "smallScreen", "tileReload", "showFilterButton", "data", "tileData"], outputs: ["createClick", "customClick", "refreshClick", "tileClick", "tileUnClick"] }, { kind: "component", type: TableRowComponent, selector: "app-table-row", inputs: ["column", "row", "config", "smallScreen"], outputs: ["actionClick", "columnClick", "showBannerEvent"] }, { kind: "component", type: TableActionComponent, selector: "app-table-action", inputs: ["displayedButtons", "config", "row", "smallScreen"], outputs: ["actionClick"] }, { kind: "component", type: CapsulesComponent, selector: "spa-capsules", inputs: ["config", "dataSource", "displayedButtons"], outputs: ["actionClick"] }, { kind: "component", type: CardsComponent, selector: "spa-cards", inputs: ["config", "dataSource", "displayedButtons", "smallScreen"], outputs: ["actionClick", "columnClick", "showBannerEvent"] }, { kind: "component", type: GroupsComponent, selector: "spa-groups", inputs: ["config", "dataSource", "displayedButtons"], outputs: ["actionClick"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableInternalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-table-internal', standalone: false, template: "\r\n<ng-container *ngIf=\"hasFormAccess\">\r\n\r\n  <!-- Search -->\r\n  <spa-search\r\n    *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" [smallScreen]=\"smallScreen\" [tableDataSource]=\"tableDataSource\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\">\r\n  </spa-search>\r\n\r\n  <!-- Header -->\r\n  <app-table-header\r\n    [config]=\"config\" [data]=\"dataSource\" [tableDataSource]=\"tableDataSource\" [tileConfig]=\"config.tileConfig\" [tileData]=\"tileData\" [tileReload]=\"tileReload\" [lastSearch]=\"lastSearch\" [smallScreen]=\"smallScreen\"\r\n    [showFilterButton]=\"showFilterButton\" (createClick)=\"newModel()\" (customClick)=\"customModel($event,null)\"\r\n    (refreshClick)=\"refreshClicked()\" (tileClick)=\"tileClicked($event)\" (tileUnClick)=\"tileUnClicked($event)\">\r\n  </app-table-header>\r\n\r\n\r\n  <!-- Table -->\r\n  <div *ngIf=\"!config.viewType || config?.viewType === 'table'\">\r\n\r\n    <p *ngIf=\"!config\"><em>Configure Table</em></p>\r\n    <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\r\n\r\n    <div *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\">\r\n\r\n      <table mat-table [dataSource]=\"tableDataSource\"  [ngClass]=\"elevation\">\r\n\r\n        <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\r\n          <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\r\n          <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\r\n\r\n            <!-- Rows -->\r\n            <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\" [smallScreen]=\"smallScreen\"\r\n              (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\r\n            </app-table-row>\r\n\r\n          </td>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"action\">\r\n          <th mat-header-cell *matHeaderCellDef> Action </th>\r\n          <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '50px' : actionsWidth}\">\r\n            <div class=\"action-buttons-container\">\r\n\r\n              <!-- Actions -->\r\n              <app-table-action\r\n                [displayedButtons]=\"displayedButtons\" [config]=\"config\" [smallScreen]=\"smallScreen\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\r\n              </app-table-action>\r\n\r\n            </div>\r\n          </td>\r\n        </ng-container>\r\n\r\n\r\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': (config.greyOut && config.greyOut(row)) || row.pendingApproval}\"></tr>\r\n      </table>\r\n\r\n    </div>\r\n\r\n    <!-- Changed: Removed *ngIf condition to keep paginator always in DOM and maintain ViewChild reference -->\r\n    <!-- Changed: Added CSS class binding to hide when no data instead of conditional rendering -->\r\n    <mat-paginator \r\n      #tablePaginator \r\n      [pageSizeOptions]=\"config.pageSizes ?? [10, 20, 50]\" \r\n      [ngClass]=\"{'paginator-hidden': !dataSource || (smallScreen && dataSource?.length === 0)}\"\r\n      showFirstLastButtons>\r\n    </mat-paginator>\r\n\r\n  </div>\r\n  \r\n  <!-- Capsules -->\r\n  <spa-capsules *ngIf=\"config?.viewType === 'capsule'\"\r\n    [config]=\"config\"\r\n    [dataSource]=\"dataSource\"\r\n    [displayedButtons]=\"displayedButtons\"\r\n    (actionClick)=\"actionClicked($event.name, $event.row)\">\r\n  </spa-capsules>\r\n\r\n    <!-- Cards -->\r\n  <spa-cards *ngIf=\"config?.viewType === 'card'\"\r\n    [config]=\"config\"\r\n    [dataSource]=\"dataSource\"\r\n    [displayedButtons]=\"displayedButtons\"\r\n    [smallScreen]=\"smallScreen\"\r\n    (actionClick)=\"actionClicked($event.name, $event.row)\"\r\n    (columnClick)=\"columnClicked($event.column, $event.row)\"\r\n    (showBannerEvent)=\"showBanner($event)\">\r\n  </spa-cards>\r\n\r\n  <!-- Groups -->\r\n  <spa-groups *ngIf=\"config?.viewType === 'grouped'\"\r\n    [config]=\"config\"\r\n    [dataSource]=\"dataSource\"\r\n    [displayedButtons]=\"displayedButtons\"\r\n    (actionClick)=\"actionClicked($event.name, $event.row, $event.group, $event.button)\">\r\n  </spa-groups>\r\n\r\n  <div class=\"tin-center\">\r\n    <p *ngIf=\"dataSource?.length == 0\"><em>{{config.noDataMessage ?? 'No Data'}}</em></p>\r\n  </div>\r\n\r\n</ng-container>\r\n\r\n\r\n<ng-container *ngIf=\"!hasFormAccess\">\r\n  <div class=\"tin-center\">\r\n    <p><em>Access Restricted</em></p>\r\n  </div>\r\n</ng-container>\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#f5f5f5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto}mat-dialog-actions{flex-shrink:0;justify-content:flex-start}.paginator-hidden{display:none!important}\n"] }]
-        }], ctorParameters: () => [{ type: DataServiceLib }, { type: MessageService }, { type: i1$3.BreakpointObserver }, { type: i1.MatDialog }, { type: ButtonService }, { type: DialogService }, { type: TableConfigService }, { type: ConditionService }, { type: AuthService }], propDecorators: { tablePaginator: [{
+        }], ctorParameters: () => [{ type: DataServiceLib }, { type: MessageService }, { type: i1$3.BreakpointObserver }, { type: i1.MatDialog }, { type: ButtonService }, { type: DialogService }, { type: TableConfigService }, { type: ConditionService }, { type: AuthService }, { type: SignalRService }], propDecorators: { tablePaginator: [{
                 type: ViewChild,
                 args: ['tablePaginator', { static: false }]
             }], data: [{
@@ -13690,7 +13898,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
 ;
 
 class TableComponent {
-    constructor(dataService, messageService, breakpointObserver, dialog, buttonService, dialogService, tableConfigService, conditionService, authService) {
+    constructor(dataService, messageService, breakpointObserver, dialog, buttonService, dialogService, tableConfigService, conditionService, authService, signalRService) {
         this.dataService = dataService;
         this.messageService = messageService;
         this.breakpointObserver = breakpointObserver;
@@ -13700,6 +13908,7 @@ class TableComponent {
         this.tableConfigService = tableConfigService;
         this.conditionService = conditionService;
         this.authService = authService;
+        this.signalRService = signalRService;
         this.elevation = "mat-elevation-z5";
         this.actionsWidth = "50px";
         this.showFilterButton = true;
@@ -13721,6 +13930,10 @@ class TableComponent {
         this.actionClick = new EventEmitter();
         this.inputChange = new EventEmitter();
         this.actionResponse = new EventEmitter();
+        // Changed: Real-time SignalR subscription management
+        this.realTimeSubs = [];
+        this.realTimeEntityName = '';
+        this.pendingRealTimeUpdate = false; // Changed: Flag to skip refreshClicked when SignalR handles it
         // detect screen size changes
         this.breakpointObserver.observe(["(max-width: 600px)"]).subscribe((result) => {
             this.smallScreen = result.matches;
@@ -13760,6 +13973,8 @@ class TableComponent {
         this.dataSource = this.data;
         this.tableDataSource = new MatTableDataSource(this.dataSource);
         this.setPaginator(); // Set paginator after datasource initialization
+        if (this.config.realTime)
+            this.setupRealTimeSubscriptions(); // Changed: Subscribe to SignalR entity changes
     }
     updateTableConfiguration() {
         this.elevation = this.getElevationClass(this.config?.elevation);
@@ -14005,7 +14220,7 @@ class TableComponent {
             else if (result.message === 'success') {
                 this.actionClickedEmit(buttonName, result.data);
                 this.actionResponse.emit({ name: buttonName, data: result.data });
-                this.refreshClicked();
+                this.realTimeRefreshOrFallback(); // Changed: Use real-time update if enabled, otherwise refresh
                 this.actionSuccess.emit();
                 if (buttonName == 'create' && btn.editOnSuccess) {
                     this.editModel(result.data.data);
@@ -14071,7 +14286,7 @@ class TableComponent {
                 else {
                     this.messageService.toast("Updated");
                 }
-                this.refreshClicked();
+                this.realTimeRefreshOrFallback(); // Changed: Use real-time update if enabled, otherwise refresh
                 this.actionSuccess.emit();
             }
             else {
@@ -14100,13 +14315,87 @@ class TableComponent {
             return "mat-elevation-z5";
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i1$3.BreakpointObserver }, { token: i1.MatDialog }, { token: ButtonService }, { token: DialogService }, { token: TableConfigService }, { token: ConditionService }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TableComponent, isStandalone: false, selector: "spa-table", inputs: { data: "data", tileData: "tileData", config: "config", reload: "reload", activeTab: "activeTab", inTab: "inTab" }, outputs: { dataLoad: "dataLoad", actionSuccess: "actionSuccess", refreshClick: "refreshClick", searchClick: "searchClick", createClick: "createClick", actionClick: "actionClick", inputChange: "inputChange", actionResponse: "actionResponse" }, viewQueries: [{ propertyName: "tablePaginator", first: true, predicate: ["tablePaginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\r\n<ng-container *ngIf=\"hasFormAccess\">\r\n\r\n  <!-- Search -->\r\n  <spa-search\r\n    *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" [smallScreen]=\"smallScreen\" [tableDataSource]=\"tableDataSource\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\">\r\n  </spa-search>\r\n\r\n  <!-- Header -->\r\n  <app-table-header\r\n    [config]=\"config\" [data]=\"dataSource\" [tableDataSource]=\"tableDataSource\" [tileConfig]=\"config.tileConfig\" [tileData]=\"tileData\" [tileReload]=\"tileReload\" [lastSearch]=\"lastSearch\" [smallScreen]=\"smallScreen\"\r\n    [showFilterButton]=\"showFilterButton\" (createClick)=\"newModel()\" (customClick)=\"customModel($event,null)\"\r\n    (refreshClick)=\"refreshClicked()\" (tileClick)=\"tileClicked($event)\" (tileUnClick)=\"tileUnClicked($event)\">\r\n  </app-table-header>\r\n\r\n\r\n  <!-- Table -->\r\n  <div *ngIf=\"!config.viewType || config?.viewType === 'table'\">\r\n\r\n    <p *ngIf=\"!config\"><em>Configure Table</em></p>\r\n    <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\r\n\r\n    <div *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\">\r\n\r\n      <table mat-table [dataSource]=\"tableDataSource\"  [ngClass]=\"elevation\">\r\n\r\n        <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\r\n          <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\r\n          <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\r\n\r\n            <!-- Rows -->\r\n            <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\" [smallScreen]=\"smallScreen\"\r\n              (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\r\n            </app-table-row>\r\n\r\n          </td>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"action\">\r\n          <th mat-header-cell *matHeaderCellDef> Action </th>\r\n          <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '20px' : actionsWidth}\">\r\n            <div class=\"action-buttons-container\">\r\n\r\n              <!-- Actions -->\r\n              <app-table-action\r\n                [displayedButtons]=\"displayedButtons\" [config]=\"config\" [smallScreen]=\"smallScreen\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\r\n              </app-table-action>\r\n\r\n            </div>\r\n          </td>\r\n        </ng-container>\r\n\r\n\r\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': (config.greyOut && config.greyOut(row)) || row.pendingApproval}\"></tr>\r\n      </table>\r\n\r\n    </div>\r\n\r\n    <!-- Changed: Removed *ngIf condition to keep paginator always in DOM and maintain ViewChild reference -->\r\n    <!-- Changed: Added CSS class binding to hide when no data instead of conditional rendering -->\r\n    <mat-paginator \r\n      #tablePaginator \r\n      [pageSizeOptions]=\"config.pageSizes ?? [10, 20, 50]\" \r\n      [ngClass]=\"{'paginator-hidden': !dataSource || (smallScreen && dataSource?.length === 0)}\"\r\n      showFirstLastButtons>\r\n    </mat-paginator>\r\n\r\n  </div>\r\n  \r\n  <!-- Capsules -->\r\n  <spa-capsules *ngIf=\"config?.viewType === 'capsule'\"\r\n    [config]=\"config\"\r\n    [dataSource]=\"dataSource\"\r\n    [displayedButtons]=\"displayedButtons\"\r\n    (actionClick)=\"actionClicked($event.name, $event.row)\">\r\n  </spa-capsules>\r\n\r\n\r\n  <!-- Cards -->\r\n  <spa-cards *ngIf=\"config?.viewType === 'card'\"\r\n    [config]=\"config\"\r\n    [dataSource]=\"dataSource\"\r\n    [displayedButtons]=\"displayedButtons\"\r\n    [smallScreen]=\"smallScreen\"\r\n    (actionClick)=\"actionClicked($event.name, $event.row)\"\r\n    (columnClick)=\"columnClicked($event.column, $event.row)\"\r\n    (showBannerEvent)=\"showBanner($event)\">\r\n  </spa-cards>\r\n\r\n  <!-- Groups - Added: New grouped view type -->\r\n  <spa-groups *ngIf=\"config?.viewType === 'grouped'\"\r\n    [config]=\"config\"\r\n    [dataSource]=\"dataSource\"\r\n    [displayedButtons]=\"displayedButtons\"\r\n    (actionClick)=\"actionClicked($event.name, $event.row, $event.group, $event.button)\">\r\n  </spa-groups>\r\n\r\n\r\n  <div class=\"tin-center\">\r\n    <p *ngIf=\"dataSource?.length == 0\"><em>{{config.noDataMessage ?? 'No Data'}}</em></p>\r\n  </div>\r\n\r\n</ng-container>\r\n\r\n\r\n<ng-container *ngIf=\"!hasFormAccess\">\r\n  <div class=\"tin-center\">\r\n    <p><em>Access Restricted</em></p>\r\n  </div>\r\n</ng-container>\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#f5f5f5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto;max-height:none!important;display:flex;flex-direction:column}.dialog-scroll-content>.tin-input{flex:1;display:flex;flex-direction:column}.dialog-scroll-content>.tin-input>spa-tabs-internal{flex:1;display:flex;flex-direction:column}mat-dialog-actions{flex-shrink:0;justify-content:flex-start}.paginator-hidden{display:none!important}\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: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i11.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i12$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: SearchComponent, selector: "spa-search", inputs: ["config", "smallScreen", "tableDataSource"], outputs: ["searchClick"] }, { kind: "component", type: TableHeaderComponent, selector: "app-table-header", inputs: ["lastSearch", "config", "hideTitle", "tableDataSource", "tileConfig", "smallScreen", "tileReload", "showFilterButton", "data", "tileData"], outputs: ["createClick", "customClick", "refreshClick", "tileClick", "tileUnClick"] }, { kind: "component", type: TableRowComponent, selector: "app-table-row", inputs: ["column", "row", "config", "smallScreen"], outputs: ["actionClick", "columnClick", "showBannerEvent"] }, { kind: "component", type: TableActionComponent, selector: "app-table-action", inputs: ["displayedButtons", "config", "row", "smallScreen"], outputs: ["actionClick"] }, { kind: "component", type: CapsulesComponent, selector: "spa-capsules", inputs: ["config", "dataSource", "displayedButtons"], outputs: ["actionClick"] }, { kind: "component", type: CardsComponent, selector: "spa-cards", inputs: ["config", "dataSource", "displayedButtons", "smallScreen"], outputs: ["actionClick", "columnClick", "showBannerEvent"] }, { kind: "component", type: GroupsComponent, selector: "spa-groups", inputs: ["config", "dataSource", "displayedButtons"], outputs: ["actionClick"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] }); }
+    // Changed: Skip refresh if real-time is enabled — SignalR will handle it. 3s safety fallback.
+    realTimeRefreshOrFallback() {
+        if (!this.config.realTime) {
+            this.refreshClicked();
+            return;
+        }
+        this.pendingRealTimeUpdate = false;
+        setTimeout(() => {
+            if (!this.pendingRealTimeUpdate)
+                this.refreshClicked(); // Fallback if SignalR event didn't arrive
+        }, 3000);
+    }
+    // Changed: Set up SignalR subscriptions for real-time entity change updates
+    setupRealTimeSubscriptions() {
+        this.realTimeEntityName = this.config.entityName || this.deriveEntityName();
+        // Changed: Subscribe to entity created — add new row to table
+        this.realTimeSubs.push(this.signalRService.entityCreated$.subscribe(event => {
+            if (event.entityName !== this.realTimeEntityName)
+                return;
+            if (!this.tableDataSource)
+                return;
+            this.pendingRealTimeUpdate = true;
+            const data = [...this.tableDataSource.data, event.data];
+            this.tableDataSource.data = data;
+            this.dataSource = data;
+        }));
+        // Changed: Subscribe to entity updated — replace existing row by ID
+        this.realTimeSubs.push(this.signalRService.entityUpdated$.subscribe(event => {
+            if (event.entityName !== this.realTimeEntityName)
+                return;
+            if (!this.tableDataSource)
+                return;
+            this.pendingRealTimeUpdate = true;
+            const idKey = this.findIdKey(event.data);
+            if (!idKey)
+                return;
+            const data = this.tableDataSource.data.map(row => row[idKey] === event.data[idKey] ? event.data : row);
+            this.tableDataSource.data = data;
+            this.dataSource = data;
+        }));
+        // Changed: Subscribe to entity deleted — remove row by ID
+        this.realTimeSubs.push(this.signalRService.entityDeleted$.subscribe(event => {
+            if (event.entityName !== this.realTimeEntityName)
+                return;
+            if (!this.tableDataSource)
+                return;
+            this.pendingRealTimeUpdate = true;
+            const idKey = this.findIdKey(this.tableDataSource.data[0]);
+            if (!idKey)
+                return;
+            const data = this.tableDataSource.data.filter(row => row[idKey] !== event.data);
+            this.tableDataSource.data = data;
+            this.dataSource = data;
+        }));
+    }
+    // Changed: Derive entity name from loadAction URL (e.g. 'products/all/x' → 'Product')
+    deriveEntityName() {
+        const url = this.config.loadAction?.url || '';
+        const segment = url.split('/')[0]; // First URL segment (e.g. 'products')
+        if (!segment)
+            return '';
+        const name = segment.charAt(0).toUpperCase() + segment.slice(1); // Capitalize
+        return name.endsWith('s') ? name.slice(0, -1) : name; // Remove trailing 's' for singular
+    }
+    // Changed: Find the ID property key in a row object (convention: ends with 'ID')
+    findIdKey(row) {
+        if (!row)
+            return null;
+        return Object.keys(row).find(k => k.endsWith('ID') && k !== 'TenantID') || null;
+    }
+    // Changed: Clean up SignalR subscriptions on component destroy
+    ngOnDestroy() {
+        this.realTimeSubs.forEach(s => s.unsubscribe());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i1$3.BreakpointObserver }, { token: i1.MatDialog }, { token: ButtonService }, { token: DialogService }, { token: TableConfigService }, { token: ConditionService }, { token: AuthService }, { token: SignalRService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TableComponent, isStandalone: false, selector: "spa-table", inputs: { data: "data", tileData: "tileData", config: "config", reload: "reload", activeTab: "activeTab", inTab: "inTab" }, outputs: { dataLoad: "dataLoad", actionSuccess: "actionSuccess", refreshClick: "refreshClick", searchClick: "searchClick", createClick: "createClick", actionClick: "actionClick", inputChange: "inputChange", actionResponse: "actionResponse" }, viewQueries: [{ propertyName: "tablePaginator", first: true, predicate: ["tablePaginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\r\n<ng-container *ngIf=\"hasFormAccess\">\r\n\r\n  <!-- Search -->\r\n  <spa-search\r\n    *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" [smallScreen]=\"smallScreen\" [tableDataSource]=\"tableDataSource\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\">\r\n  </spa-search>\r\n\r\n  <!-- Header -->\r\n  <app-table-header\r\n    [config]=\"config\" [data]=\"dataSource\" [tableDataSource]=\"tableDataSource\" [tileConfig]=\"config.tileConfig\" [tileData]=\"tileData\" [tileReload]=\"tileReload\" [lastSearch]=\"lastSearch\" [smallScreen]=\"smallScreen\"\r\n    [showFilterButton]=\"showFilterButton\" (createClick)=\"newModel()\" (customClick)=\"customModel($event,null)\"\r\n    (refreshClick)=\"refreshClicked()\" (tileClick)=\"tileClicked($event)\" (tileUnClick)=\"tileUnClicked($event)\">\r\n  </app-table-header>\r\n\r\n\r\n  <!-- Table -->\r\n  <div *ngIf=\"!config.viewType || config?.viewType === 'table'\">\r\n\r\n    <p *ngIf=\"!config\"><em>Configure Table</em></p>\r\n    <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\r\n\r\n    <div *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\">\r\n\r\n      <table mat-table [dataSource]=\"tableDataSource\"  [ngClass]=\"elevation\">\r\n\r\n        <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\r\n          <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\r\n          <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\r\n\r\n            <!-- Rows -->\r\n            <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\" [smallScreen]=\"smallScreen\"\r\n              (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\r\n            </app-table-row>\r\n\r\n          </td>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"action\">\r\n          <th mat-header-cell *matHeaderCellDef> Action </th>\r\n          <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '20px' : actionsWidth}\">\r\n            <div class=\"action-buttons-container\">\r\n\r\n              <!-- Actions -->\r\n              <app-table-action\r\n                [displayedButtons]=\"displayedButtons\" [config]=\"config\" [smallScreen]=\"smallScreen\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\r\n              </app-table-action>\r\n\r\n            </div>\r\n          </td>\r\n        </ng-container>\r\n\r\n\r\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': (config.greyOut && config.greyOut(row)) || row.pendingApproval}\"></tr>\r\n      </table>\r\n\r\n    </div>\r\n\r\n    <!-- Changed: Removed *ngIf condition to keep paginator always in DOM and maintain ViewChild reference -->\r\n    <!-- Changed: Added CSS class binding to hide when no data instead of conditional rendering -->\r\n    <mat-paginator \r\n      #tablePaginator \r\n      [pageSizeOptions]=\"config.pageSizes ?? [10, 20, 50]\" \r\n      [ngClass]=\"{'paginator-hidden': !dataSource || (smallScreen && dataSource?.length === 0)}\"\r\n      showFirstLastButtons>\r\n    </mat-paginator>\r\n\r\n  </div>\r\n  \r\n  <!-- Capsules -->\r\n  <spa-capsules *ngIf=\"config?.viewType === 'capsule'\"\r\n    [config]=\"config\"\r\n    [dataSource]=\"dataSource\"\r\n    [displayedButtons]=\"displayedButtons\"\r\n    (actionClick)=\"actionClicked($event.name, $event.row)\">\r\n  </spa-capsules>\r\n\r\n\r\n  <!-- Cards -->\r\n  <spa-cards *ngIf=\"config?.viewType === 'card'\"\r\n    [config]=\"config\"\r\n    [dataSource]=\"dataSource\"\r\n    [displayedButtons]=\"displayedButtons\"\r\n    [smallScreen]=\"smallScreen\"\r\n    (actionClick)=\"actionClicked($event.name, $event.row)\"\r\n    (columnClick)=\"columnClicked($event.column, $event.row)\"\r\n    (showBannerEvent)=\"showBanner($event)\">\r\n  </spa-cards>\r\n\r\n  <!-- Groups - Added: New grouped view type -->\r\n  <spa-groups *ngIf=\"config?.viewType === 'grouped'\"\r\n    [config]=\"config\"\r\n    [dataSource]=\"dataSource\"\r\n    [displayedButtons]=\"displayedButtons\"\r\n    (actionClick)=\"actionClicked($event.name, $event.row, $event.group, $event.button)\">\r\n  </spa-groups>\r\n\r\n\r\n  <div class=\"tin-center\">\r\n    <p *ngIf=\"dataSource?.length == 0\"><em>{{config.noDataMessage ?? 'No Data'}}</em></p>\r\n  </div>\r\n\r\n</ng-container>\r\n\r\n\r\n<ng-container *ngIf=\"!hasFormAccess\">\r\n  <div class=\"tin-center\">\r\n    <p><em>Access Restricted</em></p>\r\n  </div>\r\n</ng-container>\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#f5f5f5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto;max-height:none!important;display:flex;flex-direction:column}.dialog-scroll-content>.tin-input{flex:1;display:flex;flex-direction:column}.dialog-scroll-content>.tin-input>spa-tabs-internal{flex:1;display:flex;flex-direction:column}mat-dialog-actions{flex-shrink:0;justify-content:flex-start}.paginator-hidden{display:none!important}\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: i12$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i12$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i12$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i12$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i12$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i12$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i12$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i12$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i12$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i12$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i13.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: SearchComponent, selector: "spa-search", inputs: ["config", "smallScreen", "tableDataSource"], outputs: ["searchClick"] }, { kind: "component", type: TableHeaderComponent, selector: "app-table-header", inputs: ["lastSearch", "config", "hideTitle", "tableDataSource", "tileConfig", "smallScreen", "tileReload", "showFilterButton", "data", "tileData"], outputs: ["createClick", "customClick", "refreshClick", "tileClick", "tileUnClick"] }, { kind: "component", type: TableRowComponent, selector: "app-table-row", inputs: ["column", "row", "config", "smallScreen"], outputs: ["actionClick", "columnClick", "showBannerEvent"] }, { kind: "component", type: TableActionComponent, selector: "app-table-action", inputs: ["displayedButtons", "config", "row", "smallScreen"], outputs: ["actionClick"] }, { kind: "component", type: CapsulesComponent, selector: "spa-capsules", inputs: ["config", "dataSource", "displayedButtons"], outputs: ["actionClick"] }, { kind: "component", type: CardsComponent, selector: "spa-cards", inputs: ["config", "dataSource", "displayedButtons", "smallScreen"], outputs: ["actionClick", "columnClick", "showBannerEvent"] }, { kind: "component", type: GroupsComponent, selector: "spa-groups", inputs: ["config", "dataSource", "displayedButtons"], outputs: ["actionClick"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spa-table', standalone: false, template: "\r\n<ng-container *ngIf=\"hasFormAccess\">\r\n\r\n  <!-- Search -->\r\n  <spa-search\r\n    *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" [smallScreen]=\"smallScreen\" [tableDataSource]=\"tableDataSource\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\">\r\n  </spa-search>\r\n\r\n  <!-- Header -->\r\n  <app-table-header\r\n    [config]=\"config\" [data]=\"dataSource\" [tableDataSource]=\"tableDataSource\" [tileConfig]=\"config.tileConfig\" [tileData]=\"tileData\" [tileReload]=\"tileReload\" [lastSearch]=\"lastSearch\" [smallScreen]=\"smallScreen\"\r\n    [showFilterButton]=\"showFilterButton\" (createClick)=\"newModel()\" (customClick)=\"customModel($event,null)\"\r\n    (refreshClick)=\"refreshClicked()\" (tileClick)=\"tileClicked($event)\" (tileUnClick)=\"tileUnClicked($event)\">\r\n  </app-table-header>\r\n\r\n\r\n  <!-- Table -->\r\n  <div *ngIf=\"!config.viewType || config?.viewType === 'table'\">\r\n\r\n    <p *ngIf=\"!config\"><em>Configure Table</em></p>\r\n    <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\r\n\r\n    <div *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\">\r\n\r\n      <table mat-table [dataSource]=\"tableDataSource\"  [ngClass]=\"elevation\">\r\n\r\n        <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\r\n          <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\r\n          <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\r\n\r\n            <!-- Rows -->\r\n            <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\" [smallScreen]=\"smallScreen\"\r\n              (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\r\n            </app-table-row>\r\n\r\n          </td>\r\n        </ng-container>\r\n\r\n        <ng-container matColumnDef=\"action\">\r\n          <th mat-header-cell *matHeaderCellDef> Action </th>\r\n          <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '20px' : actionsWidth}\">\r\n            <div class=\"action-buttons-container\">\r\n\r\n              <!-- Actions -->\r\n              <app-table-action\r\n                [displayedButtons]=\"displayedButtons\" [config]=\"config\" [smallScreen]=\"smallScreen\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\r\n              </app-table-action>\r\n\r\n            </div>\r\n          </td>\r\n        </ng-container>\r\n\r\n\r\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': (config.greyOut && config.greyOut(row)) || row.pendingApproval}\"></tr>\r\n      </table>\r\n\r\n    </div>\r\n\r\n    <!-- Changed: Removed *ngIf condition to keep paginator always in DOM and maintain ViewChild reference -->\r\n    <!-- Changed: Added CSS class binding to hide when no data instead of conditional rendering -->\r\n    <mat-paginator \r\n      #tablePaginator \r\n      [pageSizeOptions]=\"config.pageSizes ?? [10, 20, 50]\" \r\n      [ngClass]=\"{'paginator-hidden': !dataSource || (smallScreen && dataSource?.length === 0)}\"\r\n      showFirstLastButtons>\r\n    </mat-paginator>\r\n\r\n  </div>\r\n  \r\n  <!-- Capsules -->\r\n  <spa-capsules *ngIf=\"config?.viewType === 'capsule'\"\r\n    [config]=\"config\"\r\n    [dataSource]=\"dataSource\"\r\n    [displayedButtons]=\"displayedButtons\"\r\n    (actionClick)=\"actionClicked($event.name, $event.row)\">\r\n  </spa-capsules>\r\n\r\n\r\n  <!-- Cards -->\r\n  <spa-cards *ngIf=\"config?.viewType === 'card'\"\r\n    [config]=\"config\"\r\n    [dataSource]=\"dataSource\"\r\n    [displayedButtons]=\"displayedButtons\"\r\n    [smallScreen]=\"smallScreen\"\r\n    (actionClick)=\"actionClicked($event.name, $event.row)\"\r\n    (columnClick)=\"columnClicked($event.column, $event.row)\"\r\n    (showBannerEvent)=\"showBanner($event)\">\r\n  </spa-cards>\r\n\r\n  <!-- Groups - Added: New grouped view type -->\r\n  <spa-groups *ngIf=\"config?.viewType === 'grouped'\"\r\n    [config]=\"config\"\r\n    [dataSource]=\"dataSource\"\r\n    [displayedButtons]=\"displayedButtons\"\r\n    (actionClick)=\"actionClicked($event.name, $event.row, $event.group, $event.button)\">\r\n  </spa-groups>\r\n\r\n\r\n  <div class=\"tin-center\">\r\n    <p *ngIf=\"dataSource?.length == 0\"><em>{{config.noDataMessage ?? 'No Data'}}</em></p>\r\n  </div>\r\n\r\n</ng-container>\r\n\r\n\r\n<ng-container *ngIf=\"!hasFormAccess\">\r\n  <div class=\"tin-center\">\r\n    <p><em>Access Restricted</em></p>\r\n  </div>\r\n</ng-container>\r\n\r\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#f5f5f5}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto;max-height:none!important;display:flex;flex-direction:column}.dialog-scroll-content>.tin-input{flex:1;display:flex;flex-direction:column}.dialog-scroll-content>.tin-input>spa-tabs-internal{flex:1;display:flex;flex-direction:column}mat-dialog-actions{flex-shrink:0;justify-content:flex-start}.paginator-hidden{display:none!important}\n"] }]
-        }], ctorParameters: () => [{ type: DataServiceLib }, { type: MessageService }, { type: i1$3.BreakpointObserver }, { type: i1.MatDialog }, { type: ButtonService }, { type: DialogService }, { type: TableConfigService }, { type: ConditionService }, { type: AuthService }], propDecorators: { tablePaginator: [{
+        }], ctorParameters: () => [{ type: DataServiceLib }, { type: MessageService }, { type: i1$3.BreakpointObserver }, { type: i1.MatDialog }, { type: ButtonService }, { type: DialogService }, { type: TableConfigService }, { type: ConditionService }, { type: AuthService }, { type: SignalRService }], propDecorators: { tablePaginator: [{
                 type: ViewChild,
                 args: ['tablePaginator', { static: false }]
             }], data: [{
@@ -16437,6 +16726,7 @@ class LoginComponent {
         }
         // Changed: Auto-redirect only if session is genuinely valid (non-expired token)
         if (this.authService.hasValidSession()) {
+            this.notifications(); // Changed: Establish SignalR connections on session restore (not just fresh login)
             this.router.navigate([this.redirectPath]);
             return;
         }
@@ -16446,6 +16736,7 @@ class LoginComponent {
             this.authService.silentRefresh().then((success) => {
                 this.isProcessing = false;
                 if (success) {
+                    this.notifications(); // Changed: Establish SignalR connections after silent refresh
                     this.router.navigate([this.redirectPath]);
                 }
                 // If refresh fails, stay on login page — user must re-enter credentials
@@ -16554,11 +16845,14 @@ class LoginComponent {
     notifications() {
         if (this.appConfig.multitenant) {
             this.notificationsService.loadNotifications();
-            // Changed: Start SignalR connection for real-time notification count updates
-            const hubUrl = this.httpService.apiUrl.replace(/\/api\/$/, '/hubs/notification');
+            // Changed: Start SignalR connections for real-time notification count and entity change updates
+            const notificationHubUrl = this.httpService.apiUrl.replace(/\/api\/$/, '/hubs/notification');
+            const dataHubUrl = this.httpService.apiUrl.replace(/\/api\/$/, '/hubs/data'); // Changed: Data hub for real-time table updates
             this.storageService.get(Constants.AUTH_TOKEN).then((token) => {
-                if (token)
-                    this.signalRService.startConnection(hubUrl, token);
+                if (token) {
+                    this.signalRService.startConnection(notificationHubUrl, token);
+                    this.signalRService.startDataConnection(dataHubUrl, token); // Changed: Connect to data hub
+                }
             });
         }
     }
@@ -18157,7 +18451,9 @@ class PurchasingService {
                 { name: 'delete', dialog: true, action: { url: 'purchaseorders?action=delete', method: 'post' } }
             ],
             loadAction: { url: 'purchaseorders/all/x' },
-            formConfig: this.purchaseOrderFormConfig
+            formConfig: this.purchaseOrderFormConfig,
+            // realTime: true, // Disabled: testing realtime on transactions table only
+            entityName: 'PurchaseOrder'
         };
         //--------------------------Inventory Receipts-------------------------
         this.inventoryReceiptItemFormConfig = {
@@ -18311,7 +18607,9 @@ class PurchasingService {
                 { name: 'delete', dialog: true, icon: { name: 'delete_forever', color: 'red' }, action: { url: 'inventoryreceipts?action=delete', method: 'post' }, confirm: { message: 'CAUTION: Deleting this receipt will reverse all inventory additions, any sales of this inventory, and all related accounting transactions. This action cannot be undone. Are you sure you want to proceed?' } },
             ],
             loadAction: { url: 'inventoryreceipts/all/x' },
-            formConfig: this.inventoryReceiptFormConfig
+            formConfig: this.inventoryReceiptFormConfig,
+            // realTime: true, // Disabled: testing realtime on transactions table only
+            entityName: 'InventoryReceipt'
         };
         //--------------------------Supplier Payments-------------------------
         // Changed: Supplier payment form for recording payments against credit purchase receipts
@@ -18511,7 +18809,8 @@ class TransactionsComponent {
         this.accountingService = inject(AccountingService);
         this.pageConfig = {
             title: 'Transactions',
-            tableConfig: this.accountingService.transactionsTableConfig
+            tableConfig: this.accountingService.transactionsTableConfig,
+            searchTableConfig: this.accountingService.transactionSearchTableConfig // Changed: Enable search mode with date range, description, account filters
         };
     }
     ngOnInit() {
@@ -18812,7 +19111,9 @@ class SalesService {
                 this.salesOrderDeliverButton
             ],
             loadAction: { url: 'salesorders/all/x' },
-            formConfig: this.salesOrderFormConfig
+            formConfig: this.salesOrderFormConfig,
+            // realTime: true, // Disabled: testing realtime on transactions table only
+            entityName: 'SalesOrder'
         };
         //--------------------------Sale Items-------------------------
         this.saleItemFormConfig = {
@@ -18994,7 +19295,9 @@ class SalesService {
                 this.saleVoidButton
             ],
             loadAction: { url: 'sales/all/x' },
-            formConfig: this.saleFormConfig
+            formConfig: this.saleFormConfig,
+            // realTime: true, // Disabled: testing realtime on transactions table only
+            entityName: 'Sale'
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SalesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -19289,7 +19592,9 @@ class ProductionService {
                 { name: 'delete', dialog: true, action: { url: 'productionrecipes?action=delete', method: 'post' } }
             ],
             loadAction: { url: 'productionrecipes/all/x' },
-            formConfig: this.recipeFormConfig
+            formConfig: this.recipeFormConfig,
+            // realTime: true, // Disabled: testing realtime on transactions table only
+            entityName: 'ProductionRecipe'
         };
         // ==================== PRODUCTION ORDERS ====================
         this.orderItemFormConfig = {
@@ -19409,7 +19714,9 @@ class ProductionService {
                 { name: 'delete', dialog: true, action: { url: 'productionorders?action=delete', method: 'post' }, visible: (x) => x.statusName === 'Draft' }
             ],
             loadAction: { url: 'productionorders/all/x' },
-            formConfig: this.orderFormConfig
+            formConfig: this.orderFormConfig,
+            // realTime: true, // Disabled: testing realtime on transactions table only
+            entityName: 'ProductionOrder'
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ProductionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -19816,6 +20123,8 @@ class PayrollService {
             ],
             loadAction: { url: 'salarystructures/all/x' },
             formConfig: this.salaryStructureFormConfig,
+            // realTime: true, // Disabled: testing realtime on transactions table only
+            entityName: 'SalaryStructure'
         };
         //--------------------------Statutory Deduction Bands (child of StatutoryDeductionType)-------------------------
         this.statutoryDeductionBandFormConfig = {
@@ -19893,6 +20202,8 @@ class PayrollService {
             ],
             loadAction: { url: 'statutorydeductiontypes/all/x' },
             formConfig: this.statutoryDeductionTypeFormConfig,
+            // realTime: true, // Disabled: testing realtime on transactions table only
+            entityName: 'StatutoryDeductionType'
         };
         //--------------------------Payslip Lines (child of Payslip)-------------------------
         this.payslipLineFormConfig = {
@@ -20058,6 +20369,8 @@ class PayrollService {
             ],
             loadAction: { url: 'commissionconfigs/all/x' },
             formConfig: this.commissionConfigFormConfig,
+            // realTime: true, // Disabled: testing realtime on transactions table only
+            entityName: 'CommissionConfig'
         };
         // Employee commission configs child table
         this.employeeCommissionConfigsTableConfig = {
@@ -20117,6 +20430,8 @@ class PayrollService {
             ],
             loadAction: { url: 'commissionentries/all/x' },
             formConfig: this.commissionEntryFormConfig,
+            // realTime: true, // Disabled: testing realtime on transactions table only
+            entityName: 'CommissionEntry'
         };
         // Employee commission entries child table
         this.employeeCommissionEntriesTableConfig = {
@@ -20171,6 +20486,8 @@ class PayrollService {
             ],
             loadAction: { url: 'salaryadvances/all/x' },
             formConfig: this.salaryAdvanceFormConfig,
+            // realTime: true, // Disabled: testing realtime on transactions table only
+            entityName: 'SalaryAdvance'
         };
         // Employee salary advances child table
         this.employeeSalaryAdvancesTableConfig = {
@@ -20226,6 +20543,8 @@ class PayrollService {
             ],
             loadAction: { url: 'overtimeentries/all/x' },
             formConfig: this.overtimeEntryFormConfig,
+            // realTime: true, // Disabled: testing realtime on transactions table only
+            entityName: 'OvertimeEntry'
         };
         // Employee overtime entries child table
         this.employeeOvertimeHistoryTableConfig = {
@@ -20295,6 +20614,8 @@ class PayrollService {
             ],
             loadAction: { url: 'payrollruns/all/x' },
             formConfig: this.payrollRunFormConfig,
+            // realTime: true, // Disabled: testing realtime on transactions table only
+            entityName: 'PayrollRun'
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: PayrollService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -20534,7 +20855,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 }]
         }] });
 
-// Accounting module dashboard with financial KPI tiles and charts
+// Accounting module dashboard — pure financial/account performance (invoice-specific moved to invoicing)
 class AccountingDashboardComponent {
     constructor() {
         this.summaryTiles = {
@@ -20542,45 +20863,56 @@ class AccountingDashboardComponent {
                 { name: 'revenue', alias: 'Revenue (MTD)', color: '#4caf50', icon: 'trending_up', style: 'icon', info: 'MTD revenue' },
                 { name: 'expenses', alias: 'Expenses (MTD)', color: '#f44336', icon: 'trending_down', style: 'icon', info: 'MTD expenses' },
                 { name: 'netProfit', alias: 'Net Profit (MTD)', color: '#2196f3', icon: 'account_balance', style: 'icon', info: 'MTD profit' },
-                { name: 'outstandingAR', alias: 'Outstanding AR', color: '#ff9800', icon: 'receipt_long', style: 'icon', info: 'Unpaid invoices' },
-                { name: 'outstandingAP', alias: 'Outstanding AP', color: '#9c27b0', icon: 'payments', style: 'icon', info: 'Unpaid suppliers' },
-                { name: 'overdueInvoices', alias: 'Overdue', color: '#f44336', icon: 'warning', style: 'icon', info: 'Past due date' },
+                { name: 'cashBalance', alias: 'Cash & Bank', color: '#ff9800', icon: 'account_balance_wallet', style: 'icon', info: 'Cash + bank total' }, // Changed: Replaced outstandingAR
+                { name: 'totalLiabilities', alias: 'Liabilities', color: '#9c27b0', icon: 'credit_card', style: 'icon', info: 'Total liabilities' }, // Changed: Replaced outstandingAP
+                { name: 'transactionsMTD', alias: 'Transactions', color: '#607d8b', icon: 'swap_horiz', style: 'icon', info: 'Posted this period' }, // Changed: Replaced overdueInvoices
             ],
-            loadAction: { url: 'accounts/dashboard-summary/x' }, // Changed: Use module-specific CustomCriteria endpoint
+            loadAction: { url: 'accounts/dashboard-summary/x' },
             loadInit: true
         };
-        // Changed: Chart-style tiles now use loadAction with dataField for dynamic data
+        // Changed: Replaced collectionRate/invoiceStatusSplit with profitMargin/expenseBreakdown
         this.chartTiles = {
             tiles: [
-                { name: 'collectionRate', alias: 'Collection Rate', color: '#4caf50', chart: { type: 'doughnut', gaugeColor: '#4caf50', height: 130, dataField: 'collectionRate' }, footer: 'Invoice collection rate', footerIcon: 'check_circle' }, // Changed: dataField replaces gaugeValue
-                { name: 'revenueTrendSpark', alias: 'Revenue Trend', color: '#2196f3', chart: { type: 'line', color: '#2196f3', height: 100, dataField: 'revenueTrendSpark' }, footer: 'Last 12 months', footerIcon: 'show_chart' }, // Changed: dataField replaces inline data
-                { name: 'invoiceStatusSplit', alias: 'Invoice Status', color: '#ff9800', chart: { type: 'pie', colors: ['#9e9e9e', '#2196f3', '#4caf50', '#f44336', '#ff9800'], height: 130, dataField: 'invoiceStatusSplit' }, footer: 'Current distribution', footerIcon: 'receipt' }, // Changed: dataField replaces inline data
-                { name: 'expenseTrendSpark', alias: 'Expense Trend', color: '#f44336', chart: { type: 'bar', colors: ['#f44336', '#ef5350', '#e57373', '#ef9a9a', '#ffcdd2', '#f44336'], height: 100, dataField: 'expenseTrendSpark' }, footer: 'Last 6 months', footerIcon: 'trending_down' }, // Changed: dataField replaces inline data
+                { name: 'profitMargin', alias: 'Profit Margin', color: '#4caf50', chart: { type: 'doughnut', gaugeColor: '#4caf50', height: 130, dataField: 'profitMargin' }, footer: 'Net profit / revenue', footerIcon: 'pie_chart' }, // Changed: Replaced collectionRate
+                { name: 'revenueTrendSpark', alias: 'Revenue Trend', color: '#2196f3', chart: { type: 'line', color: '#2196f3', height: 100, dataField: 'revenueTrendSpark' }, footer: 'Last 12 months', footerIcon: 'show_chart' },
+                { name: 'expenseBreakdown', alias: 'Expense Breakdown', color: '#ff9800', chart: { type: 'pie', colors: ['#f44336', '#ff5722', '#ff9800', '#ffc107', '#ffeb3b', '#9e9e9e'], height: 130, dataField: 'expenseBreakdown' }, footer: 'Top 5 + Other', footerIcon: 'donut_large' }, // Changed: Replaced invoiceStatusSplit
+                { name: 'expenseTrendSpark', alias: 'Expense Trend', color: '#f44336', chart: { type: 'bar', colors: ['#f44336', '#ef5350', '#e57373', '#ef9a9a', '#ffcdd2', '#f44336'], height: 100, dataField: 'expenseTrendSpark' }, footer: 'Last 6 months', footerIcon: 'trending_down' },
             ],
-            loadAction: { url: 'accounts/dashboard-chart-tiles/x' }, // Changed: Load chart tile data from API
+            loadAction: { url: 'accounts/dashboard-chart-tiles/x' },
             loadInit: true
         };
+        // Changed: Replaced arAging/invoiceStatus with cashFlow/transactionVolume
         this.chartConfig = {
             charts: [
-                { name: 'revenueTrend', title: 'Revenue vs Expenses Trend', type: 'line', height: '300px', showPoints: true, tension: 0.4, colors: ['#4caf50', '#f44336'], showLegend: true }, // Changed: showLegend for line chart
-                { name: 'arAging', title: 'AR Aging Breakdown', type: 'bar', height: '300px', colors: ['#4caf50', '#ff9800', '#ff5722', '#f44336', '#b71c1c'] },
+                { name: 'revenueTrend', title: 'Revenue vs Expenses Trend', type: 'line', height: '300px', showPoints: true, tension: 0.4, colors: ['#4caf50', '#f44336'], showLegend: true },
+                { name: 'cashFlow', title: 'Monthly Cash Flow', type: 'bar', height: '300px', colors: ['#4caf50', '#f44336'], showLegend: true }, // Changed: Replaced arAging
                 { name: 'accountBalances', title: 'Account Balances by Type', type: 'bar', height: '300px', colors: ['#2196f3', '#f44336', '#4caf50', '#ff9800', '#9c27b0'] },
-                { name: 'invoiceStatus', title: 'Invoice Status Distribution', type: 'doughnut', height: '300px', colors: ['#9e9e9e', '#2196f3', '#4caf50', '#f44336', '#ff9800'] },
+                { name: 'transactionVolume', title: 'Monthly Transaction Volume', type: 'bar', height: '300px', colors: ['#7c4dff'] }, // Changed: Replaced invoiceStatus
             ],
-            loadAction: { url: 'accounts/dashboard-charts/x' }, // Changed: Use module-specific CustomCriteria endpoint
+            loadAction: { url: 'accounts/dashboard-charts/x' },
             loadInit: true,
             columns: 2
         };
+        // Changed: New cash/bank running balance line chart with separate data source
+        this.cashBankChartConfig = {
+            charts: [
+                { name: 'cashBankBalances', title: 'Cash & Bank Balances (30 Days)', type: 'line', height: '500px', showPoints: true, tension: 0.4, showLegend: true }, // Changed: Increased height for more granular values
+            ],
+            loadAction: { url: 'accounts/dashboard-cash-balances/x' },
+            loadInit: true,
+            columns: 1
+        };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AccountingDashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: AccountingDashboardComponent, isStandalone: false, selector: "spa-accounting-dashboard", ngImport: i0, template: `
     <div class="dashboard-container">
       <h4 class="dashboard-title"><mat-icon>account_balance</mat-icon> Accounting Dashboard</h4>
       <spa-tiles [config]="summaryTiles"></spa-tiles>
-      <!-- Changed: Chart tiles for mini financial indicators -->
       <div style="margin-top: 16px;"></div>
       <spa-tiles [config]="chartTiles"></spa-tiles>
       <spa-charts [config]="chartConfig"></spa-charts>
+      <!-- Changed: Separate cash/bank balance chart with own data source -->
+      <spa-charts [config]="cashBankChartConfig"></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$1.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"] }] }); }
 }
@@ -20590,10 +20922,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
     <div class="dashboard-container">
       <h4 class="dashboard-title"><mat-icon>account_balance</mat-icon> Accounting Dashboard</h4>
       <spa-tiles [config]="summaryTiles"></spa-tiles>
-      <!-- Changed: Chart tiles for mini financial indicators -->
       <div style="margin-top: 16px;"></div>
       <spa-tiles [config]="chartTiles"></spa-tiles>
       <spa-charts [config]="chartConfig"></spa-charts>
+      <!-- Changed: Separate cash/bank balance chart with own data source -->
+      <spa-charts [config]="cashBankChartConfig"></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"] }]
         }] });
@@ -20731,8 +21064,8 @@ class OverviewDashboardComponent {
                 { name: 'expenses', alias: 'Expenses (MTD)', color: '#f44336', icon: 'trending_down', style: 'icon', info: 'MTD expenses' },
                 { name: 'netProfit', alias: 'Net Profit (MTD)', color: '#2196f3', icon: 'account_balance', style: 'icon', info: 'MTD profit' },
                 { name: 'stockValue', alias: 'Stock Value', color: '#ff9800', icon: 'inventory_2', style: 'icon', info: 'Inventory value' },
-                { name: 'outstandingAR', alias: 'Outstanding AR', color: '#9c27b0', icon: 'receipt_long', style: 'icon', info: 'Unpaid invoices' },
-                { name: 'outstandingAP', alias: 'Outstanding AP', color: '#e91e63', icon: 'payments', style: 'icon', info: 'Unpaid suppliers' },
+                { name: 'cashBalance', alias: 'Cash & Bank', color: '#9c27b0', icon: 'account_balance_wallet', style: 'icon', info: 'Cash + bank total' }, // Changed: Replaced outstandingAR
+                { name: 'totalLiabilities', alias: 'Liabilities', color: '#e91e63', icon: 'credit_card', style: 'icon', info: 'Total liabilities' }, // Changed: Replaced outstandingAP
             ],
             loadAction: { url: 'dashboard/overview/summary' },
             loadInit: true
@@ -20824,6 +21157,7 @@ class InvoiceDashboardComponent {
                 { name: 'agingBreakdown', title: 'AR Aging Breakdown', type: 'bar', height: '300px', colors: ['#4caf50', '#ff9800', '#ff5722', '#f44336', '#b71c1c'] },
                 { name: 'topCustomers', title: 'Top Customers by Outstanding', type: 'bar', height: '300px', colors: ['#1565c0', '#1976d2', '#1e88e5', '#2196f3', '#42a5f5'] },
                 { name: 'paymentTrend', title: 'Payment Collection Trend', type: 'line', height: '300px', showPoints: true, tension: 0.4, colors: ['#4caf50'], showLegend: true },
+                { name: 'collectionPerformance', title: 'Collection Performance (12 Months)', type: 'line', height: '300px', showPoints: true, tension: 0.4, colors: ['#f57c00', '#4caf50'], showLegend: true }, // Changed: Avg days to pay + on-time rate trend
             ],
             loadAction: { url: 'invoices/dashboard-charts/x' },
             loadInit: true,