tin-spa 20.3.0 → 20.3.2

package/fesm2022/tin-spa.mjs

@@ -662,9 +662,20 @@ class DetailsDialogProcessor {
             transformStepUrl(updatedDetailsConfig.stepConfig);
         }
         function transformLoadUrl(tableConfig) {
-            if (tableConfig.loadAction && tableConfig.loadCriteria && tableConfig.loadIDField) {
+            if (!tableConfig.loadAction)
+                return;
+            // Changed: Check if URL contains {propertyName} placeholders
+            if (tableConfig.loadAction.url.includes('{')) {
+                tableConfig.loadAction.url = tableConfig.loadAction.url.replace(/\{(\w+)\}/g, (match, propName) => {
+                    const value = updatedDetailsConfig.details?.[propName];
+                    return value !== undefined && value !== null ? String(value) : match;
+                });
+                console.log("Transformed (placeholder)", tableConfig.loadAction.url);
+            }
+            else if (tableConfig.loadCriteria && tableConfig.loadIDField) {
+                // Changed: Fallback to existing loadCriteria/loadIDField approach
                 tableConfig.loadAction.url = `${tableConfig.loadAction.url.split('/')[0]}/${tableConfig.loadCriteria}/${updatedDetailsConfig.details[tableConfig.loadIDField]}`;
-                console.log("Transformed", tableConfig.loadAction.url);
+                console.log("Transformed (criteria)", tableConfig.loadAction.url);
             }
             else {
                 console.log("NOT Transformed");
@@ -672,8 +683,17 @@ class DetailsDialogProcessor {
         }
         function transformStepUrl(stepConfig) {
             if (stepConfig.loadAction && stepConfig.loadIDField) {
-                // let heroId = updatedDetailsConfig.details[updatedDetailsConfig.heroField];
-                stepConfig.loadAction.url = `${stepConfig.loadAction.url.replace('{id}', updatedDetailsConfig.details[stepConfig.loadIDField])}`;
+                // Changed: Support generic {propertyName} placeholders
+                if (stepConfig.loadAction.url.includes('{')) {
+                    stepConfig.loadAction.url = stepConfig.loadAction.url.replace(/\{(\w+)\}/g, (match, propName) => {
+                        const value = updatedDetailsConfig.details?.[propName];
+                        return value !== undefined && value !== null ? String(value) : match;
+                    });
+                }
+                else {
+                    // Fallback to legacy {id} replacement for backward compatibility
+                    stepConfig.loadAction.url = `${stepConfig.loadAction.url.replace('{id}', updatedDetailsConfig.details[stepConfig.loadIDField])}`;
+                }
                 // console.log("Transformed step URL", stepConfig.loadAction.url);
             }
         }
@@ -744,7 +764,16 @@ class DetailsDialogProcessor {
     static loadDetailsFromUrl(detailsConfig, formConfig) {
         let action;
         if (formConfig.loadAction) {
-            if (detailsConfig.heroField && detailsConfig.details) {
+            // Changed: Check if URL contains {propertyName} placeholders first - takes priority over hero field
+            if (formConfig.loadAction.url.includes('{') && detailsConfig.details) {
+                const transformedUrl = formConfig.loadAction.url.replace(/\{(\w+)\}/g, (match, propName) => {
+                    const value = detailsConfig.details?.[propName];
+                    return value !== undefined && value !== null ? String(value) : match;
+                });
+                action = { url: transformedUrl };
+                console.log("Transformed form URL (placeholder)", transformedUrl);
+            }
+            else if (detailsConfig.heroField && detailsConfig.details) {
                 // console.log("DetailsConfig Hero ID Field " + detailsConfig.heroField);
                 action = { url: `${formConfig.loadAction.url}/${detailsConfig.details[detailsConfig.heroField]}` };
             }
@@ -791,6 +820,19 @@ var InvoiceStatus;
     InvoiceStatus[InvoiceStatus["Discarded"] = 3] = "Discarded";
     InvoiceStatus[InvoiceStatus["Paying"] = 4] = "Paying"; // Changed: Added Paying status for partially paid invoices
 })(InvoiceStatus || (InvoiceStatus = {}));
+// Added: Invoice item type enum - mirrors backend InvoiceItemType
+var InvoiceItemType;
+(function (InvoiceItemType) {
+    InvoiceItemType[InvoiceItemType["General"] = 0] = "General";
+    InvoiceItemType[InvoiceItemType["Product"] = 1] = "Product";
+    InvoiceItemType[InvoiceItemType["Service"] = 2] = "Service";
+})(InvoiceItemType || (InvoiceItemType = {}));
+// Transaction timing enum - separates WHEN payment occurs from HOW
+var TransactionTiming;
+(function (TransactionTiming) {
+    TransactionTiming[TransactionTiming["Immediate"] = 0] = "Immediate";
+    TransactionTiming[TransactionTiming["Deferred"] = 1] = "Deferred"; // Payment occurs later - creates AR/AP
+})(TransactionTiming || (TransactionTiming = {}));
 // Inventory receipt status tracking enum - mirrors backend
 var InventoryReceiptStatus;
 (function (InventoryReceiptStatus) {
@@ -1498,6 +1540,7 @@ class DataServiceLib {
         this.capInventoryDashboard = new CapItem;
         this.capInventoryStock = new CapItem; // Changed: Added new cap item for inventory stock view
         this.capProducts = new CapItem;
+        this.capServiceItems = new CapItem; // Added: Capability for service items
         this.capBundleProducts = new CapItem; // Added: Capability for bundle products
         this.capInventoryItems = new CapItem;
         this.capPurchaseOrders = new CapItem;
@@ -2228,9 +2271,9 @@ class DataServiceLib {
         this.capInventory.name = "cap34";
         this.capInventory.display = "Inventory";
         this.capInventory.icon = "inventory";
-        this.capInventory.capSubItems = [this.capSales, this.capInventoryReceipts, this.capProducts, this.capBundleProducts, this.capInventoryStock, this.capInventoryTransactions, this.capInventoryItems,
+        this.capInventory.capSubItems = [this.capSales, this.capInventoryReceipts, this.capProducts, this.capServiceItems, this.capBundleProducts, this.capInventoryStock, this.capInventoryTransactions, this.capInventoryItems,
             this.capPurchaseOrders, this.capSalesOrders, this.capRequisitions, this.capInventoryAdjustments,
-            this.capInventoryReturns, this.capRequisitionReturns, this.capProductionRecipes, this.capProductionOrders, this.capInventoryDashboard];
+            this.capInventoryReturns, this.capRequisitionReturns, this.capProductionRecipes, this.capProductionOrders, this.capInventoryDashboard]; // Changed: Added capServiceItems to inventory menu 
         this.capInventoryDashboard.name = "cap35";
         this.capInventoryDashboard.display = "Dashboard";
         this.capInventoryDashboard.link = "home/admin/inventory-dashboard";
@@ -2243,6 +2286,10 @@ class DataServiceLib {
         this.capProducts.display = "Products";
         this.capProducts.link = "home/admin/inventory-products";
         this.capProducts.icon = "category";
+        this.capServiceItems.name = "cap59"; // Added: Service items capability
+        this.capServiceItems.display = "Services";
+        this.capServiceItems.link = "home/admin/inventory-service-items";
+        this.capServiceItems.icon = "build";
         this.capBundleProducts.name = "cap57"; // Added: Bundle products capability
         this.capBundleProducts.display = "Bundle Products";
         this.capBundleProducts.link = "home/admin/bundle-products";
@@ -2670,7 +2717,7 @@ class AccountingService {
             loadAction: { url: 'accounts/id' },
             heroField: 'accountID',
         };
-        this.accountCreateButton = { name: 'create', display: 'Create', dialog: true, action: { url: 'accounts?action=create', method: 'post' } };
+        this.accountCreateButton = { name: 'create', display: 'Create Account', dialog: true, action: { url: 'accounts?action=create', method: 'post' } };
         this.finAccounEditButton = { name: 'edit', dialog: true, action: { url: 'accounts?action=edit', method: 'post' } };
         this.accountBaseDetailsConfig = {
             formConfig: this.accountFormConfig,
@@ -2708,7 +2755,6 @@ class AccountingService {
             showFilter: false,
             minColumns: ['paymentDate', 'amount', 'methodName'],
             columns: [
-                { name: 'invoicePaymentID', type: 'number', alias: 'ID', hiddenCondition: () => true },
                 { name: 'paymentDate', type: 'date', alias: 'Date' },
                 { name: 'amount', type: 'money', alias: 'Amount' },
                 { name: 'methodName', type: 'text', alias: 'Method' },
@@ -2719,9 +2765,21 @@ class AccountingService {
                     action: { url: 'invoicepayments/migrate', method: 'post',
                         successMessage: 'Migration completed successfully' },
                     confirm: { message: 'This will migrate existing invoice payments from the legacy PaidAmount field to the new InvoicePayments table. Continue?' }
-                }
+                },
+                { name: 'edit', dialog: true, action: { url: 'invoicepayments?action=edit', method: 'post' }, visible: x => x.status != InvoiceStatus.Paid }, // Changed: Added edit button, hide on Paid invoices
+                { name: 'delete', inDialog: true, icon: { name: 'delete', color: 'red' }, action: { url: 'invoicepayments?action=delete', method: 'post', successMessage: 'Payment deleted' }, confirm: { message: 'Delete this payment? The linked financial transaction will be reversed.' }, visible: x => x.status != InvoiceStatus.Paid } // Changed: Added delete button with reversal warning, hide on Paid invoices
             ],
-            loadAction: { url: 'invoicepayments/x/x' }, loadCriteria: 'invoice', loadIDField: 'invoiceID'
+            loadAction: { url: 'invoicepayments/x/x' }, loadCriteria: 'invoice', loadIDField: 'invoiceID',
+            formConfig: {
+                title: 'Edit Payment',
+                fields: [
+                    { name: 'paymentDate', type: 'date', alias: 'Payment Date', required: true },
+                    { name: 'method', type: 'select', alias: 'Payment Method', required: true, loadAction: { url: 'invoicepayments/list/methods' } },
+                    { name: 'amount', type: 'money', alias: 'Amount', required: true },
+                    { name: 'reference', type: 'text', alias: 'Reference' }
+                ],
+                loadAction: { url: 'invoicepayments/id' }
+            }
         };
         // Invoice form configuration with customer and status fields
         this.invoiceFormConfig = {
@@ -2742,6 +2800,36 @@ class AccountingService {
             loadAction: { url: 'invoices/id' },
             heroField: 'invoiceID',
         };
+        // Invoice items form configuration
+        this.invoiceItemsFormConfig = {
+            title: 'Invoice Item',
+            fields: [
+                { name: 'itemType', type: 'select', required: true, alias: 'Item Type', loadAction: { url: 'invoiceitems/list/item-types' }, defaultValue: 0 }, // Added: Item type selector
+                { name: 'productID', type: 'select', alias: 'Product', loadAction: { url: 'products/list/invoice-items' },
+                    hiddenCondition: x => x.itemType !== 1, // Added: Product selector - visible only when itemType = Product (1)
+                    onSelectChange: (selectedId, formData, option) => {
+                        if (option) {
+                            formData.description = option.description || option.name;
+                            formData.unitPrice = option.unitPrice;
+                        }
+                    }
+                },
+                { name: 'serviceItemID', type: 'select', alias: 'Service', loadAction: { url: 'serviceitems/list/active' },
+                    hiddenCondition: x => x.itemType !== 2, // Added: Service selector - visible only when itemType = Service (2)
+                    onSelectChange: (selectedId, formData, option) => {
+                        if (option) {
+                            formData.description = option.description || option.name;
+                            formData.unitPrice = option.unitPrice;
+                        }
+                    }
+                },
+                { name: 'description', type: 'text', required: true, alias: 'Description', span: true }, // Changed: Description field (backend will populate for Product/Service)
+                { name: 'quantity', type: 'number', required: true, defaultValue: 1 },
+                { name: 'unitPrice', type: 'money', alias: 'Unit Price', required: true }, // Changed: Unit price field (backend will populate for Product/Service)
+            ],
+            loadAction: { url: 'invoiceitems/id/{invoiceItemID}' },
+            heroField: 'invoiceItemID',
+        };
         // Invoice items table for manual line item entry
         this.invoiceItemsTableConfig = {
             tabTitle: 'Invoice Items',
@@ -2759,20 +2847,17 @@ class AccountingService {
                 { name: 'create', display: 'Add Item', dialog: true, action: { url: 'invoiceitems?action=create', method: 'post' },
                     disabled: x => x.status != InvoiceStatus.Draft
                 },
-                { name: 'edit', dialog: true, action: { url: 'invoiceitems?action=edit', method: 'post' }, disabled: x => x.status != InvoiceStatus.Draft },
-                { name: 'delete', inDialog: true, icon: { name: 'delete', color: 'red' }, action: { url: 'invoiceitems?action=delete', method: 'post', successMessage: 'Deleted' }, confirm: { message: 'Delete this item?' }, disabled: x => x.status != InvoiceStatus.Draft }
+                { name: 'edit', dialog: true, action: { url: 'invoiceitems?action=edit', method: 'post' },
+                    disabled: x => x.status != InvoiceStatus.Draft
+                },
+                { name: 'delete', inDialog: true, icon: { name: 'delete', color: 'red' }, action: { url: 'invoiceitems?action=delete', method: 'post',
+                        successMessage: 'Deleted' },
+                    confirm: { message: 'Delete this item?' },
+                    disabled: x => x.status != InvoiceStatus.Draft
+                },
             ],
             loadAction: { url: 'invoiceitems/x/x' }, loadCriteria: 'invoice', loadIDField: 'invoiceID',
-            formConfig: {
-                title: 'Invoice Item',
-                fields: [
-                    { name: 'description', type: 'text', required: true, span: true },
-                    { name: 'quantity', type: 'number', required: true, defaultValue: 1 },
-                    { name: 'unitPrice', type: 'number', alias: 'Unit Price', required: true },
-                    { name: 'amount', type: 'number', readonly: true, hideOnCreate: true }
-                ],
-                loadAction: { url: 'invoiceitems/id' }
-            }
+            formConfig: this.invoiceItemsFormConfig // Changed: Reference extracted form config
         };
         // Invoice action buttons
         this.invoiceRecordPaymentButton = { name: 'record-payment', display: 'Record Payment', dialog: true, icon: { name: 'payment', color: 'blue' },
@@ -2780,7 +2865,8 @@ class AccountingService {
             visible: x => (x.status == InvoiceStatus.Submitted || x.status == InvoiceStatus.Paying) && x.outstandingAmount > 0 // Changed: Allow on both Submitted and Paying
         }; // Changed: Use detailsConfig to open payment form dialog
         this.invoiceDiscardButton = { name: 'discard', inDialog: true, display: 'Discard', icon: { name: 'close', color: 'red' },
-            action: { url: 'invoices?action=discard', method: 'post', successMessage: 'Discarded' }, confirm: { message: 'Invoice will be marked as cancelled?' },
+            action: { url: 'invoices?action=discard', method: 'post', successMessage: 'Discarded' },
+            confirm: { message: 'Invoice will be marked as cancelled?' },
             visible: x => x.status == InvoiceStatus.Draft || x.status == InvoiceStatus.Submitted // Changed: Only allow on Draft and Submitted
         };
         this.invoiceSubmitButton = { name: 'submit', inDialog: true, display: 'Submit', icon: { name: 'send', },
@@ -2789,8 +2875,9 @@ class AccountingService {
             visible: x => x.status == InvoiceStatus.Draft,
             disabled: x => x.totalAmount == 0
         };
-        this.invoiceEditButton = { name: 'edit', dialog: true, action: { url: 'invoices?action=edit', method: 'post', }, confirm: { message: 'Proceed ?' },
-            visible: x => x.status == InvoiceStatus.Draft || x.status == InvoiceStatus.Submitted // Changed: Disable on Paying and Paid
+        this.invoiceEditButton = { name: 'edit', dialog: true, action: { url: 'invoices?action=edit', method: 'post', },
+            confirm: { message: 'Proceed ?' },
+            visible: x => x.status == InvoiceStatus.Draft // Changed: Draft only
         };
         this.invoiceDownloadButton = { name: 'pdf', display: 'Download PDF', inDialog: true, icon: { name: 'picture_as_pdf', color: 'red' } };
         // Invoice details dialog with items, payments history, and action buttons
@@ -2820,7 +2907,7 @@ class AccountingService {
             collapseButtons: true,
             greyOut: x => x.status == InvoiceStatus.Paid,
             columns: [
-                { name: 'invoiceNumber', type: 'text', alias: 'Invoice #' },
+                { name: 'invoiceNumber', type: 'button', alias: 'Invoice #', detailsConfig: this.invoiceDetailsDialogConfig },
                 { name: 'customerName', type: 'text', alias: 'Customer' },
                 { name: 'invoiceDate', type: 'date' },
                 { name: 'dueDate', type: 'date', alias: 'Due Date' },
@@ -2840,14 +2927,16 @@ class AccountingService {
                 { name: 'outstandingAmount', type: 'money', alias: 'Outstanding' }
             ],
             buttons: [
-                { name: 'create', display: 'Create', dialog: true, action: { url: 'invoices?action=create', method: 'post' }, onSuccessButton: this.invoiceViewButton },
-                { name: 'view', dialog: true, detailsConfig: this.invoiceDetailsDialogConfig },
-                this.invoiceRecordPaymentButton,
+                { name: 'create', display: 'Create', dialog: true, onSuccessButton: this.invoiceViewButton,
+                    action: { url: 'invoices?action=create', method: 'post' }
+                },
+                // { name: 'view', dialog: true, detailsConfig: this.invoiceDetailsDialogConfig },
                 this.invoiceSubmitButton,
+                this.invoiceRecordPaymentButton,
                 // this.invoicePayButton,
                 this.invoiceDiscardButton,
-                this.invoiceEditButton,
-                this.invoiceDownloadButton,
+                // this.invoiceEditButton,
+                // this.invoiceDownloadButton,
             ],
             loadAction: { url: 'invoices/all/x' },
             formConfig: this.invoiceFormConfig,
@@ -2870,9 +2959,10 @@ class AccountingService {
         // Added: Base aging table configuration with common properties
         this.agingBaseTableConfig = {
             showFilter: true,
+            flatButtons: true,
             minColumns: ['invoiceNumber', 'customerName', 'outstandingAmount'],
             columns: [
-                { name: 'invoiceNumber', type: 'text', alias: 'Invoice #' },
+                { name: 'invoiceNumber', type: 'text', alias: 'Invoice #', detailsConfig: this.invoiceDetailsDialogConfig },
                 { name: 'customerName', type: 'text', alias: 'Customer' },
                 { name: 'invoiceDate', type: 'date', alias: 'Invoice Date' },
                 { name: 'dueDate', type: 'date', alias: 'Due Date' },
@@ -2881,7 +2971,10 @@ class AccountingService {
                 { name: 'paidAmount', type: 'money', alias: 'Paid' },
                 { name: 'outstandingAmount', type: 'money', alias: 'Outstanding' }
             ],
-            buttons: [{ name: 'view', dialog: true, detailsConfig: this.invoiceDetailsDialogConfig }]
+            buttons: [
+                { name: 'view', dialog: true, detailsConfig: this.invoiceDetailsDialogConfig },
+                this.invoiceRecordPaymentButton,
+            ]
         };
         //--------------------------Customer Invoices-------------------------
         // Customer invoice form without customerID field
@@ -3061,15 +3154,15 @@ class AccountingService {
                         { name: 'red', condition: x => x.status == 1 },
                     ],
                 },
-                { name: 'amount', type: 'money',
-                    color: { name: 'red', condition: x => x.reducesBalance && !x.isAggregate },
-                },
                 { name: 'typeName', type: 'text', alias: 'Type' },
                 { name: 'debitAccountName', type: 'text', alias: 'Debit Account' },
                 { name: 'creditAccountName', type: 'text', alias: 'Credit Account' },
+                { name: 'amount', type: 'money',
+                    color: { name: 'red', condition: x => x.reducesBalance && !x.isAggregate },
+                },
             ],
             buttons: [
-                { name: 'create', display: 'Create', dialog: true, action: { url: 'transactions/dto?action=create', method: 'post' } },
+                { name: 'create', display: 'Create Transaction', dialog: true, action: { url: 'transactions/dto?action=create', method: 'post' } },
                 { name: 'view', dialog: true, detailsConfig: this.transactionDetailsConfig },
                 this.transactionEditButton,
                 this.transactionVoidButton,
@@ -3080,12 +3173,91 @@ class AccountingService {
         this.accountTransactionsTableConfig = {
             ...this.transactionsTableConfig,
             causeFormRefresh: true,
+            minColumns: ['date', 'description', 'amount', 'runningBalance'],
             tabTitle: 'Account Transactions',
             loadAction: { url: 'transactions/account/x' }, loadCriteria: 'account', loadIDField: 'accountID',
             columns: [
                 ...this.transactionsTableConfig.columns,
-                { name: 'runningBalance', type: 'money', alias: 'Balance' } // Added running balance column
+                { name: 'runningBalance', type: 'money', alias: 'Balance' }
+            ],
+        };
+        //--------------------------Transaction Templates-------------------------
+        // Template form configuration (accountID hidden - auto-populated from context)
+        this.transactionTemplateFormConfig = {
+            security: { allow: [this.dataService.capTransactions] },
+            title: 'Transaction Template',
+            includeAudit: true,
+            fields: [
+                { name: 'name', type: 'text', required: true, span: true },
+                { name: 'accountID', type: 'number', hidden: true }, // Auto-populated from Account Details context
+                { name: 'transactionTypeID', type: 'select', alias: 'Transaction Type', required: true, detailsConfig: this.transactionTypeDetailsConfig, loadAction: { url: 'transactionTypes/list/x' } },
+                { name: 'blank', type: 'blank' },
+                { name: 'debitAccountID', type: 'select', alias: 'Default Debit Account', nullable: true, masterField: 'transactionTypeID', masterValueField: 'debitAccountType', masterDefaultValueField: 'defaultDebitAccountID', masterOptionValue: 'type', loadAction: { url: 'accounts/list/x' }, detailsConfig: this.accountBaseDetailsConfig },
+                { name: 'creditAccountID', type: 'select', alias: 'Default Credit Account', nullable: true, masterField: 'transactionTypeID', masterValueField: 'creditAccountType', masterDefaultValueField: 'defaultCreditAccountID', masterOptionValue: 'type', loadAction: { url: 'accounts/list/x' }, detailsConfig: this.accountBaseDetailsConfig },
+                { name: 'description', type: 'text', alias: 'Default Description', span: true },
+                { name: 'defaultAmount', type: 'money', alias: 'Default Amount', span: true },
+            ],
+            loadAction: { url: 'transactiontemplates/id' },
+            heroField: 'transactionTemplateID',
+        };
+        // Process form configuration (convert template to transaction)
+        this.transactionTemplateProcessFormConfig = {
+            title: 'Create Transaction from Template',
+            fixedTitle: true,
+            fields: [
+                { name: 'transactionTemplateID', type: 'number', hidden: true },
+                { name: 'name', type: 'label', alias: 'Template', readonly: true, span: true },
+                { name: 'transactionTypeID', type: 'select', alias: 'Transaction Type', required: true, detailsConfig: this.transactionTypeDetailsConfig, loadAction: { url: 'transactionTypes/list/x' } },
+                { name: 'date', type: 'date', required: true, defaultValue: 'now' },
+                { name: 'debitAccountID', type: 'select', alias: 'Debit Account', required: true, masterField: 'transactionTypeID', masterValueField: 'debitAccountType', masterOptionValue: 'type', loadAction: { url: 'accounts/list/x' }, detailsConfig: this.accountBaseDetailsConfig },
+                { name: 'creditAccountID', type: 'select', alias: 'Credit Account', required: true, masterField: 'transactionTypeID', masterValueField: 'creditAccountType', masterOptionValue: 'type', loadAction: { url: 'accounts/list/x' }, detailsConfig: this.accountBaseDetailsConfig },
+                { name: 'description', type: 'text', required: true, span: true },
+                { name: 'amount', type: 'money', required: true, span: true },
+            ],
+        };
+        // Template action buttons
+        this.transactionTemplateCreateButton = { name: 'create', display: 'Create Template', dialog: true, action: { url: 'transactiontemplates?action=create', method: 'post' } };
+        this.transactionTemplateEditButton = { name: 'edit', dialog: true, action: { url: 'transactiontemplates?action=edit', method: 'post' } };
+        // Template details config (for view/edit)
+        this.transactionTemplateDetailsConfig = {
+            formConfig: this.transactionTemplateFormConfig,
+            heroField: 'transactionTemplateID',
+            buttons: [this.transactionTemplateCreateButton, this.transactionTemplateEditButton]
+        };
+        // Process details config (for processing template)
+        this.transactionTemplateProcessDetailsConfig = {
+            formConfig: this.transactionTemplateProcessFormConfig,
+            heroField: 'transactionTemplateID',
+            mode: 'edit',
+            buttons: [
+                { name: 'process', display: 'Create Transaction', icon: { name: 'play_arrow', color: 'green' }, inDialog: true,
+                    action: { url: 'transactiontemplates/dto?action=process', method: 'post',
+                        successMessage: 'Transaction created from template' }
+                }
+            ]
+        };
+        // Templates table configuration (3rd tab in Account Details)
+        this.transactionTemplatesTableConfig = {
+            tabTitle: 'Transaction Templates',
+            showFilter: true,
+            minColumns: ['name', 'transactionTypeName', 'defaultAmountDisplay'],
+            flatButtons: true,
+            columns: [
+                { name: 'name', type: 'button', detailsConfig: this.transactionTemplateProcessDetailsConfig },
+                { name: 'transactionTypeName', type: 'text', alias: 'Type' },
+                { name: 'debitAccountName', type: 'text', alias: 'Debit Account' },
+                { name: 'creditAccountName', type: 'text', alias: 'Credit Account' },
+                { name: 'defaultAmountDisplay', type: 'text', alias: 'Default Amount' },
+            ],
+            buttons: [
+                this.transactionTemplateCreateButton,
+                { name: 'process', display: 'Create Transaction', icon: { name: 'play_arrow', color: 'green' }, dialog: true, detailsConfig: this.transactionTemplateProcessDetailsConfig },
+                { name: 'view', dialog: true, detailsConfig: this.transactionTemplateDetailsConfig },
+                { name: 'edit', dialog: true, action: { url: 'transactiontemplates?action=edit', method: 'post' }, detailsConfig: this.transactionTemplateDetailsConfig }, // Changed: Inline edit button with both action and detailsConfig
+                { name: 'delete', inDialog: true, icon: { name: 'delete', color: 'red' }, action: { url: 'transactiontemplates?action=delete', method: 'post', successMessage: 'Template deleted' }, confirm: { message: 'Delete this template?' } },
             ],
+            loadAction: { url: 'transactiontemplates/account/x' }, loadCriteria: 'account', loadIDField: 'accountID',
+            formConfig: this.transactionTemplateFormConfig
         };
         //--------------------------Accounts-------------------------
         this.accountDetailsConfig = {
@@ -3098,6 +3270,7 @@ class AccountingService {
                     buttons: [],
                     loadAction: { url: 'transactionTypes/account/x' }, loadCriteria: 'account', loadIDField: 'accountID'
                 },
+                { ...this.transactionTemplatesTableConfig }, // Changed: Added 3rd tab for transaction templates
             ]
         };
         this.accountsTableConfig = {
@@ -3716,6 +3889,47 @@ class InventoryService {
             loadAction: { url: 'products/bundles/x' },
             formConfig: this.bundleProductFormConfig
         };
+        //--------------------------ServiceItems-------------------------
+        // ServiceItem form configuration - follows Product pattern
+        this.serviceItemFormConfig = {
+            title: 'Service',
+            includeAudit: true,
+            fields: [
+                { name: 'name', type: 'text', required: true, alias: 'Service Name' },
+                { name: 'description', type: 'text', alias: 'Description' },
+                { name: 'unitPrice', type: 'money', required: true, alias: 'Unit Price' },
+                { name: 'isActive', type: 'checkbox', alias: 'Active', defaultValue: true }
+            ],
+            loadAction: { url: 'serviceitems/id' },
+            heroField: 'serviceItemID'
+        };
+        this.serviceItemCreateButton = { name: 'create', display: 'Create Service', dialog: true, action: { url: 'serviceitems?action=create', method: 'post' } };
+        this.serviceItemEditButton = { name: 'edit', dialog: true, action: { url: 'serviceitems?action=edit', method: 'post' } };
+        this.serviceItemDeleteButton = { name: 'delete', dialog: true, action: { url: 'serviceitems?action=delete', method: 'post' } };
+        this.serviceItemDetailsConfig = {
+            formConfig: this.serviceItemFormConfig,
+            heroField: 'serviceItemID',
+            buttons: [this.serviceItemCreateButton, this.serviceItemEditButton, this.serviceItemDeleteButton]
+        };
+        this.serviceItemsTableConfig = {
+            showFilter: true,
+            flatButtons: true,
+            minColumns: ['name', 'unitPrice', 'statusName'],
+            columns: [
+                { name: 'name', type: 'text', alias: 'Service Name' },
+                { name: 'description', type: 'text', alias: 'Description' },
+                { name: 'unitPrice', type: 'money', alias: 'Unit Price' },
+                { name: 'statusName', type: 'text', alias: 'Status' }
+            ],
+            buttons: [
+                this.serviceItemCreateButton,
+                { name: 'view', dialog: true, detailsConfig: this.serviceItemDetailsConfig },
+                this.serviceItemEditButton,
+                this.serviceItemDeleteButton
+            ],
+            loadAction: { url: 'serviceitems/all/x' },
+            formConfig: this.serviceItemFormConfig
+        };
         //--------------------------Requisitions-------------------------
         this.requisitionItemFormConfig = {
             title: 'Requisition Item',
@@ -3807,10 +4021,10 @@ class InventoryService {
         };
         //--------------------------Purchase Orders-------------------------
         // Payment type options (used across forms)
+        // Changed: Removed Credit option - timing now determines credit vs cash purchase
         this.paymentTypeOptions = [
             { value: 0, name: 'Cash' },
-            { value: 1, name: 'Bank' },
-            { value: 2, name: 'Credit' }
+            { value: 1, name: 'Bank' }
         ];
         // PO Item form configuration
         this.purchaseOrderItemFormConfig = {
@@ -3994,9 +4208,15 @@ class InventoryService {
                 { name: 'supplierID', type: 'select', required: true, alias: 'Supplier', section: 'receiptInfo',
                     loadAction: { url: 'suppliers/list/x' }, detailsConfig: this.dataService.supplierDetailsConfig, infoMessage: 'Supplier providing the goods'
                 },
-                { name: 'paymentType', type: 'select', required: true, alias: 'Payment Type', section: 'receiptInfo',
-                    options: this.paymentTypeOptions, defaultFirstValue: true, infoMessage: 'Payment method used for this purchase' },
-                { name: 'supplierInvoiceNumber', type: 'text', alias: 'Supplier Invoice #', section: 'receiptInfo', infoMessage: 'Invoice number from supplier' },
+                { name: 'timing', type: 'select', required: true, alias: 'Transaction Type', section: 'receiptInfo',
+                    loadAction: { url: 'inventoryreceipts/list/timing' }, defaultFirstValue: true,
+                    infoMessage: 'Cash Purchase (pay now) or Credit Purchase (pay later)'
+                },
+                { name: 'paymentType', type: 'select', required: true, alias: 'Payment Method', section: 'receiptInfo', defaultFirstValue: true,
+                    options: this.paymentTypeOptions, infoMessage: 'Payment method used for this purchase',
+                    hiddenCondition: x => x.timing === 1,
+                    requiredCondition: x => x.timing === 0
+                },
                 { name: 'receiptNumber', type: 'text', alias: 'Receipt Number', readonly: true, hideOnCreate: true, section: 'receiptInfo', infoMessage: 'Auto-generated unique receipt identifier' },
                 { name: 'poNumber', type: 'text', alias: 'PO Number', hideOnCreate: true, section: 'receiptInfo', infoMessage: 'Linked purchase order if receiving against a PO',
                     hiddenCondition: (row) => !row.purchaseOrderID,
@@ -4023,12 +4243,16 @@ class InventoryService {
                 { name: 'totals', type: 'section', alias: 'Totals', hideOnCreate: true, collapsed: true },
                 { name: 'totalAmount', type: 'money', alias: 'Total Amount', readonly: true, section: 'totals', infoMessage: 'Total value of all items' },
                 { name: 'additionalInfo', type: 'section', alias: 'Additional Information', collapsed: true },
-                { name: 'notes', type: 'text', alias: 'Notes', span: true, section: 'additionalInfo', infoMessage: 'Additional notes about this receipt' }
+                { name: 'notes', type: 'text', alias: 'Notes', span: true, section: 'additionalInfo', infoMessage: 'Additional notes about this receipt' },
+                { name: 'supplierInvoiceNumber', type: 'text', alias: 'Supplier Invoice #', section: 'additionalInfo', infoMessage: 'Invoice number from supplier' },
             ],
             loadAction: { url: 'inventoryreceipts/id' },
             heroField: 'inventoryReceiptID'
         };
-        this.inventoryReceiptEditButton = { name: 'edit', dialog: true, action: { url: 'inventoryreceipts?action=edit', method: 'post' }, visible: (x) => x.status !== InventoryReceiptStatus.Completed }; // Changed: Use status enum instead of statusName
+        this.inventoryReceiptEditButton = { name: 'edit', dialog: true,
+            action: { url: 'inventoryreceipts?action=edit', method: 'post' },
+            visible: (x) => x.status !== InventoryReceiptStatus.Completed
+        };
         this.inventoryReceiptCompleteButton = { name: 'complete', display: 'Complete Receipt', inDialog: true, // Changed: Updated display text and action name
             icon: { name: 'check_circle', color: 'green' },
             action: { url: 'inventoryreceipts?action=complete', method: 'post', successMessage: 'Receipt Completed' }, // Changed: Updated endpoint and message
@@ -4061,7 +4285,7 @@ class InventoryService {
                 { name: 'receiptDate', type: 'date', alias: 'Date' },
                 { name: 'supplierName', type: 'text', alias: 'Supplier' },
                 { name: 'productsDisplay', type: 'text', alias: 'Products' }, // Added: Display product names or count
-                { name: 'paymentTypeName', type: 'text', alias: 'Payment' },
+                { name: 'timingName', type: 'text', alias: 'Payment' },
                 { name: 'status', type: 'icon', alias: 'Status', detailsConfig: this.inventoryReceiptDetailsConfig, // Changed: Use status instead of statusName
                     icons: [
                         { name: 'article', color: '#9E9E9E', condition: (x) => x.status === InventoryReceiptStatus.Draft, tip: 'Draft' }, // Changed: Use status enum
@@ -4362,7 +4586,23 @@ class InventoryService {
             fields: [
                 { name: 'saleInfo', type: 'section', alias: 'Sale Information' }, // Changed: Hide when single product mode or when editing existing sale
                 { name: 'saleDate', type: 'date', required: true, alias: 'Sale Date', section: 'saleInfo', infoMessage: 'Date when the sale was completed' },
-                { name: 'customerID', type: 'select', required: true, alias: 'Customer', section: 'saleInfo', loadAction: { url: 'customers/list/x' }, detailsConfig: this.dataService.customerDetailsConfig },
+                { name: 'customerID', type: 'select', required: true, alias: 'Customer', section: 'saleInfo',
+                    loadAction: { url: 'customers/list/x' }, detailsConfig: this.dataService.customerDetailsConfig
+                },
+                { name: 'timing', type: 'select', required: true, alias: 'Transaction Type', section: 'saleInfo',
+                    loadAction: { url: 'sales/list/timing' }, defaultFirstValue: true, infoMessage: 'Cash Sale (pay now) or Credit Sale (pay later)'
+                },
+                { name: 'paymentMethod', type: 'select', required: true, alias: 'Payment Method', section: 'saleInfo', defaultFirstValue: true, infoMessage: 'Method of payment used for this sale',
+                    requiredCondition: x => x.timing === 0,
+                    hiddenCondition: x => x.timing === 1,
+                    options: [
+                        { name: 'Cash', value: 0 },
+                        { name: 'Bank Transfer', value: 1 },
+                        { name: 'Mobile Money', value: 2 },
+                        { name: 'Card', value: 3 },
+                        { name: 'Complementary', value: 5 }
+                    ],
+                },
                 { name: 'multipleProducts', type: 'checkbox', alias: 'Multiple Products', defaultValue: false, hideOnExists: true, infoMessage: 'Check this box if you want to add multiple products to this sale' }, // Changed: Added checkbox for multiple products mode
                 { name: 'saleType', type: 'select', required: true, alias: 'Sale Type', section: 'saleInfo', options: [{ name: 'Quick Sale', value: 0 }, { name: 'From Order', value: 1 }], defaultFirstValue: true, hideOnCreate: true, infoMessage: 'Select if this is a quick sale or created from an order' },
                 { name: 'quickSaleItem', type: 'section', alias: 'Quick Sale Item', hiddenCondition: x => x.multipleProducts === true || x.saleID }, // Changed: Section for single product entry
@@ -4375,17 +4615,16 @@ class InventoryService {
                 },
                 { name: 'quantity', type: 'number', required: true, alias: 'Quantity', section: 'quickSaleItem', defaultValue: 1, hiddenCondition: x => x.multipleProducts === true, infoMessage: 'Quantity of the product' }, // Changed: Quantity field for quick sale
                 { name: 'unitPrice', type: 'money', required: true, alias: 'Unit Price', section: 'quickSaleItem', hiddenCondition: x => x.multipleProducts === true, infoMessage: 'Price per unit' }, // Changed: Unit price field for quick sale
-                { name: 'paymentInfo', type: 'section', alias: 'Payment Information', collapsedCondition: x => x.saleID },
-                { name: 'paymentMethod', type: 'select', required: true, alias: 'Payment Method', section: 'paymentInfo', options: [{ name: 'Cash', value: 0 }, { name: 'Bank Transfer', value: 1 }, { name: 'Mobile Money', value: 2 }, { name: 'Card', value: 3 }, { name: 'Credit', value: 4 }, { name: 'Complementary', value: 5 }], defaultFirstValue: true, infoMessage: 'Method of payment used for this sale' },
-                { name: 'paymentReference', type: 'text', alias: 'Payment Reference', section: 'paymentInfo', infoMessage: 'Transaction reference number or payment receipt' },
-                { name: 'paymentStatus', type: 'select', alias: 'Payment Status', readonly: true, section: 'paymentInfo', loadAction: { url: 'sales/list/payment-status' }, hideOnCreate: true, infoMessage: 'Current payment status of the sale' },
                 { name: 'totals', type: 'section', alias: 'Totals', collapsed: true, hideOnCreate: true },
                 { name: 'subTotal', type: 'money', alias: 'Sub Total', readonly: true, section: 'totals', infoMessage: 'Total before tax and discounts' },
                 { name: 'taxAmount', type: 'money', alias: 'Tax Amount', section: 'totals', infoMessage: 'Tax amount applied to the sale' },
                 { name: 'discount', type: 'money', alias: 'Discount', section: 'totals', infoMessage: 'Discount amount applied to the sale' },
                 { name: 'totalAmount', type: 'money', alias: 'Total Amount', readonly: true, section: 'totals', infoMessage: 'Final amount after tax and discounts' },
                 { name: 'additionalInfo', type: 'section', alias: 'Additional Information', collapsed: true },
-                { name: 'notes', type: 'text', alias: 'Notes', span: true, section: 'additionalInfo', infoMessage: 'Additional notes or comments about this sale' }
+                { name: 'notes', type: 'text', alias: 'Notes', span: true, section: 'additionalInfo', infoMessage: 'Additional notes or comments about this sale' },
+                { name: 'paymentReference', type: 'text', alias: 'Payment Reference', section: 'additionalInfo', infoMessage: 'Transaction reference number or payment receipt',
+                    hiddenCondition: x => x.timing === 1
+                },
             ],
             loadAction: { url: 'sales/id' },
             heroField: 'saleID'
@@ -4399,26 +4638,72 @@ class InventoryService {
                 { name: 'Partial', value: 2, icon: 'payment' }
             ]
         };
+        // Added: Sale payment form configuration (matches invoice payment form)
+        this.salePaymentFormConfig = {
+            security: { allow: [this.dataService.capSales] },
+            title: 'Record Payment',
+            fixedTitle: true,
+            fields: [
+                { name: 'saleID', type: 'number', hidden: true },
+                { name: 'paymentDate', type: 'date', alias: 'Payment Date', required: true },
+                { name: 'method', type: 'select', alias: 'Payment Method', required: true, defaultValue: 1, loadAction: { url: 'invoicepayments/list/methods' } }, // Changed: Default to 1 (Bank)
+                { name: 'totalAmount', type: 'label', alias: 'Total Amount', readonly: true },
+                { name: 'amount', type: 'money', alias: 'Amount', required: true, span: true },
+                { name: 'paymentReferenceTemp', type: 'text', alias: 'Reference', span: true }
+            ],
+        };
+        // Added: Sale payment button (matches invoice payment button pattern)
+        this.salePaymentCreateButton = {
+            name: 'edit', // Changed: Use standard 'edit' button name for framework recognition
+            action: { url: 'sales?action=record-payment', method: 'post', successMessage: 'Payment recorded successfully' }
+        };
+        // Added: Sale payment details dialog config
+        this.salePaymentDetailsConfig = {
+            formConfig: this.salePaymentFormConfig,
+            heroField: 'saleID',
+            mode: 'edit',
+            buttons: [
+                this.salePaymentCreateButton // Changed: Use separate button definition
+            ]
+        };
+        // Added: Sale payment record button
+        this.saleRecordPaymentButton = {
+            name: 'record-payment', display: 'Record Payment', inDialog: true, dialog: true, icon: { name: 'payment', color: 'blue' },
+            detailsConfig: this.salePaymentDetailsConfig,
+            visible: x => x.timing === 1 && x.paymentStatus !== 1
+        };
+        // Added: Sale payments table for payment history (from linked invoice)
+        this.salePaymentsTableConfig = {
+            tabTitle: 'Payment History',
+            showFilter: false,
+            minColumns: ['paymentDate', 'amount', 'methodName'],
+            columns: [
+                { name: 'paymentDate', type: 'date', alias: 'Date' },
+                { name: 'amount', type: 'money', alias: 'Amount' },
+                { name: 'methodName', type: 'text', alias: 'Method' },
+                { name: 'reference', type: 'text', alias: 'Reference' }
+            ],
+            loadAction: { url: 'invoicepayments/x/x' }, loadCriteria: 'invoice', loadIDField: 'invoiceID',
+            hideTabCondition: (x) => x.timing !== 1 // Changed: Only show for deferred payments (credit sales)
+        };
         // Details dialog config for sale with complete button (only visible if not yet paid)
         this.saleDetailsConfig = {
             formConfig: this.saleFormConfig,
-            tableConfigs: [this.saleItemsTableConfig],
+            tableConfigs: [this.saleItemsTableConfig, this.salePaymentsTableConfig], // Added: Include payment history table
             heroField: 'saleID',
             stepConfig: this.saleStepConfig, // Changed: Added step config for payment status tracking
             buttons: [
                 { name: 'complete', display: 'Complete Sale', color: 'primary', inDialog: true,
                     action: { url: 'sales?action=complete', method: 'post' },
                     confirm: { message: 'Complete this sale? This will reduce inventory and create accounting entries.' },
-                    visible: x => x.paymentStatus !== 1
-                }
+                    visible: x => x.timing === 0 && x.paymentStatus !== 1 // Changed: Only for immediate sales that aren't paid (deferred sales are auto-completed)
+                },
+                this.saleRecordPaymentButton // Added: Record payment button for credit sales
             ]
         };
         this.saleViewButton = { name: 'view', dialog: true, detailsConfig: this.saleDetailsConfig };
         this.saleCreateButton = {
-            name: 'create',
-            display: 'Quick Sale',
-            dialog: true,
-            action: { url: 'sales?action=create', method: 'post' },
+            name: 'create', display: 'Quick Sale', dialog: true, action: { url: 'sales?action=create', method: 'post' },
         };
         this.saleVoidButton = { name: 'void', display: 'Void', icon: { name: 'undo', color: 'red' },
             confirm: { message: 'Caution: Voiding this sale will reverse all inventory transactions and void accounting entries. This action cannot be undone.' },
@@ -4433,7 +4718,7 @@ class InventoryService {
                 { name: 'saleDate', type: 'date', alias: 'Date' },
                 { name: 'displayCustomerName', type: 'text', alias: 'Customer' },
                 { name: 'productsDisplay', type: 'text', alias: 'Products' }, // Added: Display product names or count
-                { name: 'paymentMethodName', type: 'text', alias: 'Payment' },
+                { name: 'timingName', type: 'text', alias: 'Payment' },
                 { name: 'paymentStatus', type: 'icon', alias: 'Status', detailsConfig: this.inventoryReceiptDetailsConfig, // Changed: Use status instead of statusName
                     icons: [
                         { name: 'article', color: '#9E9E9E', condition: (x) => x.paymentStatus === 0, tip: 'Unpaid' }, // Changed: Use status enum
@@ -4444,7 +4729,10 @@ class InventoryService {
                 { name: 'totalAmount', type: 'money', alias: 'Total' }
             ],
             buttons: [
-                this.saleViewButton, this.saleCreateButton, this.saleVoidButton
+                this.saleViewButton,
+                this.saleRecordPaymentButton,
+                this.saleCreateButton,
+                this.saleVoidButton
             ],
             loadAction: { url: 'sales/all/x' },
             formConfig: this.saleFormConfig
@@ -4757,31 +5045,45 @@ class TabService {
         this.buttonService = buttonService;
         this.tableConfigService = tableConfigService;
     }
+    // Replace {propertyName} placeholders in URL with values from parentData
+    transformCountUrl(url, parentData) {
+        if (!parentData || !url || !url.includes('{'))
+            return url; // Changed: Only process if URL contains placeholders
+        return url.replace(/\{(\w+)\}/g, (match, propName) => {
+            const value = parentData[propName];
+            return value !== undefined && value !== null ? String(value) : match;
+        });
+    }
     // Initialize tab counts and reload subjects for all tabs
-    initializeTabs(tableConfigs) {
+    initializeTabs(tableConfigs, parentData) {
         const tabCounts = {};
         const tableReloads = {};
         tableConfigs.forEach((config, index) => {
             if (config.countAction) {
-                this.loadTabCount(index, config.countAction, tabCounts);
+                this.loadTabCount(index, config.countAction, tabCounts, parentData); // Changed: Pass parentData for URL placeholder replacement
             }
             tableReloads[index] = new Subject();
         });
         return { tabCounts, tableReloads };
     }
     // Load count for a specific tab
-    loadTabCount(tabIndex, countAction, tabCounts) {
-        this.dataService.CallApi(countAction).subscribe((apiResponse) => {
+    loadTabCount(tabIndex, countAction, tabCounts, parentData // Changed: Accept parentData for URL placeholder replacement
+    ) {
+        // Changed: Transform URL by replacing {propertyName} placeholders with parentData values
+        const transformedUrl = this.transformCountUrl(countAction.url, parentData);
+        const transformedAction = { ...countAction, url: transformedUrl };
+        this.dataService.CallApi(transformedAction).subscribe((apiResponse) => {
             if (apiResponse.success) {
                 tabCounts[tabIndex] = apiResponse.data;
             }
         });
     }
     // Refresh count for a specific tab
-    refreshTabCount(index, tableConfigs, tabCounts) {
+    refreshTabCount(index, tableConfigs, tabCounts, parentData // Changed: Accept parentData for URL placeholder replacement
+    ) {
         const config = tableConfigs[index];
         if (config?.countAction) {
-            this.loadTabCount(index, config.countAction, tabCounts);
+            this.loadTabCount(index, config.countAction, tabCounts, parentData); // Changed: Pass parentData
         }
     }
     // Handle tab change - mark tab as loaded for lazy loading
@@ -5975,6 +6277,7 @@ class SelectCommonComponent {
             this.subscription = this.field.optionsSubject.subscribe(newOptions => {
                 if (newOptions) {
                     this.options = newOptions;
+                    this.setDefaultValue(); // Changed: Apply default after options update via subscription
                     this.updateSelectedOptionHint();
                 }
             });
@@ -5991,15 +6294,54 @@ class SelectCommonComponent {
         this.updateSelectedOptionHint();
     }
     setDefaultValue() {
-        if (this.defaultFirstValue && this.options && this.options.length > 0 &&
-            (this.value == null || this.value == undefined || (typeof (this.value) == 'string' && this.value == '') || (typeof (this.value) == 'number' && this.value == 0))) {
+        // Guard: Need options to set any default
+        if (!this.options || this.options.length === 0) {
+            return;
+        }
+        // Guard: Check if value is already meaningfully set
+        const hasValue = this.value != null &&
+            this.value !== undefined &&
+            !(typeof this.value === 'string' && this.value === '') &&
+            !(typeof this.value === 'number' && this.value === 0 && !this.nullable);
+        if (hasValue) {
+            // Value already set - verify it exists in options
+            const valueExists = this.options.some(opt => this.compareValues(opt[this.optionValue], this.value));
+            if (valueExists) {
+                return; // Valid value already selected
+            }
+        }
+        // Priority 1: Use field.defaultValue if configured
+        const defaultVal = this.field?.defaultValue;
+        if (defaultVal != null && defaultVal !== undefined) {
+            const matchingOption = this.options.find(opt => this.compareValues(opt[this.optionValue], defaultVal));
+            if (matchingOption) {
+                this.value = matchingOption[this.optionValue];
+                this.changed();
+                return;
+            }
+        }
+        // Priority 2: Use defaultFirstValue if configured
+        if (this.defaultFirstValue) {
             this.value = this.options[0][this.optionValue];
             this.changed();
         }
     }
+    // Changed: Added helper method for type-coerced value comparison (handles number vs string)
+    compareValues(optionValue, targetValue) {
+        if (optionValue === targetValue)
+            return true;
+        if (optionValue == null || targetValue == null)
+            return false;
+        return String(optionValue) === String(targetValue);
+    }
     changed() {
         this.valueChange.emit(this.value);
         this.updateSelectedOptionHint();
+        // Added: Call onSelectChange callback if provided
+        if (this.field?.onSelectChange && this.data) {
+            const selectedOption = this.options?.find(opt => opt[this.optionValue] === this.value);
+            this.field.onSelectChange(this.value, this.data, selectedOption);
+        }
     }
     updateSelectedOptionHint() {
         if (!this.options || this.options.length === 0 || this.value == null || this.value == undefined) {
@@ -6038,7 +6380,18 @@ class SelectCommonComponent {
         this.getData(refreshAction);
     }
     transformLoadUrl(action) {
-        if (!action?.url || !this.loadIDField || !this.data)
+        if (!action?.url || !this.data)
+            return action;
+        // Changed: Check if URL contains {propertyName} placeholders first
+        if (action.url.includes('{')) {
+            const transformedUrl = action.url.replace(/\{(\w+)\}/g, (match, propName) => {
+                const value = this.data?.[propName];
+                return value !== undefined && value !== null ? String(value) : match;
+            });
+            return { ...action, url: transformedUrl };
+        }
+        // Changed: Fallback to existing loadIDField pattern for backward compatibility
+        if (!this.loadIDField)
             return action;
         const idValue = this.data[this.loadIDField];
         if (!idValue)
@@ -6956,7 +7309,18 @@ class ViewerComponent {
     // fileList: string[];
     loadData() {
         console.log("Calling files");
-        let url = this.fileAction.url.replace("/x", '/' + this.folderName);
+        let url = this.fileAction.url;
+        // Changed: Support generic {propertyName} placeholders first
+        if (url.includes('{')) {
+            url = url.replace(/\{(\w+)\}/g, (match, propName) => {
+                const value = { folderName: this.folderName }[propName];
+                return value !== undefined && value !== null ? String(value) : match;
+            });
+        }
+        else {
+            // Fallback: Legacy /x replacement for backward compatibility
+            url = url.replace("/x", '/' + this.folderName);
+        }
         this.dataService.CallApi({ url: url }, "").subscribe((apiResponse) => {
             this.fileNames = apiResponse.data;
             // console.log(this.fileNames)
@@ -7532,12 +7896,22 @@ class NotesComponent {
             return;
         }
         // Otherwise, load from the URL if configured
-        if (this.loadAction && this.data && this.loadIDField) {
-            const idValue = this.data[this.loadIDField];
-            if (!idValue) {
-                return;
+        if (this.loadAction && this.data) {
+            let url = this.loadAction.url;
+            // Changed: Support generic {propertyName} placeholders first
+            if (url.includes('{')) {
+                url = url.replace(/\{(\w+)\}/g, (match, propName) => {
+                    const value = this.data?.[propName];
+                    return value !== undefined && value !== null ? String(value) : match;
+                });
+            }
+            else if (this.loadIDField) {
+                // Fallback: Use loadIDField for backward compatibility
+                const idValue = this.data[this.loadIDField];
+                if (!idValue)
+                    return;
+                url = url.replace('/x', '/' + idValue);
             }
-            let url = this.loadAction.url.replace('{x}', idValue);
             this.dataService.CallApi({ ...this.loadAction, url }).subscribe((apiResponse) => {
                 if (apiResponse.success && apiResponse.data) {
                     this.notes = apiResponse.data;
@@ -9882,7 +10256,7 @@ class TabsLiteComponent {
     }
     ngOnInit() {
         // Initialize tabs with counts and reload subjects using service
-        const initialized = this.tabService.initializeTabs(this.tableConfigs);
+        const initialized = this.tabService.initializeTabs(this.tableConfigs, this.parentDetails); // Changed: Pass parentDetails for URL placeholder replacement
         this.tabCounts = initialized.tabCounts;
         this.tableReloads = initialized.tableReloads;
     }
@@ -9909,7 +10283,7 @@ class TabsLiteComponent {
     }
     // Refresh count for specific tab
     refreshTabCount(index) {
-        this.tabService.refreshTabCount(index, this.tableConfigs, this.tabCounts);
+        this.tabService.refreshTabCount(index, this.tableConfigs, this.tabCounts, this.parentDetails); // Changed: Pass parentDetails for URL placeholder replacement
     }
     // Handle action success from table
     onTableActionSuccess(tabIndex, event) {
@@ -11113,7 +11487,7 @@ class TabsInternalComponent {
     }
     ngOnInit() {
         // Initialize tabs with counts and reload subjects using service
-        const initialized = this.tabService.initializeTabs(this.tableConfigs);
+        const initialized = this.tabService.initializeTabs(this.tableConfigs, this.parentDetails); // Changed: Pass parentDetails for URL placeholder replacement
         this.tabCounts = initialized.tabCounts;
         this.tableReloads = initialized.tableReloads;
     }
@@ -11140,7 +11514,7 @@ class TabsInternalComponent {
     }
     // Refresh count for specific tab
     refreshTabCount(index) {
-        this.tabService.refreshTabCount(index, this.tableConfigs, this.tabCounts);
+        this.tabService.refreshTabCount(index, this.tableConfigs, this.tabCounts, this.parentDetails); // Changed: Pass parentDetails for URL placeholder replacement
     }
     // Handle action success from table
     onTableActionSuccess(tabIndex, event) {
@@ -13536,7 +13910,7 @@ class TabsComponent {
     }
     ngOnInit() {
         // Initialize tabs with counts and reload subjects using service
-        const initialized = this.tabService.initializeTabs(this.tableConfigs);
+        const initialized = this.tabService.initializeTabs(this.tableConfigs, this.parentDetails); // Changed: Pass parentDetails for URL placeholder replacement
         this.tabCounts = initialized.tabCounts;
         this.tableReloads = initialized.tableReloads;
     }
@@ -13563,7 +13937,7 @@ class TabsComponent {
     }
     // Refresh count for specific tab
     refreshTabCount(index) {
-        this.tabService.refreshTabCount(index, this.tableConfigs, this.tabCounts);
+        this.tabService.refreshTabCount(index, this.tableConfigs, this.tabCounts, this.parentDetails); // Changed: Pass parentDetails for URL placeholder replacement
     }
     // Changed: Handle action success from table (matching tabs-internal)
     onTableActionSuccess(tabIndex, event) {
@@ -14827,11 +15201,11 @@ class RolesComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: RolesComponent, deps: [{ token: HttpService }, { token: i1$2.Router }, { token: AuthService }, { token: DataServiceLib }, { token: DialogService }, { token: i5.MatDialog }, { token: MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: RolesComponent, isStandalone: false, selector: "spa-roles", ngImport: i0, template: "<h4> Roles </h4>\r\n<hr />\r\n\r\n<div class=\"container-fluid mb-5\">\r\n\r\n  <div class=\"d-flex justify-content-between mb-2\">\r\n\r\n    <div >\r\n      <button id=\"btnNewRole\" mat-raised-button color=\"primary\" (click)=\"addRole()\">New Role</button>\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-end\">\r\n      <button id=\"btnRefresh\" mat-icon-button color=\"primary\" (click)=\"refresh()\"  matTooltip=\"refresh data\" matTooltipPosition=\"right\"><mat-icon >refresh</mat-icon></button>\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"row mt-2 mb-1\"  *ngFor=\"let role of roles\">\r\n\r\n    <mat-card class=\"mat-elevation-z8\" style=\"width:100%\">\r\n\r\n      <div class=\"d-flex justify-content-between align-items-center\">\r\n\r\n        <label style=\"font-size: 16px;\">{{role.roleName}}</label>\r\n\r\n        <button mat-icon-button color=\"primary\" matTooltip=\"Rename Role\" (click)=\"renameRole(role)\">\r\n          <mat-icon>edit</mat-icon>\r\n        </button>\r\n      </div>\r\n\r\n      <hr style=\"margin-top: 0px;\">\r\n\r\n      <div class=\"tin-row\" style=\" font-size:12px;\">\r\n\r\n\r\n        <div class=\"tin-row\"  *ngFor=\"let capItem of appConfig.capItems\">\r\n\r\n          <!-- Main item-->\r\n          <mat-checkbox  *ngIf=\"capItem.isBool || capItem.capSubItems\"\r\n            color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capItem.name]\" (ngModelChange)=\"onCapItemChange(capItem, $event, role)\">\r\n            {{capItem.display}}\r\n            <span *ngIf=\"!role[capItem.name] && hasSubItemsAccess(capItem, role)\" class=\"asterisk\" style=\"color: red;\">*</span>\r\n          </mat-checkbox>\r\n\r\n          <spa-select\r\n           *ngIf=\"!capItem.isBool && !capItem.capSubItems\"\r\n            [options]=\"roleAccessOptions\"\r\n            optionDisplay=\"name\"\r\n            optionValue=\"value\"\r\n            [display]=\"capItem.display\"\r\n            [(value)]=\"role[capItem.name]\"\r\n            width=\"150px\" \r\n            style=\"font-size: 12px;\">\r\n          </spa-select>\r\n\r\n\r\n          <ng-container *ngIf=\"capItem.capSubItems && role[capItem.name]\">\r\n\r\n            <div class=\"tin-row\" *ngFor=\"let capSubItem of capItem.capSubItems\">\r\n\r\n\r\n              <!-- Sub Item -->\r\n              <mat-checkbox *ngIf=\"capSubItem.isBool\"\r\n                color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capSubItem.name]\">\r\n                {{capSubItem.display}}\r\n              </mat-checkbox>\r\n\r\n              <spa-select\r\n                *ngIf=\"!capSubItem.isBool\"\r\n                [options]=\"roleAccessOptions\"\r\n                optionDisplay=\"name\"\r\n                optionValue=\"value\"\r\n                [display]=\"capSubItem.display\"\r\n                [(value)]=\"role[capSubItem.name]\"\r\n                width=\"150px\"\r\n                style=\"font-size: 12px;\">\r\n              </spa-select>\r\n\r\n              <ng-container *ngIf=\"capSubItem.capSubItems\">\r\n\r\n                <div class=\"tin-row\" *ngFor=\"let capSubSubItem of capSubItem.capSubItems\">\r\n\r\n                  <!-- Sub Sub Items -->\r\n                  <mat-checkbox *ngIf=\"capSubSubItem.isBool\"\r\n                    color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capSubSubItem.name]\">\r\n                    {{capSubSubItem.display}}\r\n                  </mat-checkbox>\r\n\r\n                  <spa-select\r\n                    *ngIf=\"!capSubSubItem.isBool\"\r\n                    [options]=\"roleAccessOptions\"\r\n                    optionDisplay=\"name\"\r\n                    optionValue=\"value\"\r\n                    [display]=\"capSubSubItem.display\"\r\n                    [(value)]=\"role[capSubSubItem.name]\"\r\n                    width=\"150px\" \r\n                    style=\"font-size: 12px;\">\r\n                  </spa-select>\r\n\r\n                </div>\r\n\r\n              </ng-container>\r\n\r\n\r\n\r\n            </div>\r\n\r\n          </ng-container>\r\n\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n      <mat-card-actions>\r\n\r\n        <button  mat-raised-button color=\"primary\" (click)=\"updateRole(role)\" style=\"margin-right:10px;\">\r\n           <mat-icon>done_all</mat-icon>\r\n           Update\r\n        </button>\r\n\r\n        <button mat-raised-button  (click)=\"deleteRole(role)\" style=\"margin-right:10px\">\r\n          <mat-icon>delete</mat-icon>\r\n          Delete\r\n        </button>\r\n\r\n      </mat-card-actions>\r\n\r\n    </mat-card>\r\n\r\n  </div>\r\n\r\n\r\n</div>\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i6$2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["detailsConfig"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: RolesComponent, isStandalone: false, selector: "spa-roles", ngImport: i0, template: "<h4> Roles </h4>\r\n<hr />\r\n\r\n<div class=\"container-fluid mb-5\">\r\n\r\n  <div class=\"d-flex justify-content-between mb-2\">\r\n\r\n    <div >\r\n      <button id=\"btnNewRole\" mat-raised-button color=\"primary\" (click)=\"addRole()\">New Role</button>\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-end\">\r\n      <button id=\"btnRefresh\" mat-icon-button color=\"primary\" (click)=\"refresh()\"  matTooltip=\"refresh data\" matTooltipPosition=\"right\"><mat-icon >refresh</mat-icon></button>\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"row mt-2 mb-1\"  *ngFor=\"let role of roles\">\r\n\r\n    <mat-card class=\"mat-elevation-z8\" style=\"width:100%\">\r\n\r\n      <div class=\"d-flex justify-content-between align-items-center\">\r\n\r\n        <label style=\"font-size: 16px;\">{{role.roleName}}</label>\r\n\r\n        <button mat-icon-button color=\"primary\" matTooltip=\"Rename Role\" (click)=\"renameRole(role)\">\r\n          <mat-icon>edit</mat-icon>\r\n        </button>\r\n      </div>\r\n\r\n      <hr style=\"margin-top: 0px;\">\r\n\r\n      <div class=\"tin-row\" style=\" font-size:12px;\">\r\n\r\n\r\n        <div class=\"tin-row\"  *ngFor=\"let capItem of appConfig.capItems\">\r\n\r\n          <!-- Main item-->\r\n          <mat-checkbox  *ngIf=\"capItem.isBool || capItem.capSubItems\"\r\n            color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capItem.name]\" (ngModelChange)=\"onCapItemChange(capItem, $event, role)\">\r\n            {{capItem.display}}\r\n            <span *ngIf=\"!role[capItem.name] && hasSubItemsAccess(capItem, role)\" class=\"asterisk\" style=\"color: red;\">*</span>\r\n          </mat-checkbox>\r\n\r\n          <spa-select\r\n           *ngIf=\"!capItem.isBool && !capItem.capSubItems\"\r\n            [options]=\"roleAccessOptions\"\r\n            optionDisplay=\"name\"\r\n            optionValue=\"value\"\r\n            [display]=\"capItem.display\"\r\n            [(value)]=\"role[capItem.name]\"\r\n            width=\"150px\" \r\n            style=\"font-size: 12px;\">\r\n          </spa-select>\r\n\r\n\r\n          <ng-container *ngIf=\"capItem.capSubItems && role[capItem.name]\">\r\n\r\n            <div class=\"tin-row\" *ngFor=\"let capSubItem of capItem.capSubItems\">\r\n\r\n\r\n              <!-- Sub Item -->\r\n              <mat-checkbox *ngIf=\"capSubItem.isBool\"\r\n                color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capSubItem.name]\">\r\n                {{capSubItem.display}}\r\n              </mat-checkbox>\r\n\r\n              <spa-select\r\n                *ngIf=\"!capSubItem.isBool\"\r\n                [options]=\"roleAccessOptions\"\r\n                optionDisplay=\"name\"\r\n                optionValue=\"value\"\r\n                [display]=\"capSubItem.display\"\r\n                [(value)]=\"role[capSubItem.name]\"\r\n                width=\"150px\"\r\n                style=\"font-size: 12px;\">\r\n              </spa-select>\r\n\r\n              <ng-container *ngIf=\"capSubItem.capSubItems\">\r\n\r\n                <div class=\"tin-row\" *ngFor=\"let capSubSubItem of capSubItem.capSubItems\">\r\n\r\n                  <!-- Sub Sub Items -->\r\n                  <mat-checkbox *ngIf=\"capSubSubItem.isBool\"\r\n                    color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capSubSubItem.name]\">\r\n                    {{capSubSubItem.display}}\r\n                  </mat-checkbox>\r\n\r\n                  <spa-select\r\n                    *ngIf=\"!capSubSubItem.isBool\"\r\n                    [options]=\"roleAccessOptions\"\r\n                    optionDisplay=\"name\"\r\n                    optionValue=\"value\"\r\n                    [display]=\"capSubSubItem.display\"\r\n                    [(value)]=\"role[capSubSubItem.name]\"\r\n                    width=\"150px\" \r\n                    style=\"font-size: 12px;\">\r\n                  </spa-select>\r\n\r\n                </div>\r\n\r\n              </ng-container>\r\n\r\n\r\n\r\n            </div>\r\n\r\n          </ng-container>\r\n\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n      <mat-card-actions>\r\n\r\n        <button  mat-raised-button color=\"primary\" (click)=\"updateRole(role)\" style=\"margin-right:10px;\">\r\n           <mat-icon>done_all</mat-icon>\r\n           Update\r\n        </button>\r\n\r\n        <button mat-raised-button  (click)=\"deleteRole(role)\" style=\"margin-right:10px\">\r\n          <mat-icon>delete</mat-icon>\r\n          Delete\r\n        </button>\r\n\r\n      </mat-card-actions>\r\n\r\n    </mat-card>\r\n\r\n  </div>\r\n\r\n  <hr style=\"margin-top: 50px;\" />\r\n\r\n\r\n</div>\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i6$2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["detailsConfig"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: RolesComponent, decorators: [{
             type: Component,
-            args: [{ selector: "spa-roles", standalone: false, template: "<h4> Roles </h4>\r\n<hr />\r\n\r\n<div class=\"container-fluid mb-5\">\r\n\r\n  <div class=\"d-flex justify-content-between mb-2\">\r\n\r\n    <div >\r\n      <button id=\"btnNewRole\" mat-raised-button color=\"primary\" (click)=\"addRole()\">New Role</button>\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-end\">\r\n      <button id=\"btnRefresh\" mat-icon-button color=\"primary\" (click)=\"refresh()\"  matTooltip=\"refresh data\" matTooltipPosition=\"right\"><mat-icon >refresh</mat-icon></button>\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"row mt-2 mb-1\"  *ngFor=\"let role of roles\">\r\n\r\n    <mat-card class=\"mat-elevation-z8\" style=\"width:100%\">\r\n\r\n      <div class=\"d-flex justify-content-between align-items-center\">\r\n\r\n        <label style=\"font-size: 16px;\">{{role.roleName}}</label>\r\n\r\n        <button mat-icon-button color=\"primary\" matTooltip=\"Rename Role\" (click)=\"renameRole(role)\">\r\n          <mat-icon>edit</mat-icon>\r\n        </button>\r\n      </div>\r\n\r\n      <hr style=\"margin-top: 0px;\">\r\n\r\n      <div class=\"tin-row\" style=\" font-size:12px;\">\r\n\r\n\r\n        <div class=\"tin-row\"  *ngFor=\"let capItem of appConfig.capItems\">\r\n\r\n          <!-- Main item-->\r\n          <mat-checkbox  *ngIf=\"capItem.isBool || capItem.capSubItems\"\r\n            color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capItem.name]\" (ngModelChange)=\"onCapItemChange(capItem, $event, role)\">\r\n            {{capItem.display}}\r\n            <span *ngIf=\"!role[capItem.name] && hasSubItemsAccess(capItem, role)\" class=\"asterisk\" style=\"color: red;\">*</span>\r\n          </mat-checkbox>\r\n\r\n          <spa-select\r\n           *ngIf=\"!capItem.isBool && !capItem.capSubItems\"\r\n            [options]=\"roleAccessOptions\"\r\n            optionDisplay=\"name\"\r\n            optionValue=\"value\"\r\n            [display]=\"capItem.display\"\r\n            [(value)]=\"role[capItem.name]\"\r\n            width=\"150px\" \r\n            style=\"font-size: 12px;\">\r\n          </spa-select>\r\n\r\n\r\n          <ng-container *ngIf=\"capItem.capSubItems && role[capItem.name]\">\r\n\r\n            <div class=\"tin-row\" *ngFor=\"let capSubItem of capItem.capSubItems\">\r\n\r\n\r\n              <!-- Sub Item -->\r\n              <mat-checkbox *ngIf=\"capSubItem.isBool\"\r\n                color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capSubItem.name]\">\r\n                {{capSubItem.display}}\r\n              </mat-checkbox>\r\n\r\n              <spa-select\r\n                *ngIf=\"!capSubItem.isBool\"\r\n                [options]=\"roleAccessOptions\"\r\n                optionDisplay=\"name\"\r\n                optionValue=\"value\"\r\n                [display]=\"capSubItem.display\"\r\n                [(value)]=\"role[capSubItem.name]\"\r\n                width=\"150px\"\r\n                style=\"font-size: 12px;\">\r\n              </spa-select>\r\n\r\n              <ng-container *ngIf=\"capSubItem.capSubItems\">\r\n\r\n                <div class=\"tin-row\" *ngFor=\"let capSubSubItem of capSubItem.capSubItems\">\r\n\r\n                  <!-- Sub Sub Items -->\r\n                  <mat-checkbox *ngIf=\"capSubSubItem.isBool\"\r\n                    color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capSubSubItem.name]\">\r\n                    {{capSubSubItem.display}}\r\n                  </mat-checkbox>\r\n\r\n                  <spa-select\r\n                    *ngIf=\"!capSubSubItem.isBool\"\r\n                    [options]=\"roleAccessOptions\"\r\n                    optionDisplay=\"name\"\r\n                    optionValue=\"value\"\r\n                    [display]=\"capSubSubItem.display\"\r\n                    [(value)]=\"role[capSubSubItem.name]\"\r\n                    width=\"150px\" \r\n                    style=\"font-size: 12px;\">\r\n                  </spa-select>\r\n\r\n                </div>\r\n\r\n              </ng-container>\r\n\r\n\r\n\r\n            </div>\r\n\r\n          </ng-container>\r\n\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n      <mat-card-actions>\r\n\r\n        <button  mat-raised-button color=\"primary\" (click)=\"updateRole(role)\" style=\"margin-right:10px;\">\r\n           <mat-icon>done_all</mat-icon>\r\n           Update\r\n        </button>\r\n\r\n        <button mat-raised-button  (click)=\"deleteRole(role)\" style=\"margin-right:10px\">\r\n          <mat-icon>delete</mat-icon>\r\n          Delete\r\n        </button>\r\n\r\n      </mat-card-actions>\r\n\r\n    </mat-card>\r\n\r\n  </div>\r\n\r\n\r\n</div>\r\n\r\n" }]
+            args: [{ selector: "spa-roles", standalone: false, template: "<h4> Roles </h4>\r\n<hr />\r\n\r\n<div class=\"container-fluid mb-5\">\r\n\r\n  <div class=\"d-flex justify-content-between mb-2\">\r\n\r\n    <div >\r\n      <button id=\"btnNewRole\" mat-raised-button color=\"primary\" (click)=\"addRole()\">New Role</button>\r\n    </div>\r\n\r\n    <div class=\"d-flex justify-content-end\">\r\n      <button id=\"btnRefresh\" mat-icon-button color=\"primary\" (click)=\"refresh()\"  matTooltip=\"refresh data\" matTooltipPosition=\"right\"><mat-icon >refresh</mat-icon></button>\r\n    </div>\r\n\r\n  </div>\r\n\r\n\r\n  <div class=\"row mt-2 mb-1\"  *ngFor=\"let role of roles\">\r\n\r\n    <mat-card class=\"mat-elevation-z8\" style=\"width:100%\">\r\n\r\n      <div class=\"d-flex justify-content-between align-items-center\">\r\n\r\n        <label style=\"font-size: 16px;\">{{role.roleName}}</label>\r\n\r\n        <button mat-icon-button color=\"primary\" matTooltip=\"Rename Role\" (click)=\"renameRole(role)\">\r\n          <mat-icon>edit</mat-icon>\r\n        </button>\r\n      </div>\r\n\r\n      <hr style=\"margin-top: 0px;\">\r\n\r\n      <div class=\"tin-row\" style=\" font-size:12px;\">\r\n\r\n\r\n        <div class=\"tin-row\"  *ngFor=\"let capItem of appConfig.capItems\">\r\n\r\n          <!-- Main item-->\r\n          <mat-checkbox  *ngIf=\"capItem.isBool || capItem.capSubItems\"\r\n            color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capItem.name]\" (ngModelChange)=\"onCapItemChange(capItem, $event, role)\">\r\n            {{capItem.display}}\r\n            <span *ngIf=\"!role[capItem.name] && hasSubItemsAccess(capItem, role)\" class=\"asterisk\" style=\"color: red;\">*</span>\r\n          </mat-checkbox>\r\n\r\n          <spa-select\r\n           *ngIf=\"!capItem.isBool && !capItem.capSubItems\"\r\n            [options]=\"roleAccessOptions\"\r\n            optionDisplay=\"name\"\r\n            optionValue=\"value\"\r\n            [display]=\"capItem.display\"\r\n            [(value)]=\"role[capItem.name]\"\r\n            width=\"150px\" \r\n            style=\"font-size: 12px;\">\r\n          </spa-select>\r\n\r\n\r\n          <ng-container *ngIf=\"capItem.capSubItems && role[capItem.name]\">\r\n\r\n            <div class=\"tin-row\" *ngFor=\"let capSubItem of capItem.capSubItems\">\r\n\r\n\r\n              <!-- Sub Item -->\r\n              <mat-checkbox *ngIf=\"capSubItem.isBool\"\r\n                color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capSubItem.name]\">\r\n                {{capSubItem.display}}\r\n              </mat-checkbox>\r\n\r\n              <spa-select\r\n                *ngIf=\"!capSubItem.isBool\"\r\n                [options]=\"roleAccessOptions\"\r\n                optionDisplay=\"name\"\r\n                optionValue=\"value\"\r\n                [display]=\"capSubItem.display\"\r\n                [(value)]=\"role[capSubItem.name]\"\r\n                width=\"150px\"\r\n                style=\"font-size: 12px;\">\r\n              </spa-select>\r\n\r\n              <ng-container *ngIf=\"capSubItem.capSubItems\">\r\n\r\n                <div class=\"tin-row\" *ngFor=\"let capSubSubItem of capSubItem.capSubItems\">\r\n\r\n                  <!-- Sub Sub Items -->\r\n                  <mat-checkbox *ngIf=\"capSubSubItem.isBool\"\r\n                    color=\"primary\" style=\"min-width: 100px;\" [(ngModel)]=\"role[capSubSubItem.name]\">\r\n                    {{capSubSubItem.display}}\r\n                  </mat-checkbox>\r\n\r\n                  <spa-select\r\n                    *ngIf=\"!capSubSubItem.isBool\"\r\n                    [options]=\"roleAccessOptions\"\r\n                    optionDisplay=\"name\"\r\n                    optionValue=\"value\"\r\n                    [display]=\"capSubSubItem.display\"\r\n                    [(value)]=\"role[capSubSubItem.name]\"\r\n                    width=\"150px\" \r\n                    style=\"font-size: 12px;\">\r\n                  </spa-select>\r\n\r\n                </div>\r\n\r\n              </ng-container>\r\n\r\n\r\n\r\n            </div>\r\n\r\n          </ng-container>\r\n\r\n        </div>\r\n\r\n      </div>\r\n\r\n\r\n      <mat-card-actions>\r\n\r\n        <button  mat-raised-button color=\"primary\" (click)=\"updateRole(role)\" style=\"margin-right:10px;\">\r\n           <mat-icon>done_all</mat-icon>\r\n           Update\r\n        </button>\r\n\r\n        <button mat-raised-button  (click)=\"deleteRole(role)\" style=\"margin-right:10px\">\r\n          <mat-icon>delete</mat-icon>\r\n          Delete\r\n        </button>\r\n\r\n      </mat-card-actions>\r\n\r\n    </mat-card>\r\n\r\n  </div>\r\n\r\n  <hr style=\"margin-top: 50px;\" />\r\n\r\n\r\n</div>\r\n\r\n" }]
         }], ctorParameters: () => [{ type: HttpService }, { type: i1$2.Router }, { type: AuthService }, { type: DataServiceLib }, { type: DialogService }, { type: i5.MatDialog }, { type: MessageService }] });
 
 class CreateAccountComponent {
@@ -16039,6 +16413,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 }]
         }] });
 
+// ServiceItems component for managing service items
+class ServiceItemsComponent {
+    constructor() {
+        this.inventoryService = inject(InventoryService);
+        this.pageConfig = {
+            title: 'Services',
+            tableConfig: this.inventoryService.serviceItemsTableConfig
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ServiceItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: ServiceItemsComponent, isStandalone: false, selector: "spa-service-items", ngImport: i0, template: '<spa-page [config]="pageConfig"></spa-page>', isInline: true, dependencies: [{ kind: "component", type: PageComponent, selector: "spa-page", inputs: ["config"], outputs: ["searchModeActivated", "searchModeDeactivated", "refreshClick", "actionClick", "actionResponse", "inputChange", "createClick", "searchClick", "dataLoad", "titleActionChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ServiceItemsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'spa-service-items',
+                    standalone: false,
+                    template: '<spa-page [config]="pageConfig"></spa-page>'
+                }]
+        }] });
+
 class GptCachesComponent {
     constructor() {
         this.dataService = inject(DataServiceLib);
@@ -16099,6 +16494,7 @@ const routes$1 = [
     { path: "loans", component: LoansComponent },
     { path: "loans-payments", component: LoanPaymentsComponent },
     { path: "inventory-products", component: ProductsComponent },
+    { path: "inventory-service-items", component: ServiceItemsComponent }, // Added: Service items route
     { path: "inventory-items", component: InventoryItemsComponent },
     { path: "purchase-orders", component: PurchaseOrdersComponent },
     { path: "inventory-receipts", component: InventoryReceiptsComponent },
@@ -16155,7 +16551,8 @@ class AdminModule {
             InventoryStockComponent,
             ProductionRecipesComponent,
             ProductionOrdersComponent,
-            BundleProductsComponent // Added: Bundle products component
+            BundleProductsComponent, // Added: Bundle products component
+            ServiceItemsComponent // Added: Service items component
         ], imports: [CommonModule,
             AdminRoutingModule,
             SpaAdminModule] }); }
@@ -16191,7 +16588,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                         InventoryStockComponent,
                         ProductionRecipesComponent,
                         ProductionOrdersComponent,
-                        BundleProductsComponent // Added: Bundle products component
+                        BundleProductsComponent, // Added: Bundle products component
+                        ServiceItemsComponent // Added: Service items component
                     ],
                     imports: [
                         CommonModule,
@@ -16248,5 +16646,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { Account, AccountsComponent as AccountingAccountsComponent, AggregatesComponent as AccountingAggregatesComponent, AgingComponent as AccountingAgingComponent, InvoicesComponent as AccountingInvoicesComponent, OutstandingInvoicesComponent as AccountingOutstandingInvoicesComponent, AccountingService, TransactionTypesComponent as AccountingTransactionTypesComponent, TransactionsComponent as AccountingTransactionsComponent, Action, ActivityComponent, AdminModule, AlertComponent, AlertConfig, AlertMessage, ApiResponse, AppConfig, AppModelsComponent, AttachComponent, AuthService, BrandsComponent, CacheConfig, CapItem, CapsulesComponent, CategoriesComponent, ChangePasswordComponent, ChangeUserPassword, CheckComponent, ChipsComponent, Constants, Core, CreateAccountComponent, CustomersComponent, DataServiceLib, DateComponent, DatetimeComponent, DepartmentsComponent, DetailsDialog, DetailsDialogConfig, DetailsDialogProcessor, DetailsSource, DialogService, EmailComponent, EmployeesComponent, ExportService, FilterComponent, FormComponent, FormConfig, GeneralService, GradesComponent, GroupsComponent, HtmlComponent, HttpService, IndexModule, InventoryReceiptStatus, InventoryService, InvoiceStatus, LabelComponent, ListDialogComponent, ListDialogConfig, LoaderComponent, LoaderService, LoanPaymentsComponent, LoanProductsComponent, LoansComponent, LoansService, LogLevel, LogService, LoginComponent, LogsComponent, MembershipComponent, MessageService, MoneyComponent, MovementType, NavMenuComponent, NotesComponent, NotesConfig, NumberComponent, OnboardingComponent, OptionComponent, PageComponent, PageConfig, PlansComponent, PositionsComponent, Profile, ProfileComponent, RecoverAccountComponent, Register, Role, RoleAccess, RolesComponent, SearchComponent, SearchConfig, SecurityConfig, SelectBitwiseComponent, SelectComponent, SelectMultiComponent, SettingsComponent, SignupComponent, SpaAdminModule, SpaIndexModule, SpaMatModule, SpaUserModule, StatusesComponent, Step, StepConfig, StepsComponent, StorageService, SubCategoriesComponent, SuppliersComponent, TabService, TableComponent, TableConfig, TabsComponent, TabsInternalComponent, TabsLiteComponent, TasksComponent, TenantsComponent, TextAreaComponent, TextComponent, TextMaskComponent, TextMultiComponent, TextSingleComponent, TileConfig, TilesComponent, TinSpaComponent, TinSpaModule, TinSpaService, TitleActionsComponent, UnitOfMeasure, User, UserModule, UsersComponent, ViewerComponent, WelcomeComponent, authGuard, dialogOptions, loginConfig, messageDialog, viewerDialog };
+export { Account, AccountsComponent as AccountingAccountsComponent, AggregatesComponent as AccountingAggregatesComponent, AgingComponent as AccountingAgingComponent, InvoicesComponent as AccountingInvoicesComponent, OutstandingInvoicesComponent as AccountingOutstandingInvoicesComponent, AccountingService, TransactionTypesComponent as AccountingTransactionTypesComponent, TransactionsComponent as AccountingTransactionsComponent, Action, ActivityComponent, AdminModule, AlertComponent, AlertConfig, AlertMessage, ApiResponse, AppConfig, AppModelsComponent, AttachComponent, AuthService, BrandsComponent, CacheConfig, CapItem, CapsulesComponent, CategoriesComponent, ChangePasswordComponent, ChangeUserPassword, CheckComponent, ChipsComponent, Constants, Core, CreateAccountComponent, CustomersComponent, DataServiceLib, DateComponent, DatetimeComponent, DepartmentsComponent, DetailsDialog, DetailsDialogConfig, DetailsDialogProcessor, DetailsSource, DialogService, EmailComponent, EmployeesComponent, ExportService, FilterComponent, FormComponent, FormConfig, GeneralService, GradesComponent, GroupsComponent, HtmlComponent, HttpService, IndexModule, InventoryReceiptStatus, InventoryService, InvoiceItemType, InvoiceStatus, LabelComponent, ListDialogComponent, ListDialogConfig, LoaderComponent, LoaderService, LoanPaymentsComponent, LoanProductsComponent, LoansComponent, LoansService, LogLevel, LogService, LoginComponent, LogsComponent, MembershipComponent, MessageService, MoneyComponent, MovementType, NavMenuComponent, NotesComponent, NotesConfig, NumberComponent, OnboardingComponent, OptionComponent, PageComponent, PageConfig, PlansComponent, PositionsComponent, Profile, ProfileComponent, RecoverAccountComponent, Register, Role, RoleAccess, RolesComponent, SearchComponent, SearchConfig, SecurityConfig, SelectBitwiseComponent, SelectComponent, SelectMultiComponent, SettingsComponent, SignupComponent, SpaAdminModule, SpaIndexModule, SpaMatModule, SpaUserModule, StatusesComponent, Step, StepConfig, StepsComponent, StorageService, SubCategoriesComponent, SuppliersComponent, TabService, TableComponent, TableConfig, TabsComponent, TabsInternalComponent, TabsLiteComponent, TasksComponent, TenantsComponent, TextAreaComponent, TextComponent, TextMaskComponent, TextMultiComponent, TextSingleComponent, TileConfig, TilesComponent, TinSpaComponent, TinSpaModule, TinSpaService, TitleActionsComponent, TransactionTiming, UnitOfMeasure, User, UserModule, UsersComponent, ViewerComponent, WelcomeComponent, authGuard, dialogOptions, loginConfig, messageDialog, viewerDialog };
 //# sourceMappingURL=tin-spa.mjs.map