@sachin9822/reports-lib 0.0.214 → 0.0.215

package/fesm2020/sachin9822-reports-lib.mjs

@@ -276,9 +276,9 @@ class ReportService {
         const apiPath = `${this.reportServiceUrl}/api/v1/Report/TrialBalanceAccountsReport/GetTrialBalanceAccountsReport`;
         return this.http.post(apiPath, object).pipe(map(response => response || undefined));
     }
-    // Api 2 - Get Business Unit
-    GetBusinessUnitForTrialBalanceAccountsReport() {
-        const apiPath = `${this.reportServiceUrl}/api/v1/Report/TrialBalanceAccountsReport/GetBusinessUnit`;
+    // Api 2 - Get Business Line
+    GetBusinessLineForTrialBalanceAccountsReport() {
+        const apiPath = `${this.reportServiceUrl}/api/v1/Report/TrialBalanceAccountsReport/GetBusinessLine`;
         return this.http.get(apiPath).pipe(map(response => {
             return response;
         }));
@@ -1415,7 +1415,7 @@ class SearchFilterComponent {
         this.isSelectAllChecked = true;
         this.erroMessage = 'Error in Loading Data';
         // for Trial Balance - Accounts Report
-        this.businessUnits = [];
+        this.businessLines = [];
         this.accountStatuses = [];
         this.currency = [];
         this.financialYears = [];
@@ -1438,7 +1438,7 @@ class SearchFilterComponent {
             'Accounting': ['client', 'fromDate', 'toDate', 'branch', 'transactionProduct', 'sendCurrency', 'transactionStatus', 'sendCountry', 'receiveCountry'],
             'Credit Limit Status Enquiry': ['client', 'fromDate', 'toDate', 'transactionStatusSingleSelect'],
             'Funding': ['fromDate', 'toDate'],
-            'Trial Balance - Accounts': ['businessUnit', 'accountStatus', 'currency', 'financialYear', 'fromMonth', 'toMonth', 'dateTypeForTrialBalanceAccounts', 'fromDay', 'toDay'],
+            'Trial Balance - Accounts': ['businessLine', 'accountStatus', 'currency', 'financialYear', 'fromMonth', 'toMonth', 'dateTypeForTrialBalanceAccounts', 'fromDay', 'toDay'],
             'Branch Activity Send Summary': ['client', 'fromDate', 'toDate', 'branch', 'transactionProduct', 'receiveCurrency', 'transactionStatus', 'sendCountry', 'receiveCountry', 'summaryReport'],
             'Transaction Monitoring': ['client', 'fromDate', 'toDate', 'branch', 'transactionProduct', 'receiveCurrency', 'transactionStatus', 'sendCountry', 'receiveCountry'],
             // Add more report types here
@@ -1469,7 +1469,7 @@ class SearchFilterComponent {
             receiveCountry: 'Receive Country:',
             sendBusinessPartner: 'Sender Partner:',
             recvBusinessPartner: 'Receiver Partner:',
-            businessUnit: 'Business Unit:',
+            businessLine: 'Business Line:',
             financialYear: 'Financial Year:',
             fromMonth: 'From Month:',
             toMonth: 'To Month:',
@@ -1498,7 +1498,7 @@ class SearchFilterComponent {
             receiveCurrency: 'currency',
             sendBusinessPartner: 'name',
             recvBusinessPartner: 'name',
-            businessUnit: 'businessUnit',
+            businessLine: 'businessLine',
             financialYear: 'financialYear',
             fromMonth: 'period',
             toMonth: 'pMonthName',
@@ -1519,7 +1519,7 @@ class SearchFilterComponent {
             receiveCurrency: 'currencyCode',
             sendBusinessPartner: 'id',
             recvBusinessPartner: 'id',
-            businessUnit: 'businessUnit',
+            businessLine: 'businessLine',
             financialYear: 'financialYear',
             fromMonth: 'pOrder',
             toMonth: 'pMonth',
@@ -1888,7 +1888,7 @@ class SearchFilterComponent {
         if (this.ReportName == "Trial Balance - Accounts") {
             this.searchForm = this.fb.group({
                 // Added fields
-                businessUnit: ['All'],
+                businessLine: ['All'],
                 accountStatus: [['Active']],
                 financialYear: [new Date().getFullYear().toString()],
                 fromMonth: [''],
@@ -2182,7 +2182,7 @@ class SearchFilterComponent {
     loadInitialDataForTrialBalanceAccounts() {
         this.loadingState = ComponentLoadingState.Loading;
         forkJoin({
-            businessUnits: this.reportService.GetBusinessUnitForTrialBalanceAccountsReport()
+            businessLines: this.reportService.GetBusinessLineForTrialBalanceAccountsReport()
                 .pipe(catchError(err => of([]))),
             accountStatuses: this.reportService.GetAccountStatusForTrialBalanceAccountsReport()
                 .pipe(catchError(err => of([]))),
@@ -2199,7 +2199,7 @@ class SearchFilterComponent {
         })
             .pipe(switchMap(results => {
             // assign base results
-            this.businessUnits = results.businessUnits;
+            this.businessLines = results.businessLines.filter(b => b.businessLine?.trim() !== '');
             this.accountStatuses = results.accountStatuses;
             this.dateTypes = results.dateTypes;
             this.financialYears = results.financialYears
@@ -2244,7 +2244,7 @@ class SearchFilterComponent {
                 this.toMonths = allResults.toMonths;
                 // patch form defaults
                 this.searchForm.patchValue({
-                    businessUnit: this.businessUnits[0]?.companyCode ?? null,
+                    businessLine: this.businessLines[0]?.businessLine ?? null,
                     accountStatus: this.accountStatuses.length ? [this.accountStatuses[0].statusCode] : [],
                     financialYear: this.paramDateDefault[0]?.financialYear ?? new Date().getFullYear().toString(),
                     fromMonth: this.paramDateDefault[0]?.financialMonth,
@@ -2268,9 +2268,16 @@ class SearchFilterComponent {
         this.searchForm.get('fromDate')?.valueChanges.subscribe(fromDateStr => {
             const toDateControl = this.searchForm.get('toDate');
             const toDateStr = toDateControl?.value;
-            if (!fromDateStr || !toDateStr)
+            if (!fromDateStr)
                 return;
             const fromDate = new Date(fromDateStr);
+            // If ToDate is empty → set default
+            if (!toDateControl?.value) {
+                const maxToDate = new Date(fromDate);
+                maxToDate.setDate(fromDate.getDate() + 30);
+                toDateControl.patchValue(maxToDate.toISOString().split("T")[0]);
+                return;
+            }
             const toDate = new Date(toDateStr);
             const maxToDate = new Date(fromDate);
             maxToDate?.setDate(fromDate.getDate() + 30);
@@ -2286,9 +2293,16 @@ class SearchFilterComponent {
         this.searchForm.get('toDate')?.valueChanges.subscribe(toDateStr => {
             const fromDateControl = this.searchForm.get('fromDate');
             const fromDateStr = fromDateControl?.value;
-            if (!toDateStr || !fromDateStr)
+            if (!toDateStr)
                 return;
             const toDate = new Date(toDateStr);
+            // If FromDate is empty → set default
+            if (!fromDateControl?.value) {
+                const minFromDate = new Date(toDate);
+                minFromDate.setDate(toDate.getDate() - 30);
+                fromDateControl.patchValue(minFromDate.toISOString().split("T")[0]);
+                return;
+            }
             const fromDate = new Date(fromDateStr);
             this.disabledDate = this.toNgbDateStruct(fromDate);
             const minFromDate = new Date(toDate);
@@ -2985,7 +2999,7 @@ class SearchFilterComponent {
             const formValue = this.searchForm.value;
             // formValue.fromDate = this.toIsoFormat(formValue.fromDate);
             // formValue.toDate = this.toIsoFormat(formValue.toDate);
-            if (this.initialFilters?.isRealtime && (formValue.fromDate == '' && formValue.toDate == '')) {
+            if (this.initialFilters?.isRealtime && (!formValue.fromDate && !formValue.toDate)) {
                 formValue.fromDate = null;
                 formValue.toDate = null;
             }
@@ -3010,7 +3024,6 @@ class SearchFilterComponent {
             return {
                 modal: formValue,
                 sysUserID: this.currentUser,
-                isRealtime: this.initialFilters?.isRealtime,
                 searchCriteria: searchCriteria
             };
         }
@@ -3335,8 +3348,8 @@ class SearchFilterComponent {
             case 'recvBusinessPartner':
                 list = this.recvBusinessPartnerAgents;
                 break;
-            case 'businessUnit':
-                list = this.businessUnits;
+            case 'businessLine':
+                list = this.businessLines;
                 break;
             case 'financialYear':
                 list = this.financialYears;
@@ -3480,10 +3493,10 @@ class SearchFilterComponent {
     }
 }
 SearchFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SearchFilterComponent, deps: [{ token: ReportService }, { token: i2.FormBuilder }, { token: ConfigService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SearchFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SearchFilterComponent, selector: "lib-search-filter", inputs: { ReportName: "ReportName", initialFilters: "initialFilters" }, outputs: { searchClicked: "searchClicked", formValid: "formValid" }, ngImport: i0, template: "<h6 class=\"Breadcrumb\">\r\n  <a class=\"BreadCrumbLink\" [routerLink]=\"['/reports']\">\r\n    <h1>Reports</h1>\r\n  </a>\r\n  <a href=\"BreadCrumbLink\"></a>\r\n  <span class=\"BreadCrumbArrow\"></span>\r\n  <a class=\"BreadCrumbLink\">\r\n    <h2>{{ ReportName }}</h2>\r\n  </a>\r\n</h6>\r\n\r\n<app-loader *ngIf=\"loadingState === ComponentLoadingState.Loading\"></app-loader>\r\n<section>\r\n  <form [formGroup]=\"searchForm\" (ngSubmit)=\"onSearch()\">\r\n    <div class=\"row\">\r\n      <div class=\"col-custom-10-5\">\r\n        <div class=\"filter-grid\">\r\n\r\n          <!-- Dynamically render filters in order -->\r\n          <ng-container *ngFor=\"let field of visibleFields\">\r\n            <ng-container [ngSwitch]=\"field\">\r\n\r\n              <!-- Client -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'client'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Client<span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"clients1\" bindLabel=\"businessPartnerName\" bindValue=\"businessPartnerCode\"\r\n                      placeholder=\"Select Client\" [clearable]=\"false\" formControlName=\"client\" required\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('client')?.invalid && (searchForm.get('client')?.touched || formValidationError)}\"\r\n                      (change)=\"onClientChange()\" (open)=\"onOpen()\" (close)=\"onClose()\" [searchable]=\"isOpen\">\r\n\r\n                      <ng-template ng-option-tmp let-item=\"item\">\r\n                        <span [title]=\"item.businessPartnerName\">{{ item.businessPartnerName }}</span>\r\n                      </ng-template>\r\n\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Branch -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'branch'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Branch<span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"branches\" bindLabel=\"businessPartnerBranch\" bindValue=\"branchCode\"\r\n                      placeholder=\"Select Branch\" [clearable]=\"false\" formControlName=\"branch\" required\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('branch')?.invalid && (searchForm.get('branch')?.touched || formValidationError)}\"\r\n                      (change)=\"onBranchChange()\" (open)=\"onOpen()\" (close)=\"onClose()\" [searchable]=\"isOpen\">\r\n                      <ng-template ng-option-tmp let-item=\"item\">\r\n                        <span [title]=\"item.businessPartnerBranch\">{{ item.businessPartnerBranch }}</span>\r\n                      </ng-template>\r\n\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- From Date -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'fromDate'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">From Date<span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <div class=\"input-group date-group\">\r\n                      <input class=\"form-control dpicker\" placeholder=\"dd/mm/yyyy\" ngbDatepicker\r\n                        #fromDateInput=\"ngbDatepicker\" formControlName=\"fromDate\" autocomplete=\"off\"\r\n                        [ngClass]=\"{'invalid-date':searchForm.get('fromDate')?.invalid && (searchForm.get('fromDate')?.touched || formValidationError)}\" />\r\n                      <button class=\"input-group-button cal\" (click)=\"fromDateInput.toggle()\" type=\"button\">\r\n                        <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\r\n                      </button>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- To Date -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'toDate'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">To Date<span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <div class=\"input-group date-group\">\r\n                      <input class=\"form-control dpicker\" placeholder=\"dd/mm/yyyy\" ngbDatepicker\r\n                        #toDateInput=\"ngbDatepicker\" formControlName=\"toDate\" [minDate]=\"disabledDate\"\r\n                        autocomplete=\"off\"\r\n                        [ngClass]=\"{'invalid-date':searchForm.get('toDate')?.invalid && (searchForm.get('toDate')?.touched || formValidationError)}\" />\r\n                      <button class=\"input-group-button cal\" (click)=\"toDateInput.toggle()\" type=\"button\">\r\n                        <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\r\n                      </button>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Product -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'product'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Product</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"products\" bindLabel=\"productName\" bindValue=\"productCode\"\r\n                      placeholder=\"Select Product\" [clearable]=\"false\" formControlName=\"product\" (open)=\"onOpen()\"\r\n                      (close)=\"onClose()\" [searchable]=\"isOpen\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- User -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'userId'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">User<span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"users\" bindLabel=\"userName\" bindValue=\"userId\" placeholder=\"Select User\"\r\n                      [clearable]=\"false\" formControlName=\"userId\" required (open)=\"onOpen()\" (close)=\"onClose()\"\r\n                      [searchable]=\"isOpen\"\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('userId')?.invalid && (searchForm.get('userId')?.touched || formValidationError)}\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Currency -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'currency'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Currency</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"currencies\" bindValue=\"currencyCode\" placeholder=\"Select Currency\"\r\n                      [clearable]=\"false\" formControlName=\"currency\" [searchable]=\"true\" [searchFn]=\"currencySearch\"\r\n                      (open)=\"onOpen()\" (close)=\"onClose()\" [searchable]=\"isOpen\">\r\n\r\n                      <!-- Template for dropdown options -->\r\n                      <ng-template ng-option-tmp let-item=\"item\">\r\n                        <div\r\n                          [title]=\"item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency)\">\r\n                          {{ item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency) }}\r\n                        </div>\r\n                      </ng-template>\r\n\r\n                      <!-- Template for selected value -->\r\n                      <ng-template ng-label-tmp let-item=\"item\">\r\n                        <div\r\n                          [title]=\"item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency)\">\r\n                          {{ item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency) }}\r\n                        </div>\r\n                      </ng-template>\r\n\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!--Send Currency -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'sendCurrency'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Send Currency</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"currencies\" bindValue=\"currencyCode\" placeholder=\"Select Currency\"\r\n                      [clearable]=\"false\" formControlName=\"currency\" [searchable]=\"true\" [searchFn]=\"currencySearch\"\r\n                      (open)=\"onOpen()\" (close)=\"onClose()\" [searchable]=\"isOpen\">\r\n\r\n                      <!-- Template for dropdown options -->\r\n                      <ng-template ng-option-tmp let-item=\"item\">\r\n                        <div\r\n                          [title]=\"item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency)\">\r\n                          {{ item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency) }}\r\n                        </div>\r\n                      </ng-template>\r\n\r\n                      <!-- Template for selected value -->\r\n                      <ng-template ng-label-tmp let-item=\"item\">\r\n                        <div\r\n                          [title]=\"item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency)\">\r\n                          {{ item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency) }}\r\n                        </div>\r\n                      </ng-template>\r\n\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Transaction Status (Multi-select) -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'transactionStatus'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Txn. Status<span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select class=\"transaction-status-select\" [items]=\"transactionStatuses\"\r\n                      bindLabel=\"transactionStatus\" bindValue=\"transactionStatus\" [multiple]=\"true\"\r\n                      placeholder=\"Select Transaction Status\" formControlName=\"transactionStatus\"\r\n                      [closeOnSelect]=\"false\" [clearable]=\"false\" [searchable]=\"false\" required\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('transactionStatus')?.invalid && (searchForm.get('transactionStatus')?.touched || formValidationError)}\">\r\n                      <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n                        <input type=\"checkbox\" [checked]=\"item$.selected\" /> {{ item.transactionStatus }}\r\n                      </ng-template>\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Transaction No -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'transactionNo'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Txn. Number</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <input class=\"form-control dpicker\" formControlName=\"transactionNo\"\r\n                      placeholder=\"Enter transaction number\" />\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Value Date -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'valueDate'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-3\">\r\n                    <label class=\"form-label label-data\">Value Date<span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-9\">\r\n                    <div class=\"input-group\">\r\n                      <input class=\"form-control dpicker\" placeholder=\"dd/mm/yyyy\" ngbDatepicker\r\n                        #toDateInput=\"ngbDatepicker\" formControlName=\"toDate\" autocomplete=\"off\"\r\n                        [ngClass]=\"{'invalid-date':searchForm.get('date')?.invalid && (searchForm.get('date')?.touched || formValidationError)}\" />\r\n                      <button class=\"btn btn-outline-secondary\" type=\"button\" (click)=\"toDateInput.toggle()\">\r\n                        <i class=\"fa fa-calendar\"></i>\r\n                      </button>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Send Country -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'sendCountry'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Send Country</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode\"\r\n                      placeholder=\"Select Product\" [clearable]=\"false\" formControlName=\"sendCountry\">\r\n\r\n                      <ng-template ng-option-tmp let-item=\"item\">\r\n                        <span [title]=\"item.country\">{{ item.country }}</span>\r\n                      </ng-template>\r\n\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Receive Country -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'receiveCountry'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Receive Country</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode\"\r\n                      placeholder=\"Select Product\" [clearable]=\"false\" formControlName=\"receiveCountry\">\r\n\r\n                      <ng-template ng-option-tmp let-item=\"item\">\r\n                        <span [title]=\"item.country\">{{ item.country }}</span>\r\n                      </ng-template>\r\n\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!--Transaction Product -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'transactionProduct'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Product</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"transactionProducts\" bindLabel=\"name\" bindValue=\"productCode\"\r\n                      placeholder=\"Select Product\" [clearable]=\"false\" formControlName=\"product\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Date Type -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'dateType'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Date Type</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select placeholder=\"- Please select -\" formControlName=\"dateType\" [clearable]=\"false\" required>\r\n                      <ng-option [value]=\"1\">\r\n                        Value Date\r\n                      </ng-option>\r\n                      <ng-option [value]=\"2\">\r\n                        Posting Date\r\n                      </ng-option>\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Date -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'date'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Date</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <div class=\"input-group date-group\">\r\n                      <input class=\"form-control dpicker\" placeholder=\"dd/mm/yyyy\" ngbDatepicker\r\n                        #dateInput=\"ngbDatepicker\" formControlName=\"date\" autocomplete=\"off\"\r\n                        [ngClass]=\"{'invalid-date': searchForm.get('date')?.invalid && (searchForm.get('date')?.touched || formValidationError)}\" />\r\n                      <button class=\"input-group-button cal\" type=\"button\" (click)=\"dateInput.toggle()\">\r\n                        <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\r\n                      </button>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- receiveCurrency -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'receiveCurrency'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Receive Currency</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"currencies\" bindValue=\"currencyCode\" placeholder=\"Select Receive Currency\"\r\n                      [clearable]=\"false\" formControlName=\"receiveCurrency\" required (change)=\"onBranchChange()\"\r\n                      [searchable]=\"true\" [searchFn]=\"currencySearch\" (open)=\"onOpen()\" (close)=\"onClose()\"\r\n                      [searchable]=\"isOpen\">\r\n\r\n                      <!-- Dropdown options -->\r\n                      <ng-template ng-option-tmp let-item=\"item\">\r\n                        <div\r\n                          [title]=\"item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency)\">\r\n                          {{ item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency) }}\r\n                        </div>\r\n                      </ng-template>\r\n\r\n                      <!-- Selected value -->\r\n                      <ng-template ng-label-tmp let-item=\"item\">\r\n                        <div\r\n                          [title]=\"item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency)\">\r\n                          {{ item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency) }}\r\n                        </div>\r\n                      </ng-template>\r\n\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Send BusinessPartner -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'sendBusinessPartner'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Send Client<span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"sendBusinessPartnerAgents\" bindLabel=\"name\" bindValue=\"id\"\r\n                      placeholder=\"Select Send Partner\" [clearable]=\"false\" formControlName=\"sendBusinessPartner\"\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('sendBusinessPartner')?.invalid && (searchForm.get('sendBusinessPartner')?.touched || formValidationError)}\">\r\n\r\n                      <ng-template ng-option-tmp let-item=\"item\">\r\n                        <span [title]=\"item.name\">{{ item.name }}</span>\r\n                      </ng-template>\r\n\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Recv BusinessPartner -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'recvBusinessPartner'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Recv Client<span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"recvBusinessPartnerAgents\" bindLabel=\"name\" bindValue=\"id\"\r\n                      placeholder=\"Select Recv Partner\" [clearable]=\"false\" formControlName=\"recvBusinessPartner\"\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('recvBusinessPartner')?.invalid && (searchForm.get('recvBusinessPartner')?.touched || formValidationError)}\">\r\n\r\n                      <ng-template ng-option-tmp let-item=\"item\">\r\n                        <span [title]=\"item.name\">{{ item.name }}</span>\r\n                      </ng-template>\r\n\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Transaction Status (Single-select) -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'transactionStatusSingleSelect'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Txn. Status<span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"transactionStatuses\" bindLabel=\"transactionStatus\" bindValue=\"transactionStatus\"\r\n                      placeholder=\"Select Status\" [clearable]=\"false\" formControlName=\"transactionStatus\" required\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('transactionStatus')?.invalid && (searchForm.get('transactionStatus')?.touched || formValidationError)}\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- For Trial Balance - Accounts Report -->\r\n\r\n              <!-- Business Unit -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'businessUnit'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Business Unit</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"businessUnits\" bindLabel=\"companyFullName\" bindValue=\"companyCode\"\r\n                      placeholder=\"Select Business Unit\" [clearable]=\"false\" formControlName=\"businessUnit\"\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('businessUnit')?.invalid && (searchForm.get('businessUnit')?.touched || formValidationError)}\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Year -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'financialYear'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Financial Year</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"financialYears\" bindLabel=\"financialYear\" bindValue=\"financialYear\"\r\n                      placeholder=\"Select Year\" [clearable]=\"false\" formControlName=\"financialYear\"\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('financialYear')?.invalid && (searchForm.get('financialYear')?.touched || formValidationError)}\"\r\n                      (change)=\"onSelectFinancialYear()\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- From Month -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'fromMonth'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">From Month</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"fromMonths\" bindLabel=\"period\" bindValue=\"pOrder\"\r\n                      placeholder=\"Select From Month\" [clearable]=\"false\" formControlName=\"fromMonth\"\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('fromMonth')?.invalid && (searchForm.get('fromMonth')?.touched|| formValidationError)}\"\r\n                      (change)=\"onSelectFromMonth()\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- To Month -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'toMonth'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">To Month</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"toMonths\" bindLabel=\"pMonthName\" bindValue=\"pMonth\"\r\n                      placeholder=\"Select To Month\" [clearable]=\"false\" formControlName=\"toMonth\"\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('toMonth')?.invalid && (searchForm.get('toMonth')?.touched|| formValidationError)}\"\r\n                      (change)=\"onSelectToMonth()\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- From Day -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'fromDay'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">From Day <span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"fromDays\" bindLabel=\"individualDay\" bindValue=\"individualDate\"\r\n                      placeholder=\"Select From Day\" [clearable]=\"false\" formControlName=\"fromDay\"\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('fromDay')?.invalid && (searchForm.get('fromDay')?.touched|| formValidationError)}\"\r\n                      (change)=\"onSelectFromDay()\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- To Day -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'toDay'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">To Day<span style=\"margin-left: 1px;\"\r\n                        class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"toDays\" bindLabel=\"pDate\" bindValue=\"individualDate\" placeholder=\"Select To Day\"\r\n                      [clearable]=\"false\" formControlName=\"toDay\"\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('toDay')?.invalid && (searchForm.get('toDay')?.touched|| formValidationError)}\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Date Type -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'dateTypeForTrialBalanceAccounts'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Date Type</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"dateTypes\" bindLabel=\"dateTypeLabel\" bindValue=\"dateTypeCode\"\r\n                      placeholder=\"Select Date Type\" formControlName=\"dateType\" [clearable]=\"false\" required\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('dateType')?.invalid && (searchForm.get('dateType')?.touched|| formValidationError)}\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n\r\n              <!-- Account Status -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'accountStatus'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Account Status</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select class=\"transaction-status-select\" [items]=\"accountStatuses\" bindLabel=\"statusName\"\r\n                      bindValue=\"statusCode\" [multiple]=\"true\" placeholder=\"Select Account Status\"\r\n                      formControlName=\"accountStatus\" [closeOnSelect]=\"false\" [clearable]=\"false\" [searchable]=\"false\"\r\n                      required\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('accountStatus')?.invalid && (searchForm.get('accountStatus')?.touched|| formValidationError)}\">\r\n                      <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n                        <input type=\"checkbox\" [checked]=\"item$.selected\" /> {{ item.statusName }}\r\n                      </ng-template>\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <!--Summary Report-->\r\n                   <div class=\"form-field\" *ngSwitchCase=\"'summaryReport'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Summary Report</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"summaryReportTypes\" bindLabel=\"label\" bindValue=\"value\"\r\n                     [clearable]=\"false\" formControlName=\"summaryReport\">\r\n\r\n                      <ng-template ng-option-tmp let-item=\"item\">\r\n                        <span [title]=\"item.label\">{{ item.label }}</span>\r\n                      </ng-template>\r\n\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n          </ng-container>\r\n\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"col-custom-1-5\">\r\n        <!-- View Report Button (Always at Top-Right) -->\r\n        <div class=\"form-field view-report-btn\">\r\n          <button type=\"submit\" class=\"btn btn-report\">View</button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</section>\r\n<hr>\r\n<!-- Error Messages -->\r\n<div class=\"alert alert-danger mt-3\" *ngIf=\"formValidationError && hasSearched\">\r\n  Please fill all mandatory fields\r\n</div>\r\n\r\n<div class=\"alert alert-danger mt-3\" *ngIf=\"errorMessage && loadingState === ComponentLoadingState.Error\">\r\n  {{ errorMessage }}\r\n</div>", styles: ["@charset \"UTF-8\";.filter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;grid-column:span 3}.form-field{display:flex;flex-direction:column;padding:0 4px 0 0!important;min-width:0}.col-custom-10-5{flex:0 0 87.5%!important;max-width:87.5%!important}.col-custom-1-5{flex:0 0 12.5%!important;max-width:12.5%!important;padding:0!important}::ng-deep .ng-select .ng-select-container .ng-value-container{overflow:hidden;flex-wrap:nowrap}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}::ng-deep .ng-select .ng-select-container{height:32px!important;min-height:32px!important;font-size:12px!important;align-items:center}.form-label{margin-bottom:0!important}.date-group{height:32px!important}::ng-deep .transaction-status-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:4px 0!important}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-top:0}::ng-deep .ng-dropdown-panel .ng-option{font-size:12px}.btn-report{border-radius:4px;background-color:#8091a5;color:#fff!important;font-size:14px!important;height:32px;padding:4px 15px!important;margin-left:15px!important;width:auto!important;margin-right:7px!important}::ng-deep .ng-select .ng-select-container:focus-within{box-shadow:0 0 5px 3px #1877f2!important}::ng-deep .ng-select .ng-select-container:focus{box-shadow:0 0 5px 3px #1877f2!important}.fa-calendar{--fa: \"\\f073\" !important}.dpicker{border:1px solid #ccc!important;font-size:12px!important;font-weight:400!important;height:32px!important}.dpicker:focus{box-shadow:0 0 5px 3px #1877f2!important}.cal{height:32px!important;background-color:#1877f2;margin-left:0!important}.cal:focus{box-shadow:none!important}.label-data{font-weight:600!important;font-size:.7rem!important;line-height:1rem}@media (max-width: 768px){.filter-grid{grid-template-columns:1fr;gap:12px}}.input-group-button{background:none!important;border:1px solid #1877F2!important;background-color:#1877f2!important;border-radius:0 3px 3px 0!important;min-width:35px;margin-left:1px;height:32px!important;cursor:pointer}.input-group-button .fa{color:#fff}.input-group-button:focus{box-shadow:0 0 5px 3px #009ee054}.input-group-button:focus{outline:none!important;box-shadow:none!important}.Breadcrumb h1,.Breadcrumb h2{font-weight:700}.row{display:flex;flex-wrap:wrap;margin-right:0;margin-left:0}.col-2{padding-left:0}.col-10{padding-right:0}.col-custom-10-5{padding-right:0!important;padding-left:0}::ng-deep .invalid-select.ng-select>.ng-select-container{background-color:#d521211a;border:2px solid red!important}.invalid-date{background-color:#d521211a;border:2px solid red!important}\n"], dependencies: [{ kind: "directive", type: i2$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: angularCommon.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: angularCommon.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: angularCommon.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: angularCommon.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: angularCommon.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i7$1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i7.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i7.NgOptionComponent, selector: "ng-option", inputs: ["value", "disabled"] }, { kind: "directive", type: i7.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i7.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "component", type: LoaderComponent, selector: "app-loader" }] });
+SearchFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SearchFilterComponent, selector: "lib-search-filter", inputs: { ReportName: "ReportName", initialFilters: "initialFilters" }, outputs: { searchClicked: "searchClicked", formValid: "formValid" }, ngImport: i0, template: "<h6 class=\"Breadcrumb\">\r\n  <a class=\"BreadCrumbLink\" [routerLink]=\"['/reports']\">\r\n    <h1>Reports</h1>\r\n  </a>\r\n  <a href=\"BreadCrumbLink\"></a>\r\n  <span class=\"BreadCrumbArrow\"></span>\r\n  <a class=\"BreadCrumbLink\">\r\n    <h2>{{ ReportName }}</h2>\r\n  </a>\r\n</h6>\r\n\r\n<app-loader *ngIf=\"loadingState === ComponentLoadingState.Loading\"></app-loader>\r\n<section>\r\n  <form [formGroup]=\"searchForm\" (ngSubmit)=\"onSearch()\">\r\n    <div class=\"row\">\r\n      <div class=\"col-custom-10-5\">\r\n        <div class=\"filter-grid\">\r\n\r\n          <!-- Dynamically render filters in order -->\r\n          <ng-container *ngFor=\"let field of visibleFields\">\r\n            <ng-container [ngSwitch]=\"field\">\r\n\r\n              <!-- Client -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'client'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Client<span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"clients1\" bindLabel=\"businessPartnerName\" bindValue=\"businessPartnerCode\"\r\n                      placeholder=\"Select Client\" [clearable]=\"false\" formControlName=\"client\" required\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('client')?.invalid && (searchForm.get('client')?.touched || formValidationError)}\"\r\n                      (change)=\"onClientChange()\" (open)=\"onOpen()\" (close)=\"onClose()\" [searchable]=\"isOpen\">\r\n\r\n                      <ng-template ng-option-tmp let-item=\"item\">\r\n                        <span [title]=\"item.businessPartnerName\">{{ item.businessPartnerName }}</span>\r\n                      </ng-template>\r\n\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Branch -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'branch'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Branch<span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"branches\" bindLabel=\"businessPartnerBranch\" bindValue=\"branchCode\"\r\n                      placeholder=\"Select Branch\" [clearable]=\"false\" formControlName=\"branch\" required\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('branch')?.invalid && (searchForm.get('branch')?.touched || formValidationError)}\"\r\n                      (change)=\"onBranchChange()\" (open)=\"onOpen()\" (close)=\"onClose()\" [searchable]=\"isOpen\">\r\n                      <ng-template ng-option-tmp let-item=\"item\">\r\n                        <span [title]=\"item.businessPartnerBranch\">{{ item.businessPartnerBranch }}</span>\r\n                      </ng-template>\r\n\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- From Date -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'fromDate'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">From Date<span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <div class=\"input-group date-group\">\r\n                      <input class=\"form-control dpicker\" placeholder=\"dd/mm/yyyy\" ngbDatepicker\r\n                        #fromDateInput=\"ngbDatepicker\" formControlName=\"fromDate\" autocomplete=\"off\"\r\n                        [ngClass]=\"{'invalid-date':searchForm.get('fromDate')?.invalid && (searchForm.get('fromDate')?.touched || formValidationError)}\" />\r\n                      <button class=\"input-group-button cal\" (click)=\"fromDateInput.toggle()\" type=\"button\">\r\n                        <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\r\n                      </button>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- To Date -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'toDate'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">To Date<span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <div class=\"input-group date-group\">\r\n                      <input class=\"form-control dpicker\" placeholder=\"dd/mm/yyyy\" ngbDatepicker\r\n                        #toDateInput=\"ngbDatepicker\" formControlName=\"toDate\" [minDate]=\"disabledDate\"\r\n                        autocomplete=\"off\"\r\n                        [ngClass]=\"{'invalid-date':searchForm.get('toDate')?.invalid && (searchForm.get('toDate')?.touched || formValidationError)}\" />\r\n                      <button class=\"input-group-button cal\" (click)=\"toDateInput.toggle()\" type=\"button\">\r\n                        <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\r\n                      </button>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Product -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'product'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Product</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"products\" bindLabel=\"productName\" bindValue=\"productCode\"\r\n                      placeholder=\"Select Product\" [clearable]=\"false\" formControlName=\"product\" (open)=\"onOpen()\"\r\n                      (close)=\"onClose()\" [searchable]=\"isOpen\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- User -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'userId'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">User<span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"users\" bindLabel=\"userName\" bindValue=\"userId\" placeholder=\"Select User\"\r\n                      [clearable]=\"false\" formControlName=\"userId\" required (open)=\"onOpen()\" (close)=\"onClose()\"\r\n                      [searchable]=\"isOpen\"\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('userId')?.invalid && (searchForm.get('userId')?.touched || formValidationError)}\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Currency -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'currency'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Currency</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"currencies\" bindValue=\"currencyCode\" placeholder=\"Select Currency\"\r\n                      [clearable]=\"false\" formControlName=\"currency\" [searchable]=\"true\" [searchFn]=\"currencySearch\"\r\n                      (open)=\"onOpen()\" (close)=\"onClose()\" [searchable]=\"isOpen\">\r\n\r\n                      <!-- Template for dropdown options -->\r\n                      <ng-template ng-option-tmp let-item=\"item\">\r\n                        <div\r\n                          [title]=\"item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency)\">\r\n                          {{ item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency) }}\r\n                        </div>\r\n                      </ng-template>\r\n\r\n                      <!-- Template for selected value -->\r\n                      <ng-template ng-label-tmp let-item=\"item\">\r\n                        <div\r\n                          [title]=\"item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency)\">\r\n                          {{ item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency) }}\r\n                        </div>\r\n                      </ng-template>\r\n\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!--Send Currency -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'sendCurrency'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Send Currency</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"currencies\" bindValue=\"currencyCode\" placeholder=\"Select Currency\"\r\n                      [clearable]=\"false\" formControlName=\"currency\" [searchable]=\"true\" [searchFn]=\"currencySearch\"\r\n                      (open)=\"onOpen()\" (close)=\"onClose()\" [searchable]=\"isOpen\">\r\n\r\n                      <!-- Template for dropdown options -->\r\n                      <ng-template ng-option-tmp let-item=\"item\">\r\n                        <div\r\n                          [title]=\"item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency)\">\r\n                          {{ item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency) }}\r\n                        </div>\r\n                      </ng-template>\r\n\r\n                      <!-- Template for selected value -->\r\n                      <ng-template ng-label-tmp let-item=\"item\">\r\n                        <div\r\n                          [title]=\"item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency)\">\r\n                          {{ item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency) }}\r\n                        </div>\r\n                      </ng-template>\r\n\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Transaction Status (Multi-select) -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'transactionStatus'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Txn. Status<span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select class=\"transaction-status-select\" [items]=\"transactionStatuses\"\r\n                      bindLabel=\"transactionStatus\" bindValue=\"transactionStatus\" [multiple]=\"true\"\r\n                      placeholder=\"Select Transaction Status\" formControlName=\"transactionStatus\"\r\n                      [closeOnSelect]=\"false\" [clearable]=\"false\" [searchable]=\"false\" required\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('transactionStatus')?.invalid && (searchForm.get('transactionStatus')?.touched || formValidationError)}\">\r\n                      <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n                        <input type=\"checkbox\" [checked]=\"item$.selected\" /> {{ item.transactionStatus }}\r\n                      </ng-template>\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Transaction No -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'transactionNo'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Txn. Number</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <input class=\"form-control dpicker\" formControlName=\"transactionNo\"\r\n                      placeholder=\"Enter transaction number\" />\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Value Date -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'valueDate'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-3\">\r\n                    <label class=\"form-label label-data\">Value Date<span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-9\">\r\n                    <div class=\"input-group\">\r\n                      <input class=\"form-control dpicker\" placeholder=\"dd/mm/yyyy\" ngbDatepicker\r\n                        #toDateInput=\"ngbDatepicker\" formControlName=\"toDate\" autocomplete=\"off\"\r\n                        [ngClass]=\"{'invalid-date':searchForm.get('date')?.invalid && (searchForm.get('date')?.touched || formValidationError)}\" />\r\n                      <button class=\"btn btn-outline-secondary\" type=\"button\" (click)=\"toDateInput.toggle()\">\r\n                        <i class=\"fa fa-calendar\"></i>\r\n                      </button>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Send Country -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'sendCountry'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Send Country</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode\"\r\n                      placeholder=\"Select Product\" [clearable]=\"false\" formControlName=\"sendCountry\">\r\n\r\n                      <ng-template ng-option-tmp let-item=\"item\">\r\n                        <span [title]=\"item.country\">{{ item.country }}</span>\r\n                      </ng-template>\r\n\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Receive Country -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'receiveCountry'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Receive Country</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode\"\r\n                      placeholder=\"Select Product\" [clearable]=\"false\" formControlName=\"receiveCountry\">\r\n\r\n                      <ng-template ng-option-tmp let-item=\"item\">\r\n                        <span [title]=\"item.country\">{{ item.country }}</span>\r\n                      </ng-template>\r\n\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!--Transaction Product -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'transactionProduct'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Product</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"transactionProducts\" bindLabel=\"name\" bindValue=\"productCode\"\r\n                      placeholder=\"Select Product\" [clearable]=\"false\" formControlName=\"product\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Date Type -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'dateType'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Date Type</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select placeholder=\"- Please select -\" formControlName=\"dateType\" [clearable]=\"false\" required>\r\n                      <ng-option [value]=\"1\">\r\n                        Value Date\r\n                      </ng-option>\r\n                      <ng-option [value]=\"2\">\r\n                        Posting Date\r\n                      </ng-option>\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Date -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'date'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Date</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <div class=\"input-group date-group\">\r\n                      <input class=\"form-control dpicker\" placeholder=\"dd/mm/yyyy\" ngbDatepicker\r\n                        #dateInput=\"ngbDatepicker\" formControlName=\"date\" autocomplete=\"off\"\r\n                        [ngClass]=\"{'invalid-date': searchForm.get('date')?.invalid && (searchForm.get('date')?.touched || formValidationError)}\" />\r\n                      <button class=\"input-group-button cal\" type=\"button\" (click)=\"dateInput.toggle()\">\r\n                        <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\r\n                      </button>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- receiveCurrency -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'receiveCurrency'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Receive Currency</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"currencies\" bindValue=\"currencyCode\" placeholder=\"Select Receive Currency\"\r\n                      [clearable]=\"false\" formControlName=\"receiveCurrency\" required (change)=\"onBranchChange()\"\r\n                      [searchable]=\"true\" [searchFn]=\"currencySearch\" (open)=\"onOpen()\" (close)=\"onClose()\"\r\n                      [searchable]=\"isOpen\">\r\n\r\n                      <!-- Dropdown options -->\r\n                      <ng-template ng-option-tmp let-item=\"item\">\r\n                        <div\r\n                          [title]=\"item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency)\">\r\n                          {{ item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency) }}\r\n                        </div>\r\n                      </ng-template>\r\n\r\n                      <!-- Selected value -->\r\n                      <ng-template ng-label-tmp let-item=\"item\">\r\n                        <div\r\n                          [title]=\"item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency)\">\r\n                          {{ item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency) }}\r\n                        </div>\r\n                      </ng-template>\r\n\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Send BusinessPartner -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'sendBusinessPartner'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Send Client<span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"sendBusinessPartnerAgents\" bindLabel=\"name\" bindValue=\"id\"\r\n                      placeholder=\"Select Send Partner\" [clearable]=\"false\" formControlName=\"sendBusinessPartner\"\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('sendBusinessPartner')?.invalid && (searchForm.get('sendBusinessPartner')?.touched || formValidationError)}\">\r\n\r\n                      <ng-template ng-option-tmp let-item=\"item\">\r\n                        <span [title]=\"item.name\">{{ item.name }}</span>\r\n                      </ng-template>\r\n\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Recv BusinessPartner -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'recvBusinessPartner'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Recv Client<span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"recvBusinessPartnerAgents\" bindLabel=\"name\" bindValue=\"id\"\r\n                      placeholder=\"Select Recv Partner\" [clearable]=\"false\" formControlName=\"recvBusinessPartner\"\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('recvBusinessPartner')?.invalid && (searchForm.get('recvBusinessPartner')?.touched || formValidationError)}\">\r\n\r\n                      <ng-template ng-option-tmp let-item=\"item\">\r\n                        <span [title]=\"item.name\">{{ item.name }}</span>\r\n                      </ng-template>\r\n\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Transaction Status (Single-select) -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'transactionStatusSingleSelect'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Txn. Status<span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"transactionStatuses\" bindLabel=\"transactionStatus\" bindValue=\"transactionStatus\"\r\n                      placeholder=\"Select Status\" [clearable]=\"false\" formControlName=\"transactionStatus\" required\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('transactionStatus')?.invalid && (searchForm.get('transactionStatus')?.touched || formValidationError)}\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- For Trial Balance - Accounts Report -->\r\n\r\n              <!-- Business Line -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'businessLine'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Business Line</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"businessLines\" bindLabel=\"businessLine\" bindValue=\"businessLine\"\r\n                      placeholder=\"Select Business Line\" [clearable]=\"false\" formControlName=\"businessLine\"\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('businessLine')?.invalid && (searchForm.get('businessLine')?.touched || formValidationError)}\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Year -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'financialYear'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Financial Year</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"financialYears\" bindLabel=\"financialYear\" bindValue=\"financialYear\"\r\n                      placeholder=\"Select Year\" [clearable]=\"false\" formControlName=\"financialYear\"\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('financialYear')?.invalid && (searchForm.get('financialYear')?.touched || formValidationError)}\"\r\n                      (change)=\"onSelectFinancialYear()\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- From Month -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'fromMonth'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">From Month</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"fromMonths\" bindLabel=\"period\" bindValue=\"pOrder\"\r\n                      placeholder=\"Select From Month\" [clearable]=\"false\" formControlName=\"fromMonth\"\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('fromMonth')?.invalid && (searchForm.get('fromMonth')?.touched|| formValidationError)}\"\r\n                      (change)=\"onSelectFromMonth()\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- To Month -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'toMonth'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">To Month</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"toMonths\" bindLabel=\"pMonthName\" bindValue=\"pMonth\"\r\n                      placeholder=\"Select To Month\" [clearable]=\"false\" formControlName=\"toMonth\"\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('toMonth')?.invalid && (searchForm.get('toMonth')?.touched|| formValidationError)}\"\r\n                      (change)=\"onSelectToMonth()\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- From Day -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'fromDay'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">From Day <span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"fromDays\" bindLabel=\"individualDay\" bindValue=\"individualDate\"\r\n                      placeholder=\"Select From Day\" [clearable]=\"false\" formControlName=\"fromDay\"\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('fromDay')?.invalid && (searchForm.get('fromDay')?.touched|| formValidationError)}\"\r\n                      (change)=\"onSelectFromDay()\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- To Day -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'toDay'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">To Day<span style=\"margin-left: 1px;\"\r\n                        class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"toDays\" bindLabel=\"pDate\" bindValue=\"individualDate\" placeholder=\"Select To Day\"\r\n                      [clearable]=\"false\" formControlName=\"toDay\"\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('toDay')?.invalid && (searchForm.get('toDay')?.touched|| formValidationError)}\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Date Type -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'dateTypeForTrialBalanceAccounts'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Date Type</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"dateTypes\" bindLabel=\"dateTypeLabel\" bindValue=\"dateTypeCode\"\r\n                      placeholder=\"Select Date Type\" formControlName=\"dateType\" [clearable]=\"false\" required\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('dateType')?.invalid && (searchForm.get('dateType')?.touched|| formValidationError)}\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n\r\n              <!-- Account Status -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'accountStatus'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Account Status</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select class=\"transaction-status-select\" [items]=\"accountStatuses\" bindLabel=\"statusName\"\r\n                      bindValue=\"statusCode\" [multiple]=\"true\" placeholder=\"Select Account Status\"\r\n                      formControlName=\"accountStatus\" [closeOnSelect]=\"false\" [clearable]=\"false\" [searchable]=\"false\"\r\n                      required\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('accountStatus')?.invalid && (searchForm.get('accountStatus')?.touched|| formValidationError)}\">\r\n                      <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n                        <input type=\"checkbox\" [checked]=\"item$.selected\" /> {{ item.statusName }}\r\n                      </ng-template>\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <!--Summary Report-->\r\n                   <div class=\"form-field\" *ngSwitchCase=\"'summaryReport'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Summary Report</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"summaryReportTypes\" bindLabel=\"label\" bindValue=\"value\"\r\n                     [clearable]=\"false\" formControlName=\"summaryReport\">\r\n\r\n                      <ng-template ng-option-tmp let-item=\"item\">\r\n                        <span [title]=\"item.label\">{{ item.label }}</span>\r\n                      </ng-template>\r\n\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n          </ng-container>\r\n\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"col-custom-1-5\">\r\n        <!-- View Report Button (Always at Top-Right) -->\r\n        <div class=\"form-field view-report-btn\">\r\n          <button type=\"submit\" class=\"btn btn-report\">View</button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</section>\r\n<hr>\r\n<!-- Error Messages -->\r\n<div class=\"alert alert-danger mt-3\" *ngIf=\"formValidationError && hasSearched\">\r\n  Please fill all mandatory fields\r\n</div>\r\n\r\n<div class=\"alert alert-danger mt-3\" *ngIf=\"errorMessage && loadingState === ComponentLoadingState.Error\">\r\n  {{ errorMessage }}\r\n</div>", styles: ["@charset \"UTF-8\";.filter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;grid-column:span 3}.form-field{display:flex;flex-direction:column;padding:0 4px 0 0!important;min-width:0}.col-custom-10-5{flex:0 0 87.5%!important;max-width:87.5%!important}.col-custom-1-5{flex:0 0 12.5%!important;max-width:12.5%!important;padding:0!important}::ng-deep .ng-select .ng-select-container .ng-value-container{overflow:hidden;flex-wrap:nowrap}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}::ng-deep .ng-select .ng-select-container{height:32px!important;min-height:32px!important;font-size:12px!important;align-items:center}.form-label{margin-bottom:0!important}.date-group{height:32px!important}::ng-deep .transaction-status-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:4px 0!important}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-top:0}::ng-deep .ng-dropdown-panel .ng-option{font-size:12px}.btn-report{border-radius:4px;background-color:#8091a5;color:#fff!important;font-size:14px!important;height:32px;padding:4px 15px!important;margin-left:15px!important;width:auto!important;margin-right:7px!important}::ng-deep .ng-select .ng-select-container:focus-within{box-shadow:0 0 5px 3px #1877f2!important}::ng-deep .ng-select .ng-select-container:focus{box-shadow:0 0 5px 3px #1877f2!important}.fa-calendar{--fa: \"\\f073\" !important}.dpicker{border:1px solid #ccc!important;font-size:12px!important;font-weight:400!important;height:32px!important}.dpicker:focus{box-shadow:0 0 5px 3px #1877f2!important}.cal{height:32px!important;background-color:#1877f2;margin-left:0!important}.cal:focus{box-shadow:none!important}.label-data{font-weight:600!important;font-size:.7rem!important;line-height:1rem}@media (max-width: 768px){.filter-grid{grid-template-columns:1fr;gap:12px}}.input-group-button{background:none!important;border:1px solid #1877F2!important;background-color:#1877f2!important;border-radius:0 3px 3px 0!important;min-width:35px;margin-left:1px;height:32px!important;cursor:pointer}.input-group-button .fa{color:#fff}.input-group-button:focus{box-shadow:0 0 5px 3px #009ee054}.input-group-button:focus{outline:none!important;box-shadow:none!important}.Breadcrumb h1,.Breadcrumb h2{font-weight:700}.row{display:flex;flex-wrap:wrap;margin-right:0;margin-left:0}.col-2{padding-left:0}.col-10{padding-right:0}.col-custom-10-5{padding-right:0!important;padding-left:0}::ng-deep .invalid-select.ng-select>.ng-select-container{background-color:#d521211a;border:2px solid red!important}.invalid-date{background-color:#d521211a;border:2px solid red!important}\n"], dependencies: [{ kind: "directive", type: i2$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: angularCommon.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: angularCommon.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: angularCommon.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: angularCommon.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: angularCommon.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i7$1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i7.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i7.NgOptionComponent, selector: "ng-option", inputs: ["value", "disabled"] }, { kind: "directive", type: i7.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i7.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "component", type: LoaderComponent, selector: "app-loader" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SearchFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-search-filter', template: "<h6 class=\"Breadcrumb\">\r\n  <a class=\"BreadCrumbLink\" [routerLink]=\"['/reports']\">\r\n    <h1>Reports</h1>\r\n  </a>\r\n  <a href=\"BreadCrumbLink\"></a>\r\n  <span class=\"BreadCrumbArrow\"></span>\r\n  <a class=\"BreadCrumbLink\">\r\n    <h2>{{ ReportName }}</h2>\r\n  </a>\r\n</h6>\r\n\r\n<app-loader *ngIf=\"loadingState === ComponentLoadingState.Loading\"></app-loader>\r\n<section>\r\n  <form [formGroup]=\"searchForm\" (ngSubmit)=\"onSearch()\">\r\n    <div class=\"row\">\r\n      <div class=\"col-custom-10-5\">\r\n        <div class=\"filter-grid\">\r\n\r\n          <!-- Dynamically render filters in order -->\r\n          <ng-container *ngFor=\"let field of visibleFields\">\r\n            <ng-container [ngSwitch]=\"field\">\r\n\r\n              <!-- Client -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'client'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Client<span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"clients1\" bindLabel=\"businessPartnerName\" bindValue=\"businessPartnerCode\"\r\n                      placeholder=\"Select Client\" [clearable]=\"false\" formControlName=\"client\" required\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('client')?.invalid && (searchForm.get('client')?.touched || formValidationError)}\"\r\n                      (change)=\"onClientChange()\" (open)=\"onOpen()\" (close)=\"onClose()\" [searchable]=\"isOpen\">\r\n\r\n                      <ng-template ng-option-tmp let-item=\"item\">\r\n                        <span [title]=\"item.businessPartnerName\">{{ item.businessPartnerName }}</span>\r\n                      </ng-template>\r\n\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Branch -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'branch'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Branch<span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"branches\" bindLabel=\"businessPartnerBranch\" bindValue=\"branchCode\"\r\n                      placeholder=\"Select Branch\" [clearable]=\"false\" formControlName=\"branch\" required\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('branch')?.invalid && (searchForm.get('branch')?.touched || formValidationError)}\"\r\n                      (change)=\"onBranchChange()\" (open)=\"onOpen()\" (close)=\"onClose()\" [searchable]=\"isOpen\">\r\n                      <ng-template ng-option-tmp let-item=\"item\">\r\n                        <span [title]=\"item.businessPartnerBranch\">{{ item.businessPartnerBranch }}</span>\r\n                      </ng-template>\r\n\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- From Date -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'fromDate'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">From Date<span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <div class=\"input-group date-group\">\r\n                      <input class=\"form-control dpicker\" placeholder=\"dd/mm/yyyy\" ngbDatepicker\r\n                        #fromDateInput=\"ngbDatepicker\" formControlName=\"fromDate\" autocomplete=\"off\"\r\n                        [ngClass]=\"{'invalid-date':searchForm.get('fromDate')?.invalid && (searchForm.get('fromDate')?.touched || formValidationError)}\" />\r\n                      <button class=\"input-group-button cal\" (click)=\"fromDateInput.toggle()\" type=\"button\">\r\n                        <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\r\n                      </button>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- To Date -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'toDate'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">To Date<span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <div class=\"input-group date-group\">\r\n                      <input class=\"form-control dpicker\" placeholder=\"dd/mm/yyyy\" ngbDatepicker\r\n                        #toDateInput=\"ngbDatepicker\" formControlName=\"toDate\" [minDate]=\"disabledDate\"\r\n                        autocomplete=\"off\"\r\n                        [ngClass]=\"{'invalid-date':searchForm.get('toDate')?.invalid && (searchForm.get('toDate')?.touched || formValidationError)}\" />\r\n                      <button class=\"input-group-button cal\" (click)=\"toDateInput.toggle()\" type=\"button\">\r\n                        <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\r\n                      </button>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Product -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'product'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Product</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"products\" bindLabel=\"productName\" bindValue=\"productCode\"\r\n                      placeholder=\"Select Product\" [clearable]=\"false\" formControlName=\"product\" (open)=\"onOpen()\"\r\n                      (close)=\"onClose()\" [searchable]=\"isOpen\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- User -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'userId'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">User<span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"users\" bindLabel=\"userName\" bindValue=\"userId\" placeholder=\"Select User\"\r\n                      [clearable]=\"false\" formControlName=\"userId\" required (open)=\"onOpen()\" (close)=\"onClose()\"\r\n                      [searchable]=\"isOpen\"\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('userId')?.invalid && (searchForm.get('userId')?.touched || formValidationError)}\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Currency -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'currency'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Currency</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"currencies\" bindValue=\"currencyCode\" placeholder=\"Select Currency\"\r\n                      [clearable]=\"false\" formControlName=\"currency\" [searchable]=\"true\" [searchFn]=\"currencySearch\"\r\n                      (open)=\"onOpen()\" (close)=\"onClose()\" [searchable]=\"isOpen\">\r\n\r\n                      <!-- Template for dropdown options -->\r\n                      <ng-template ng-option-tmp let-item=\"item\">\r\n                        <div\r\n                          [title]=\"item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency)\">\r\n                          {{ item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency) }}\r\n                        </div>\r\n                      </ng-template>\r\n\r\n                      <!-- Template for selected value -->\r\n                      <ng-template ng-label-tmp let-item=\"item\">\r\n                        <div\r\n                          [title]=\"item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency)\">\r\n                          {{ item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency) }}\r\n                        </div>\r\n                      </ng-template>\r\n\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!--Send Currency -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'sendCurrency'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Send Currency</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"currencies\" bindValue=\"currencyCode\" placeholder=\"Select Currency\"\r\n                      [clearable]=\"false\" formControlName=\"currency\" [searchable]=\"true\" [searchFn]=\"currencySearch\"\r\n                      (open)=\"onOpen()\" (close)=\"onClose()\" [searchable]=\"isOpen\">\r\n\r\n                      <!-- Template for dropdown options -->\r\n                      <ng-template ng-option-tmp let-item=\"item\">\r\n                        <div\r\n                          [title]=\"item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency)\">\r\n                          {{ item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency) }}\r\n                        </div>\r\n                      </ng-template>\r\n\r\n                      <!-- Template for selected value -->\r\n                      <ng-template ng-label-tmp let-item=\"item\">\r\n                        <div\r\n                          [title]=\"item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency)\">\r\n                          {{ item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency) }}\r\n                        </div>\r\n                      </ng-template>\r\n\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Transaction Status (Multi-select) -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'transactionStatus'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Txn. Status<span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select class=\"transaction-status-select\" [items]=\"transactionStatuses\"\r\n                      bindLabel=\"transactionStatus\" bindValue=\"transactionStatus\" [multiple]=\"true\"\r\n                      placeholder=\"Select Transaction Status\" formControlName=\"transactionStatus\"\r\n                      [closeOnSelect]=\"false\" [clearable]=\"false\" [searchable]=\"false\" required\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('transactionStatus')?.invalid && (searchForm.get('transactionStatus')?.touched || formValidationError)}\">\r\n                      <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n                        <input type=\"checkbox\" [checked]=\"item$.selected\" /> {{ item.transactionStatus }}\r\n                      </ng-template>\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Transaction No -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'transactionNo'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Txn. Number</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <input class=\"form-control dpicker\" formControlName=\"transactionNo\"\r\n                      placeholder=\"Enter transaction number\" />\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Value Date -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'valueDate'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-3\">\r\n                    <label class=\"form-label label-data\">Value Date<span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-9\">\r\n                    <div class=\"input-group\">\r\n                      <input class=\"form-control dpicker\" placeholder=\"dd/mm/yyyy\" ngbDatepicker\r\n                        #toDateInput=\"ngbDatepicker\" formControlName=\"toDate\" autocomplete=\"off\"\r\n                        [ngClass]=\"{'invalid-date':searchForm.get('date')?.invalid && (searchForm.get('date')?.touched || formValidationError)}\" />\r\n                      <button class=\"btn btn-outline-secondary\" type=\"button\" (click)=\"toDateInput.toggle()\">\r\n                        <i class=\"fa fa-calendar\"></i>\r\n                      </button>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Send Country -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'sendCountry'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Send Country</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode\"\r\n                      placeholder=\"Select Product\" [clearable]=\"false\" formControlName=\"sendCountry\">\r\n\r\n                      <ng-template ng-option-tmp let-item=\"item\">\r\n                        <span [title]=\"item.country\">{{ item.country }}</span>\r\n                      </ng-template>\r\n\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Receive Country -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'receiveCountry'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Receive Country</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode\"\r\n                      placeholder=\"Select Product\" [clearable]=\"false\" formControlName=\"receiveCountry\">\r\n\r\n                      <ng-template ng-option-tmp let-item=\"item\">\r\n                        <span [title]=\"item.country\">{{ item.country }}</span>\r\n                      </ng-template>\r\n\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!--Transaction Product -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'transactionProduct'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Product</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"transactionProducts\" bindLabel=\"name\" bindValue=\"productCode\"\r\n                      placeholder=\"Select Product\" [clearable]=\"false\" formControlName=\"product\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Date Type -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'dateType'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Date Type</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select placeholder=\"- Please select -\" formControlName=\"dateType\" [clearable]=\"false\" required>\r\n                      <ng-option [value]=\"1\">\r\n                        Value Date\r\n                      </ng-option>\r\n                      <ng-option [value]=\"2\">\r\n                        Posting Date\r\n                      </ng-option>\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Date -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'date'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Date</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <div class=\"input-group date-group\">\r\n                      <input class=\"form-control dpicker\" placeholder=\"dd/mm/yyyy\" ngbDatepicker\r\n                        #dateInput=\"ngbDatepicker\" formControlName=\"date\" autocomplete=\"off\"\r\n                        [ngClass]=\"{'invalid-date': searchForm.get('date')?.invalid && (searchForm.get('date')?.touched || formValidationError)}\" />\r\n                      <button class=\"input-group-button cal\" type=\"button\" (click)=\"dateInput.toggle()\">\r\n                        <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\r\n                      </button>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- receiveCurrency -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'receiveCurrency'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Receive Currency</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"currencies\" bindValue=\"currencyCode\" placeholder=\"Select Receive Currency\"\r\n                      [clearable]=\"false\" formControlName=\"receiveCurrency\" required (change)=\"onBranchChange()\"\r\n                      [searchable]=\"true\" [searchFn]=\"currencySearch\" (open)=\"onOpen()\" (close)=\"onClose()\"\r\n                      [searchable]=\"isOpen\">\r\n\r\n                      <!-- Dropdown options -->\r\n                      <ng-template ng-option-tmp let-item=\"item\">\r\n                        <div\r\n                          [title]=\"item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency)\">\r\n                          {{ item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency) }}\r\n                        </div>\r\n                      </ng-template>\r\n\r\n                      <!-- Selected value -->\r\n                      <ng-template ng-label-tmp let-item=\"item\">\r\n                        <div\r\n                          [title]=\"item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency)\">\r\n                          {{ item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency) }}\r\n                        </div>\r\n                      </ng-template>\r\n\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Send BusinessPartner -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'sendBusinessPartner'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Send Client<span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"sendBusinessPartnerAgents\" bindLabel=\"name\" bindValue=\"id\"\r\n                      placeholder=\"Select Send Partner\" [clearable]=\"false\" formControlName=\"sendBusinessPartner\"\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('sendBusinessPartner')?.invalid && (searchForm.get('sendBusinessPartner')?.touched || formValidationError)}\">\r\n\r\n                      <ng-template ng-option-tmp let-item=\"item\">\r\n                        <span [title]=\"item.name\">{{ item.name }}</span>\r\n                      </ng-template>\r\n\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Recv BusinessPartner -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'recvBusinessPartner'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Recv Client<span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"recvBusinessPartnerAgents\" bindLabel=\"name\" bindValue=\"id\"\r\n                      placeholder=\"Select Recv Partner\" [clearable]=\"false\" formControlName=\"recvBusinessPartner\"\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('recvBusinessPartner')?.invalid && (searchForm.get('recvBusinessPartner')?.touched || formValidationError)}\">\r\n\r\n                      <ng-template ng-option-tmp let-item=\"item\">\r\n                        <span [title]=\"item.name\">{{ item.name }}</span>\r\n                      </ng-template>\r\n\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Transaction Status (Single-select) -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'transactionStatusSingleSelect'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Txn. Status<span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"transactionStatuses\" bindLabel=\"transactionStatus\" bindValue=\"transactionStatus\"\r\n                      placeholder=\"Select Status\" [clearable]=\"false\" formControlName=\"transactionStatus\" required\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('transactionStatus')?.invalid && (searchForm.get('transactionStatus')?.touched || formValidationError)}\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- For Trial Balance - Accounts Report -->\r\n\r\n              <!-- Business Unit -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'businessUnit'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Business Unit</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"businessUnits\" bindLabel=\"companyFullName\" bindValue=\"companyCode\"\r\n                      placeholder=\"Select Business Unit\" [clearable]=\"false\" formControlName=\"businessUnit\"\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('businessUnit')?.invalid && (searchForm.get('businessUnit')?.touched || formValidationError)}\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Year -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'financialYear'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Financial Year</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"financialYears\" bindLabel=\"financialYear\" bindValue=\"financialYear\"\r\n                      placeholder=\"Select Year\" [clearable]=\"false\" formControlName=\"financialYear\"\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('financialYear')?.invalid && (searchForm.get('financialYear')?.touched || formValidationError)}\"\r\n                      (change)=\"onSelectFinancialYear()\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- From Month -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'fromMonth'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">From Month</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"fromMonths\" bindLabel=\"period\" bindValue=\"pOrder\"\r\n                      placeholder=\"Select From Month\" [clearable]=\"false\" formControlName=\"fromMonth\"\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('fromMonth')?.invalid && (searchForm.get('fromMonth')?.touched|| formValidationError)}\"\r\n                      (change)=\"onSelectFromMonth()\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- To Month -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'toMonth'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">To Month</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"toMonths\" bindLabel=\"pMonthName\" bindValue=\"pMonth\"\r\n                      placeholder=\"Select To Month\" [clearable]=\"false\" formControlName=\"toMonth\"\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('toMonth')?.invalid && (searchForm.get('toMonth')?.touched|| formValidationError)}\"\r\n                      (change)=\"onSelectToMonth()\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- From Day -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'fromDay'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">From Day <span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"fromDays\" bindLabel=\"individualDay\" bindValue=\"individualDate\"\r\n                      placeholder=\"Select From Day\" [clearable]=\"false\" formControlName=\"fromDay\"\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('fromDay')?.invalid && (searchForm.get('fromDay')?.touched|| formValidationError)}\"\r\n                      (change)=\"onSelectFromDay()\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- To Day -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'toDay'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">To Day<span style=\"margin-left: 1px;\"\r\n                        class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"toDays\" bindLabel=\"pDate\" bindValue=\"individualDate\" placeholder=\"Select To Day\"\r\n                      [clearable]=\"false\" formControlName=\"toDay\"\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('toDay')?.invalid && (searchForm.get('toDay')?.touched|| formValidationError)}\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Date Type -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'dateTypeForTrialBalanceAccounts'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Date Type</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"dateTypes\" bindLabel=\"dateTypeLabel\" bindValue=\"dateTypeCode\"\r\n                      placeholder=\"Select Date Type\" formControlName=\"dateType\" [clearable]=\"false\" required\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('dateType')?.invalid && (searchForm.get('dateType')?.touched|| formValidationError)}\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n\r\n              <!-- Account Status -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'accountStatus'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Account Status</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select class=\"transaction-status-select\" [items]=\"accountStatuses\" bindLabel=\"statusName\"\r\n                      bindValue=\"statusCode\" [multiple]=\"true\" placeholder=\"Select Account Status\"\r\n                      formControlName=\"accountStatus\" [closeOnSelect]=\"false\" [clearable]=\"false\" [searchable]=\"false\"\r\n                      required\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('accountStatus')?.invalid && (searchForm.get('accountStatus')?.touched|| formValidationError)}\">\r\n                      <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n                        <input type=\"checkbox\" [checked]=\"item$.selected\" /> {{ item.statusName }}\r\n                      </ng-template>\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <!--Summary Report-->\r\n                   <div class=\"form-field\" *ngSwitchCase=\"'summaryReport'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Summary Report</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"summaryReportTypes\" bindLabel=\"label\" bindValue=\"value\"\r\n                     [clearable]=\"false\" formControlName=\"summaryReport\">\r\n\r\n                      <ng-template ng-option-tmp let-item=\"item\">\r\n                        <span [title]=\"item.label\">{{ item.label }}</span>\r\n                      </ng-template>\r\n\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n          </ng-container>\r\n\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"col-custom-1-5\">\r\n        <!-- View Report Button (Always at Top-Right) -->\r\n        <div class=\"form-field view-report-btn\">\r\n          <button type=\"submit\" class=\"btn btn-report\">View</button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</section>\r\n<hr>\r\n<!-- Error Messages -->\r\n<div class=\"alert alert-danger mt-3\" *ngIf=\"formValidationError && hasSearched\">\r\n  Please fill all mandatory fields\r\n</div>\r\n\r\n<div class=\"alert alert-danger mt-3\" *ngIf=\"errorMessage && loadingState === ComponentLoadingState.Error\">\r\n  {{ errorMessage }}\r\n</div>", styles: ["@charset \"UTF-8\";.filter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;grid-column:span 3}.form-field{display:flex;flex-direction:column;padding:0 4px 0 0!important;min-width:0}.col-custom-10-5{flex:0 0 87.5%!important;max-width:87.5%!important}.col-custom-1-5{flex:0 0 12.5%!important;max-width:12.5%!important;padding:0!important}::ng-deep .ng-select .ng-select-container .ng-value-container{overflow:hidden;flex-wrap:nowrap}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}::ng-deep .ng-select .ng-select-container{height:32px!important;min-height:32px!important;font-size:12px!important;align-items:center}.form-label{margin-bottom:0!important}.date-group{height:32px!important}::ng-deep .transaction-status-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:4px 0!important}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-top:0}::ng-deep .ng-dropdown-panel .ng-option{font-size:12px}.btn-report{border-radius:4px;background-color:#8091a5;color:#fff!important;font-size:14px!important;height:32px;padding:4px 15px!important;margin-left:15px!important;width:auto!important;margin-right:7px!important}::ng-deep .ng-select .ng-select-container:focus-within{box-shadow:0 0 5px 3px #1877f2!important}::ng-deep .ng-select .ng-select-container:focus{box-shadow:0 0 5px 3px #1877f2!important}.fa-calendar{--fa: \"\\f073\" !important}.dpicker{border:1px solid #ccc!important;font-size:12px!important;font-weight:400!important;height:32px!important}.dpicker:focus{box-shadow:0 0 5px 3px #1877f2!important}.cal{height:32px!important;background-color:#1877f2;margin-left:0!important}.cal:focus{box-shadow:none!important}.label-data{font-weight:600!important;font-size:.7rem!important;line-height:1rem}@media (max-width: 768px){.filter-grid{grid-template-columns:1fr;gap:12px}}.input-group-button{background:none!important;border:1px solid #1877F2!important;background-color:#1877f2!important;border-radius:0 3px 3px 0!important;min-width:35px;margin-left:1px;height:32px!important;cursor:pointer}.input-group-button .fa{color:#fff}.input-group-button:focus{box-shadow:0 0 5px 3px #009ee054}.input-group-button:focus{outline:none!important;box-shadow:none!important}.Breadcrumb h1,.Breadcrumb h2{font-weight:700}.row{display:flex;flex-wrap:wrap;margin-right:0;margin-left:0}.col-2{padding-left:0}.col-10{padding-right:0}.col-custom-10-5{padding-right:0!important;padding-left:0}::ng-deep .invalid-select.ng-select>.ng-select-container{background-color:#d521211a;border:2px solid red!important}.invalid-date{background-color:#d521211a;border:2px solid red!important}\n"] }]
+            args: [{ selector: 'lib-search-filter', template: "<h6 class=\"Breadcrumb\">\r\n  <a class=\"BreadCrumbLink\" [routerLink]=\"['/reports']\">\r\n    <h1>Reports</h1>\r\n  </a>\r\n  <a href=\"BreadCrumbLink\"></a>\r\n  <span class=\"BreadCrumbArrow\"></span>\r\n  <a class=\"BreadCrumbLink\">\r\n    <h2>{{ ReportName }}</h2>\r\n  </a>\r\n</h6>\r\n\r\n<app-loader *ngIf=\"loadingState === ComponentLoadingState.Loading\"></app-loader>\r\n<section>\r\n  <form [formGroup]=\"searchForm\" (ngSubmit)=\"onSearch()\">\r\n    <div class=\"row\">\r\n      <div class=\"col-custom-10-5\">\r\n        <div class=\"filter-grid\">\r\n\r\n          <!-- Dynamically render filters in order -->\r\n          <ng-container *ngFor=\"let field of visibleFields\">\r\n            <ng-container [ngSwitch]=\"field\">\r\n\r\n              <!-- Client -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'client'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Client<span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"clients1\" bindLabel=\"businessPartnerName\" bindValue=\"businessPartnerCode\"\r\n                      placeholder=\"Select Client\" [clearable]=\"false\" formControlName=\"client\" required\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('client')?.invalid && (searchForm.get('client')?.touched || formValidationError)}\"\r\n                      (change)=\"onClientChange()\" (open)=\"onOpen()\" (close)=\"onClose()\" [searchable]=\"isOpen\">\r\n\r\n                      <ng-template ng-option-tmp let-item=\"item\">\r\n                        <span [title]=\"item.businessPartnerName\">{{ item.businessPartnerName }}</span>\r\n                      </ng-template>\r\n\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Branch -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'branch'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Branch<span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"branches\" bindLabel=\"businessPartnerBranch\" bindValue=\"branchCode\"\r\n                      placeholder=\"Select Branch\" [clearable]=\"false\" formControlName=\"branch\" required\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('branch')?.invalid && (searchForm.get('branch')?.touched || formValidationError)}\"\r\n                      (change)=\"onBranchChange()\" (open)=\"onOpen()\" (close)=\"onClose()\" [searchable]=\"isOpen\">\r\n                      <ng-template ng-option-tmp let-item=\"item\">\r\n                        <span [title]=\"item.businessPartnerBranch\">{{ item.businessPartnerBranch }}</span>\r\n                      </ng-template>\r\n\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- From Date -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'fromDate'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">From Date<span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <div class=\"input-group date-group\">\r\n                      <input class=\"form-control dpicker\" placeholder=\"dd/mm/yyyy\" ngbDatepicker\r\n                        #fromDateInput=\"ngbDatepicker\" formControlName=\"fromDate\" autocomplete=\"off\"\r\n                        [ngClass]=\"{'invalid-date':searchForm.get('fromDate')?.invalid && (searchForm.get('fromDate')?.touched || formValidationError)}\" />\r\n                      <button class=\"input-group-button cal\" (click)=\"fromDateInput.toggle()\" type=\"button\">\r\n                        <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\r\n                      </button>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- To Date -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'toDate'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">To Date<span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <div class=\"input-group date-group\">\r\n                      <input class=\"form-control dpicker\" placeholder=\"dd/mm/yyyy\" ngbDatepicker\r\n                        #toDateInput=\"ngbDatepicker\" formControlName=\"toDate\" [minDate]=\"disabledDate\"\r\n                        autocomplete=\"off\"\r\n                        [ngClass]=\"{'invalid-date':searchForm.get('toDate')?.invalid && (searchForm.get('toDate')?.touched || formValidationError)}\" />\r\n                      <button class=\"input-group-button cal\" (click)=\"toDateInput.toggle()\" type=\"button\">\r\n                        <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\r\n                      </button>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Product -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'product'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Product</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"products\" bindLabel=\"productName\" bindValue=\"productCode\"\r\n                      placeholder=\"Select Product\" [clearable]=\"false\" formControlName=\"product\" (open)=\"onOpen()\"\r\n                      (close)=\"onClose()\" [searchable]=\"isOpen\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- User -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'userId'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">User<span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"users\" bindLabel=\"userName\" bindValue=\"userId\" placeholder=\"Select User\"\r\n                      [clearable]=\"false\" formControlName=\"userId\" required (open)=\"onOpen()\" (close)=\"onClose()\"\r\n                      [searchable]=\"isOpen\"\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('userId')?.invalid && (searchForm.get('userId')?.touched || formValidationError)}\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Currency -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'currency'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Currency</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"currencies\" bindValue=\"currencyCode\" placeholder=\"Select Currency\"\r\n                      [clearable]=\"false\" formControlName=\"currency\" [searchable]=\"true\" [searchFn]=\"currencySearch\"\r\n                      (open)=\"onOpen()\" (close)=\"onClose()\" [searchable]=\"isOpen\">\r\n\r\n                      <!-- Template for dropdown options -->\r\n                      <ng-template ng-option-tmp let-item=\"item\">\r\n                        <div\r\n                          [title]=\"item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency)\">\r\n                          {{ item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency) }}\r\n                        </div>\r\n                      </ng-template>\r\n\r\n                      <!-- Template for selected value -->\r\n                      <ng-template ng-label-tmp let-item=\"item\">\r\n                        <div\r\n                          [title]=\"item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency)\">\r\n                          {{ item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency) }}\r\n                        </div>\r\n                      </ng-template>\r\n\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!--Send Currency -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'sendCurrency'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Send Currency</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"currencies\" bindValue=\"currencyCode\" placeholder=\"Select Currency\"\r\n                      [clearable]=\"false\" formControlName=\"currency\" [searchable]=\"true\" [searchFn]=\"currencySearch\"\r\n                      (open)=\"onOpen()\" (close)=\"onClose()\" [searchable]=\"isOpen\">\r\n\r\n                      <!-- Template for dropdown options -->\r\n                      <ng-template ng-option-tmp let-item=\"item\">\r\n                        <div\r\n                          [title]=\"item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency)\">\r\n                          {{ item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency) }}\r\n                        </div>\r\n                      </ng-template>\r\n\r\n                      <!-- Template for selected value -->\r\n                      <ng-template ng-label-tmp let-item=\"item\">\r\n                        <div\r\n                          [title]=\"item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency)\">\r\n                          {{ item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency) }}\r\n                        </div>\r\n                      </ng-template>\r\n\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Transaction Status (Multi-select) -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'transactionStatus'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Txn. Status<span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select class=\"transaction-status-select\" [items]=\"transactionStatuses\"\r\n                      bindLabel=\"transactionStatus\" bindValue=\"transactionStatus\" [multiple]=\"true\"\r\n                      placeholder=\"Select Transaction Status\" formControlName=\"transactionStatus\"\r\n                      [closeOnSelect]=\"false\" [clearable]=\"false\" [searchable]=\"false\" required\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('transactionStatus')?.invalid && (searchForm.get('transactionStatus')?.touched || formValidationError)}\">\r\n                      <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n                        <input type=\"checkbox\" [checked]=\"item$.selected\" /> {{ item.transactionStatus }}\r\n                      </ng-template>\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Transaction No -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'transactionNo'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Txn. Number</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <input class=\"form-control dpicker\" formControlName=\"transactionNo\"\r\n                      placeholder=\"Enter transaction number\" />\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Value Date -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'valueDate'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-3\">\r\n                    <label class=\"form-label label-data\">Value Date<span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-9\">\r\n                    <div class=\"input-group\">\r\n                      <input class=\"form-control dpicker\" placeholder=\"dd/mm/yyyy\" ngbDatepicker\r\n                        #toDateInput=\"ngbDatepicker\" formControlName=\"toDate\" autocomplete=\"off\"\r\n                        [ngClass]=\"{'invalid-date':searchForm.get('date')?.invalid && (searchForm.get('date')?.touched || formValidationError)}\" />\r\n                      <button class=\"btn btn-outline-secondary\" type=\"button\" (click)=\"toDateInput.toggle()\">\r\n                        <i class=\"fa fa-calendar\"></i>\r\n                      </button>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Send Country -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'sendCountry'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Send Country</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode\"\r\n                      placeholder=\"Select Product\" [clearable]=\"false\" formControlName=\"sendCountry\">\r\n\r\n                      <ng-template ng-option-tmp let-item=\"item\">\r\n                        <span [title]=\"item.country\">{{ item.country }}</span>\r\n                      </ng-template>\r\n\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Receive Country -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'receiveCountry'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Receive Country</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode\"\r\n                      placeholder=\"Select Product\" [clearable]=\"false\" formControlName=\"receiveCountry\">\r\n\r\n                      <ng-template ng-option-tmp let-item=\"item\">\r\n                        <span [title]=\"item.country\">{{ item.country }}</span>\r\n                      </ng-template>\r\n\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!--Transaction Product -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'transactionProduct'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Product</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"transactionProducts\" bindLabel=\"name\" bindValue=\"productCode\"\r\n                      placeholder=\"Select Product\" [clearable]=\"false\" formControlName=\"product\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Date Type -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'dateType'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Date Type</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select placeholder=\"- Please select -\" formControlName=\"dateType\" [clearable]=\"false\" required>\r\n                      <ng-option [value]=\"1\">\r\n                        Value Date\r\n                      </ng-option>\r\n                      <ng-option [value]=\"2\">\r\n                        Posting Date\r\n                      </ng-option>\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Date -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'date'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Date</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <div class=\"input-group date-group\">\r\n                      <input class=\"form-control dpicker\" placeholder=\"dd/mm/yyyy\" ngbDatepicker\r\n                        #dateInput=\"ngbDatepicker\" formControlName=\"date\" autocomplete=\"off\"\r\n                        [ngClass]=\"{'invalid-date': searchForm.get('date')?.invalid && (searchForm.get('date')?.touched || formValidationError)}\" />\r\n                      <button class=\"input-group-button cal\" type=\"button\" (click)=\"dateInput.toggle()\">\r\n                        <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\r\n                      </button>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- receiveCurrency -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'receiveCurrency'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Receive Currency</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"currencies\" bindValue=\"currencyCode\" placeholder=\"Select Receive Currency\"\r\n                      [clearable]=\"false\" formControlName=\"receiveCurrency\" required (change)=\"onBranchChange()\"\r\n                      [searchable]=\"true\" [searchFn]=\"currencySearch\" (open)=\"onOpen()\" (close)=\"onClose()\"\r\n                      [searchable]=\"isOpen\">\r\n\r\n                      <!-- Dropdown options -->\r\n                      <ng-template ng-option-tmp let-item=\"item\">\r\n                        <div\r\n                          [title]=\"item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency)\">\r\n                          {{ item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency) }}\r\n                        </div>\r\n                      </ng-template>\r\n\r\n                      <!-- Selected value -->\r\n                      <ng-template ng-label-tmp let-item=\"item\">\r\n                        <div\r\n                          [title]=\"item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency)\">\r\n                          {{ item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency) }}\r\n                        </div>\r\n                      </ng-template>\r\n\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Send BusinessPartner -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'sendBusinessPartner'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Send Client<span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"sendBusinessPartnerAgents\" bindLabel=\"name\" bindValue=\"id\"\r\n                      placeholder=\"Select Send Partner\" [clearable]=\"false\" formControlName=\"sendBusinessPartner\"\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('sendBusinessPartner')?.invalid && (searchForm.get('sendBusinessPartner')?.touched || formValidationError)}\">\r\n\r\n                      <ng-template ng-option-tmp let-item=\"item\">\r\n                        <span [title]=\"item.name\">{{ item.name }}</span>\r\n                      </ng-template>\r\n\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Recv BusinessPartner -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'recvBusinessPartner'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Recv Client<span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"recvBusinessPartnerAgents\" bindLabel=\"name\" bindValue=\"id\"\r\n                      placeholder=\"Select Recv Partner\" [clearable]=\"false\" formControlName=\"recvBusinessPartner\"\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('recvBusinessPartner')?.invalid && (searchForm.get('recvBusinessPartner')?.touched || formValidationError)}\">\r\n\r\n                      <ng-template ng-option-tmp let-item=\"item\">\r\n                        <span [title]=\"item.name\">{{ item.name }}</span>\r\n                      </ng-template>\r\n\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Transaction Status (Single-select) -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'transactionStatusSingleSelect'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Txn. Status<span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"transactionStatuses\" bindLabel=\"transactionStatus\" bindValue=\"transactionStatus\"\r\n                      placeholder=\"Select Status\" [clearable]=\"false\" formControlName=\"transactionStatus\" required\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('transactionStatus')?.invalid && (searchForm.get('transactionStatus')?.touched || formValidationError)}\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- For Trial Balance - Accounts Report -->\r\n\r\n              <!-- Business Line -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'businessLine'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Business Line</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"businessLines\" bindLabel=\"businessLine\" bindValue=\"businessLine\"\r\n                      placeholder=\"Select Business Line\" [clearable]=\"false\" formControlName=\"businessLine\"\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('businessLine')?.invalid && (searchForm.get('businessLine')?.touched || formValidationError)}\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Year -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'financialYear'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Financial Year</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"financialYears\" bindLabel=\"financialYear\" bindValue=\"financialYear\"\r\n                      placeholder=\"Select Year\" [clearable]=\"false\" formControlName=\"financialYear\"\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('financialYear')?.invalid && (searchForm.get('financialYear')?.touched || formValidationError)}\"\r\n                      (change)=\"onSelectFinancialYear()\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- From Month -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'fromMonth'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">From Month</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"fromMonths\" bindLabel=\"period\" bindValue=\"pOrder\"\r\n                      placeholder=\"Select From Month\" [clearable]=\"false\" formControlName=\"fromMonth\"\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('fromMonth')?.invalid && (searchForm.get('fromMonth')?.touched|| formValidationError)}\"\r\n                      (change)=\"onSelectFromMonth()\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- To Month -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'toMonth'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">To Month</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"toMonths\" bindLabel=\"pMonthName\" bindValue=\"pMonth\"\r\n                      placeholder=\"Select To Month\" [clearable]=\"false\" formControlName=\"toMonth\"\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('toMonth')?.invalid && (searchForm.get('toMonth')?.touched|| formValidationError)}\"\r\n                      (change)=\"onSelectToMonth()\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- From Day -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'fromDay'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">From Day <span class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"fromDays\" bindLabel=\"individualDay\" bindValue=\"individualDate\"\r\n                      placeholder=\"Select From Day\" [clearable]=\"false\" formControlName=\"fromDay\"\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('fromDay')?.invalid && (searchForm.get('fromDay')?.touched|| formValidationError)}\"\r\n                      (change)=\"onSelectFromDay()\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- To Day -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'toDay'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">To Day<span style=\"margin-left: 1px;\"\r\n                        class=\"text-danger\">*</span></label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"toDays\" bindLabel=\"pDate\" bindValue=\"individualDate\" placeholder=\"Select To Day\"\r\n                      [clearable]=\"false\" formControlName=\"toDay\"\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('toDay')?.invalid && (searchForm.get('toDay')?.touched|| formValidationError)}\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Date Type -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'dateTypeForTrialBalanceAccounts'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Date Type</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"dateTypes\" bindLabel=\"dateTypeLabel\" bindValue=\"dateTypeCode\"\r\n                      placeholder=\"Select Date Type\" formControlName=\"dateType\" [clearable]=\"false\" required\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('dateType')?.invalid && (searchForm.get('dateType')?.touched|| formValidationError)}\">\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n\r\n              <!-- Account Status -->\r\n              <div class=\"form-field\" *ngSwitchCase=\"'accountStatus'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Account Status</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select class=\"transaction-status-select\" [items]=\"accountStatuses\" bindLabel=\"statusName\"\r\n                      bindValue=\"statusCode\" [multiple]=\"true\" placeholder=\"Select Account Status\"\r\n                      formControlName=\"accountStatus\" [closeOnSelect]=\"false\" [clearable]=\"false\" [searchable]=\"false\"\r\n                      required\r\n                      [ngClass]=\"{'invalid-select': searchForm.get('accountStatus')?.invalid && (searchForm.get('accountStatus')?.touched|| formValidationError)}\">\r\n                      <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n                        <input type=\"checkbox\" [checked]=\"item$.selected\" /> {{ item.statusName }}\r\n                      </ng-template>\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <!--Summary Report-->\r\n                   <div class=\"form-field\" *ngSwitchCase=\"'summaryReport'\">\r\n                <div class=\"row align-items-center\">\r\n                  <div class=\"col-2\">\r\n                    <label class=\"form-label label-data\">Summary Report</label>\r\n                  </div>\r\n                  <div class=\"col-10\">\r\n                    <ng-select [items]=\"summaryReportTypes\" bindLabel=\"label\" bindValue=\"value\"\r\n                     [clearable]=\"false\" formControlName=\"summaryReport\">\r\n\r\n                      <ng-template ng-option-tmp let-item=\"item\">\r\n                        <span [title]=\"item.label\">{{ item.label }}</span>\r\n                      </ng-template>\r\n\r\n                    </ng-select>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n          </ng-container>\r\n\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"col-custom-1-5\">\r\n        <!-- View Report Button (Always at Top-Right) -->\r\n        <div class=\"form-field view-report-btn\">\r\n          <button type=\"submit\" class=\"btn btn-report\">View</button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</section>\r\n<hr>\r\n<!-- Error Messages -->\r\n<div class=\"alert alert-danger mt-3\" *ngIf=\"formValidationError && hasSearched\">\r\n  Please fill all mandatory fields\r\n</div>\r\n\r\n<div class=\"alert alert-danger mt-3\" *ngIf=\"errorMessage && loadingState === ComponentLoadingState.Error\">\r\n  {{ errorMessage }}\r\n</div>", styles: ["@charset \"UTF-8\";.filter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;grid-column:span 3}.form-field{display:flex;flex-direction:column;padding:0 4px 0 0!important;min-width:0}.col-custom-10-5{flex:0 0 87.5%!important;max-width:87.5%!important}.col-custom-1-5{flex:0 0 12.5%!important;max-width:12.5%!important;padding:0!important}::ng-deep .ng-select .ng-select-container .ng-value-container{overflow:hidden;flex-wrap:nowrap}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}::ng-deep .ng-select .ng-select-container{height:32px!important;min-height:32px!important;font-size:12px!important;align-items:center}.form-label{margin-bottom:0!important}.date-group{height:32px!important}::ng-deep .transaction-status-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:4px 0!important}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-top:0}::ng-deep .ng-dropdown-panel .ng-option{font-size:12px}.btn-report{border-radius:4px;background-color:#8091a5;color:#fff!important;font-size:14px!important;height:32px;padding:4px 15px!important;margin-left:15px!important;width:auto!important;margin-right:7px!important}::ng-deep .ng-select .ng-select-container:focus-within{box-shadow:0 0 5px 3px #1877f2!important}::ng-deep .ng-select .ng-select-container:focus{box-shadow:0 0 5px 3px #1877f2!important}.fa-calendar{--fa: \"\\f073\" !important}.dpicker{border:1px solid #ccc!important;font-size:12px!important;font-weight:400!important;height:32px!important}.dpicker:focus{box-shadow:0 0 5px 3px #1877f2!important}.cal{height:32px!important;background-color:#1877f2;margin-left:0!important}.cal:focus{box-shadow:none!important}.label-data{font-weight:600!important;font-size:.7rem!important;line-height:1rem}@media (max-width: 768px){.filter-grid{grid-template-columns:1fr;gap:12px}}.input-group-button{background:none!important;border:1px solid #1877F2!important;background-color:#1877f2!important;border-radius:0 3px 3px 0!important;min-width:35px;margin-left:1px;height:32px!important;cursor:pointer}.input-group-button .fa{color:#fff}.input-group-button:focus{box-shadow:0 0 5px 3px #009ee054}.input-group-button:focus{outline:none!important;box-shadow:none!important}.Breadcrumb h1,.Breadcrumb h2{font-weight:700}.row{display:flex;flex-wrap:wrap;margin-right:0;margin-left:0}.col-2{padding-left:0}.col-10{padding-right:0}.col-custom-10-5{padding-right:0!important;padding-left:0}::ng-deep .invalid-select.ng-select>.ng-select-container{background-color:#d521211a;border:2px solid red!important}.invalid-date{background-color:#d521211a;border:2px solid red!important}\n"] }]
         }], ctorParameters: function () { return [{ type: ReportService }, { type: i2.FormBuilder }, { type: ConfigService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { ReportName: [{
                 type: Input
             }], searchClicked: [{
@@ -3761,11 +3774,27 @@ class TransactionEnquiryComponent {
             { headerName: 'Send Client', field: 'sendAgent', flex: 1, minWidth: 120, tooltipField: 'sendAgent' },
             { headerName: 'Send Client Branch', field: 'sendAgtBranch', flex: 1, minWidth: 120, tooltipField: 'sendAgtBranch' },
             { headerName: 'Receive Client', field: 'recvAgent', flex: 1, minWidth: 120, tooltipField: 'recvAgent' },
+            { headerName: 'Sender Name', field: 'sendName', flex: 1, minWidth: 120, tooltipField: 'sendName',
+                valueFormatter: (params) => { if (!params.value)
+                    return ''; const value = params.value.toUpperCase(); if (value === 'CORPORATE')
+                    return 'YES'; if (value === 'INDIVIDUAL')
+                    return 'NO'; return ''; },
+                tooltipValueGetter: (params) => { if (!params.value)
+                    return ''; const value = params.value.toUpperCase(); if (value === 'CORPORATE')
+                    return 'YES'; if (value === 'INDIVIDUAL')
+                    return 'NO'; return ''; } },
             { headerName: 'Receive Client Branch', field: 'rcvAgtBranch', flex: 1, minWidth: 120, tooltipField: 'rcvAgtBranch' },
-            { headerName: 'Sender Name', field: 'sendName', flex: 1, minWidth: 120, tooltipField: 'sendName' },
             { headerName: 'Sender ID Type', field: 'sendIdType', flex: 1, minWidth: 90, tooltipField: 'sendIdType' },
+            { headerName: 'Benf. Name', field: 'benName', flex: 1, minWidth: 100, tooltipField: 'benName',
+                valueFormatter: (params) => { if (!params.value)
+                    return ''; const value = params.value.toUpperCase(); if (value === 'CORPORATE')
+                    return 'YES'; if (value === 'INDIVIDUAL')
+                    return 'NO'; return ''; },
+                tooltipValueGetter: (params) => { if (!params.value)
+                    return ''; const value = params.value.toUpperCase(); if (value === 'CORPORATE')
+                    return 'YES'; if (value === 'INDIVIDUAL')
+                    return 'NO'; return ''; } },
             { headerName: 'Sender ID Number', field: 'sendIdNumber', flex: 1, minWidth: 85, tooltipField: 'sendIdNumber' },
-            { headerName: 'Benf. Name', field: 'benName', flex: 1, minWidth: 100, tooltipField: 'benName' },
             { headerName: 'Receive Currency', field: 'payOutCurrency', flex: 1, minWidth: 80, tooltipField: 'payOutCurrency' },
             { headerName: 'Receive Amount', field: 'payOutAmount', flex: 1, minWidth: 100, cellClass: 'ag-right-aligned-cell ', tooltipField: 'payOutAmount' },
             { headerName: 'Send Currency', field: 'payInCurrency', flex: 1, minWidth: 70, tooltipField: 'payInCurrency' },
@@ -4015,6 +4044,26 @@ class BranchActivitySendReportComponent {
             { field: 'product', headerName: 'Product', flex: 0.5, wrapText: true, autoHeight: true, minWidth: 80, width: 120, tooltipField: 'product' },
             { field: 'sendAgentBranchCode', headerName: 'SendClient BranchCode', flex: 1, wrapText: true, autoHeight: true, minWidth: 90, width: 120, tooltipField: 'sendAgentBranchCode' },
             { field: 'receiveAgentCode', headerName: 'Receive ClientCode', flex: 1, wrapText: true, autoHeight: true, minWidth: 90, width: 70, tooltipField: 'receiveAgentCode' },
+            { headerName: 'Is Sender Corporate', field: 'senderType', flex: 1, minWidth: 80,
+                valueFormatter: (params) => { if (!params.value)
+                    return ''; const value = params.value.toUpperCase(); if (value === 'CORPORATE')
+                    return 'YES'; if (value === 'INDIVIDUAL')
+                    return 'NO'; return ''; },
+                tooltipValueGetter: (params) => { if (!params.value)
+                    return ''; const value = params.value.toUpperCase(); if (value === 'CORPORATE')
+                    return 'YES'; if (value === 'INDIVIDUAL')
+                    return 'NO'; return ''; } },
+            { headerName: 'Sender Name', field: 'senderName', flex: 1, minWidth: 120, tooltipField: 'senderName' },
+            { headerName: 'Is Beneficiary Corporate', field: 'beneficiaryType', flex: 1, minWidth: 80,
+                valueFormatter: (params) => { if (!params.value)
+                    return ''; const value = params.value.toUpperCase(); if (value === 'CORPORATE')
+                    return 'YES'; if (value === 'INDIVIDUAL')
+                    return 'NO'; return ''; },
+                tooltipValueGetter: (params) => { if (!params.value)
+                    return ''; const value = params.value.toUpperCase(); if (value === 'CORPORATE')
+                    return 'YES'; if (value === 'INDIVIDUAL')
+                    return 'NO'; return ''; } },
+            { headerName: 'Beneficiary Name', field: 'beneficiaryName', flex: 1, minWidth: 100, tooltipField: 'beneficiaryName' },
             { field: 'payoutCCcode', headerName: 'ReceiveCcy Code', flex: 1, wrapText: true, autoHeight: true, minWidth: 90, width: 110, tooltipField: 'payoutCCcode' },
             { field: 'payoutAmount', headerName: 'Receive Amount', flex: 1, wrapText: true, autoHeight: true, minWidth: 90, maxWidth: 120, cellClass: 'ag-right-aligned-cell compact-cell', tooltipField: 'payoutAmount' },
             { field: 'payinCCcode', headerName: 'SendCcy Code', flex: 1, wrapText: true, autoHeight: true, minWidth: 90, maxWidth: 90, tooltipField: 'payinCCcode' },
@@ -4463,6 +4512,26 @@ class CancellationTransactionReportComponent {
             { headerName: 'Send Client Branch Code', field: 'sendAgentBranchCode', flex: 1, minWidth: 90, tooltipField: 'sendAgentBranchCode' },
             { headerName: 'Send Principal Client Code (If Applicable)', field: 'sendPrincipalAgentCode', flex: 1, minWidth: 90, tooltipField: 'sendPrincipalAgentCode' },
             { headerName: 'Receive Client Code', field: 'recvAGTcode', flex: 1, minWidth: 80, tooltipField: 'recvAGTcode' },
+            { headerName: 'Is Sender Corporate', field: 'senderType', flex: 1, minWidth: 80,
+                valueFormatter: (params) => { if (!params.value)
+                    return ''; const value = params.value.toUpperCase(); if (value === 'CORPORATE')
+                    return 'YES'; if (value === 'INDIVIDUAL')
+                    return 'NO'; return ''; },
+                tooltipValueGetter: (params) => { if (!params.value)
+                    return ''; const value = params.value.toUpperCase(); if (value === 'CORPORATE')
+                    return 'YES'; if (value === 'INDIVIDUAL')
+                    return 'NO'; return ''; } },
+            { headerName: 'Sender Name', field: 'senderName', flex: 1, minWidth: 120, tooltipField: 'senderName' },
+            { headerName: 'Is Beneficiary Corporate', field: 'beneficiaryType', flex: 1, minWidth: 80,
+                valueFormatter: (params) => { if (!params.value)
+                    return ''; const value = params.value.toUpperCase(); if (value === 'CORPORATE')
+                    return 'YES'; if (value === 'INDIVIDUAL')
+                    return 'NO'; return ''; },
+                tooltipValueGetter: (params) => { if (!params.value)
+                    return ''; const value = params.value.toUpperCase(); if (value === 'CORPORATE')
+                    return 'YES'; if (value === 'INDIVIDUAL')
+                    return 'NO'; return ''; } },
+            { headerName: 'Beneficiary Name', field: 'beneficiaryName', flex: 1, minWidth: 100, tooltipField: 'beneficiaryName' },
             { headerName: 'Receive CcyCode', field: 'payoutCCcode', flex: 1, minWidth: 65, tooltipField: 'payoutCCcode' },
             { headerName: 'Receive Amount', field: 'payOutAmount', flex: 1, minWidth: 82, cellClass: 'ag-right-aligned-cell', tooltipField: 'payOutAmount' },
             { headerName: 'Send CcyCode', field: 'payinCCcode', flex: 1, minWidth: 69, tooltipField: 'payinCCcode' },
@@ -5703,6 +5772,24 @@ class AccountingReportComponent {
             { headerName: 'Principle SendClient (If Applicable)', field: 'principleSendClient', tooltipField: 'principleSendClient', width: 90, minWidth: 80, maxWidth: 110 },
             { headerName: 'ReceiveClient', field: 'receiveClient', tooltipField: 'receiveClient' },
             { headerName: 'Principle ReceiveClient (If Applicable)', field: 'principleReceiveClient', tooltipField: 'principleReceiveClient', width: 100, minWidth: 90, maxWidth: 120 },
+            { headerName: 'Is Sender Corporate', field: 'senderType', flex: 1, minWidth: 80,
+                valueFormatter: (params) => { if (!params.value)
+                    return ''; const value = params.value.toUpperCase(); if (value === 'CORPORATE')
+                    return 'YES'; if (value === 'INDIVIDUAL')
+                    return 'NO'; return ''; },
+                tooltipValueGetter: (params) => { if (!params.value)
+                    return ''; const value = params.value.toUpperCase(); if (value === 'CORPORATE')
+                    return 'YES'; if (value === 'INDIVIDUAL')
+                    return 'NO'; return ''; } },
+            { headerName: 'Is Beneficiary Corporate', field: 'beneficiaryType', flex: 1, minWidth: 80,
+                valueFormatter: (params) => { if (!params.value)
+                    return ''; const value = params.value.toUpperCase(); if (value === 'CORPORATE')
+                    return 'YES'; if (value === 'INDIVIDUAL')
+                    return 'NO'; return ''; },
+                tooltipValueGetter: (params) => { if (!params.value)
+                    return ''; const value = params.value.toUpperCase(); if (value === 'CORPORATE')
+                    return 'YES'; if (value === 'INDIVIDUAL')
+                    return 'NO'; return ''; } },
             { headerName: 'ReceiveCcy', field: 'receiveCurrency', tooltipField: 'receiveCurrency' },
             { headerName: 'AmountPaid', field: 'amountPaid', tooltipField: 'amountPaid', cellClass: 'ag-right-aligned-cell' },
             { headerName: 'SendCcy', field: 'sendCurrency', tooltipField: 'sendCurrency', },
@@ -6626,7 +6713,7 @@ class TrialBalanceAccountsReportComponent {
         this.dateType = '';
         this.fromDate = '';
         this.toDate = '';
-        this.businessUnit = '';
+        this.businessLine = '';
         this.reportUser = '';
         this.reportTime = '';
         this.reportPeriod = '';
@@ -6658,7 +6745,6 @@ class TrialBalanceAccountsReportComponent {
             'total-row': params => params.data?.isTotalRow
         };
         this.columnDefs = [
-            { headerName: 'Business Unit', field: 'companyFullName', tooltipField: 'companyFullName', minWidth: 70, maxWidth: 100 },
             { headerName: 'COA Code', field: 'coaCode', tooltipField: 'coaCode', minWidth: 60, maxWidth: 100 },
             { headerName: 'Account Code', field: 'accountCode', tooltipField: 'accountCode', minWidth: 80, maxWidth: 100 },
             { headerName: 'Account Description', field: 'accountDescription', tooltipField: 'accountDescription', minWidth: 180, maxWidth: 230 },
@@ -6669,23 +6755,8 @@ class TrialBalanceAccountsReportComponent {
             { headerName: 'Closing Balance Local Amount', field: 'closingBalance', type: 'numericColumn', tooltipField: 'closingBalance' }
         ];
         this.rowData = [];
-        this.businessUnits = [];
-    }
-    ngOnInit() {
-        this.loadingState = ComponentLoadingStates.Loading;
-        this.reportService.GetBusinessUnitForTrialBalanceAccountsReport().subscribe({
-            next: (res) => {
-                this.businessUnits = res;
-                this.loadingState = ComponentLoadingStates.Complete;
-            }, error: (err) => {
-                console.error('Error fetching business units:', err);
-                this.loadingState = ComponentLoadingStates.Error;
-            }, complete: () => {
-                console.log("getting business units api completed");
-                this.loadingState = ComponentLoadingStates.Complete;
-            }
-        });
     }
+    ngOnInit() { }
     getTrialBalanceAccountsReport(req) {
         this.dataReady = false;
         this.trialBalanceReport = null;
@@ -6700,7 +6771,7 @@ class TrialBalanceAccountsReportComponent {
                 this.accountStatus = req.accountStatus;
                 this.currency = req.currency;
                 this.dateType = req.dateType == "VD" ? "Value Date" : "Posting Date";
-                this.businessUnit = this.businessUnits.find((bu) => bu.companyCode === req.businessUnit).companyFullName;
+                this.businessLine = req.businessLine;
                 this.rowData = this.flattenReport(report).map(acc => ({
                     ...acc,
                     openingBalance: Number(acc.openingBalance).toFixed(3),
@@ -6720,7 +6791,7 @@ class TrialBalanceAccountsReportComponent {
                     ['Currency:', this.currency],
                     ['Date Type:', this.dateType],
                     ['From Date:', this.fromDate],
-                    ['Business Unit:', this.businessUnit],
+                    ['Business Line:', this.businessLine],
                     ['To Date:', this.toDate],
                 ];
                 this.searchCriteria = searchCriteria;
@@ -6738,7 +6809,6 @@ class TrialBalanceAccountsReportComponent {
                 sub.coaGroups.forEach(coa => {
                     coa.accounts.forEach(account => rows.push(account));
                     rows.push({
-                        companyFullName: '',
                         coaCode: '',
                         accountCode: 'Total:',
                         accountDescription: `${coa.coaDescription}`,
@@ -6751,7 +6821,6 @@ class TrialBalanceAccountsReportComponent {
                     });
                 });
                 rows.push({
-                    companyFullName: '',
                     coaCode: '',
                     accountCode: 'Total:',
                     accountDescription: `${sub.subCOADescription}`,
@@ -6764,7 +6833,6 @@ class TrialBalanceAccountsReportComponent {
                 });
             });
             rows.push({
-                companyFullName: '',
                 coaCode: '',
                 accountCode: 'Total:',
                 accountDescription: `${main.mainCOADescription}`,
@@ -6777,7 +6845,6 @@ class TrialBalanceAccountsReportComponent {
             });
         });
         rows.push({
-            companyFullName: '',
             coaCode: 'TOTAL:',
             accountCode: '',
             accountDescription: '',
@@ -6927,7 +6994,6 @@ class TrialBalanceAccountsReportComponent {
         // --- headers ---
         const headers = [
             'Sr No',
-            'Business Unit',
             'COA Code', 'Account Code', 'Account Description',
             'Opening Balance Local Amt', 'Debits Local Amt', 'Credits Local Amt',
             'Net Movement Local Amt', 'Closing Balance Local Amt'
@@ -6936,7 +7002,6 @@ class TrialBalanceAccountsReportComponent {
         // --- rows ---
         const rows = flatReport.map((acc, i) => [
             i + 1,
-            acc.companyFullName,
             acc.coaCode,
             acc.accountCode,
             acc.accountDescription,
@@ -6948,16 +7013,15 @@ class TrialBalanceAccountsReportComponent {
         ]);
         // --- column widths ---
         const columnStyles = {
-            0: { cellWidth: 13 },
+            0: { cellWidth: 15 },
             1: { cellWidth: 25 },
             2: { cellWidth: 25 },
-            3: { cellWidth: 25 },
-            4: { cellWidth: 60 },
+            3: { cellWidth: 70 },
+            4: { cellWidth: 30 },
             5: { cellWidth: 30 },
-            6: { cellWidth: 28 },
-            7: { cellWidth: 28 },
-            8: { cellWidth: 28 },
-            9: { cellWidth: 30 },
+            6: { cellWidth: 30 },
+            7: { cellWidth: 30 },
+            8: { cellWidth: 30 },
         };
         // --- draw table ---
         doc.autoTable({
@@ -6988,9 +7052,9 @@ class TrialBalanceAccountsReportComponent {
                 if (isTotalRow)
                     data.cell.styles.fontStyle = 'bold';
                 // highlight negatives in red
-                if (data.column.index > 4) {
+                if (data.column.index > 3) {
                     const keyMap = ["openingBalance", "debit", "credit", "netMovement", "closingBalance"];
-                    const key = keyMap[data.column.index - 5];
+                    const key = keyMap[data.column.index - 4];
                     const raw = rowData[key];
                     const num = Number(raw);
                     if (!isNaN(num) && num < 0) {
@@ -7025,7 +7089,7 @@ class TrialBalanceAccountsReportComponent {
         }
         // --- title ---
         const title = 'Xpress Money - MI Accounts';
-        sheet.mergeCells(1, 3, 1, 10);
+        sheet.mergeCells(1, 3, 1, 9);
         const titleCell = sheet.getCell('C1');
         titleCell.value = title;
         titleCell.font = { size: 15, bold: true };
@@ -7079,7 +7143,6 @@ class TrialBalanceAccountsReportComponent {
         // --- headers ---
         const headers = [
             'Sr No',
-            'Business Unit',
             'COA Code', 'Account Code', 'Account Description',
             'Opening Balance Local Amt', 'Debits Local Amt', 'Credits Local Amt',
             'Net Movement Local Amt', 'Closing Balance Local Amt'
@@ -7102,7 +7165,6 @@ class TrialBalanceAccountsReportComponent {
             });
             return [
                 idx + 1,
-                acc.companyFullName,
                 acc.coaCode,
                 acc.accountCode,
                 acc.accountDescription,
@@ -7112,28 +7174,28 @@ class TrialBalanceAccountsReportComponent {
         });
         rows.forEach(r => {
             const row = sheet.getRow(currentRow++);
-            r.slice(0, 10).forEach((val, i) => {
+            r.slice(0, 9).forEach((val, i) => {
                 const cell = row.getCell(i + 1);
                 // convert back to number for Excel math but show 3 decimals
-                if (i > 4 && val !== '')
+                if (i > 3 && val !== '')
                     cell.value = parseFloat(val.toString());
                 else
                     cell.value = val;
                 cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };
                 // bold total rows
-                if (r[10])
+                if (r[9])
                     cell.font = { bold: true };
                 // negative numbers red
-                if (i > 4 && typeof cell.value === 'number' && cell.value < 0) {
-                    cell.font = { color: { argb: 'FF0000' }, bold: r[10] ? true : undefined };
+                if (i > 3 && typeof cell.value === 'number' && cell.value < 0) {
+                    cell.font = { color: { argb: 'FF0000' }, bold: r[9] ? true : undefined };
                 }
                 // set number format to show 3 decimals
-                if (i > 4)
+                if (i > 3)
                     cell.numFmt = '0.000';
             });
         });
         // --- column widths ---
-        const widths = [8, 16, 15, 15, 40, 20, 20, 20, 20, 20];
+        const widths = [8, 15, 15, 40, 20, 20, 20, 20, 20];
         widths.forEach((w, i) => sheet.getColumn(i + 1).width = w);
         // --- save file ---
         workbook.xlsx.writeBuffer().then(buffer => {
@@ -7156,7 +7218,6 @@ class TrialBalanceAccountsReportComponent {
         // --- table headers (add Sr No at start) ---
         const headers = [
             'Sr No',
-            'Business Unit',
             'COA Code', 'Account Code', 'Account Description',
             'Opening Balance Local Amt', 'Debits Local Amt', 'Credits Local Amt',
             'Net Movement Local Amt', 'Closing Balance Local Amt'
@@ -7164,7 +7225,6 @@ class TrialBalanceAccountsReportComponent {
         // --- table rows (prepend Sr No) ---
         const rows = this.flattenReport(this.trialBalanceReport).map((acc, index) => [
             index + 1,
-            acc.companyFullName,
             acc.coaCode,
             acc.accountCode,
             acc.accountDescription,
@@ -7232,9 +7292,9 @@ class TrialBalanceAccountsReportComponent {
             fromDate: modal.fromDay,
             toDate: modal.toDay,
             accountStatus: modal.accountStatus.join(','),
-            businessUnit: modal.businessUnit,
+            businessLine: modal.businessLine,
             currency: modal.currency,
-            companyCode: modal.businessUnit,
+            companyCode: "BH",
             reportPeriod: `${formatDate(modal.fromDate, 'dd/MM/yyyy', 'en-US')} - ${formatDate(modal.toDate, 'dd/MM/yyyy', 'en-US')}`,
         };
         this.getTrialBalanceAccountsReport(req);
@@ -7286,6 +7346,24 @@ class BranchActivitySendSummaryReportComponent {
                 }
             },
             { field: 'product', headerName: 'Product', flex: 1, wrapText: true, autoHeight: true, minWidth: 80, width: 120, tooltipField: 'product' },
+            { headerName: 'Is Sender Corporate', field: 'senderType', flex: 1, minWidth: 80,
+                valueFormatter: (params) => { if (!params.value)
+                    return ''; const value = params.value.toUpperCase(); if (value === 'CORPORATE')
+                    return 'YES'; if (value === 'INDIVIDUAL')
+                    return 'NO'; return ''; },
+                tooltipValueGetter: (params) => { if (!params.value)
+                    return ''; const value = params.value.toUpperCase(); if (value === 'CORPORATE')
+                    return 'YES'; if (value === 'INDIVIDUAL')
+                    return 'NO'; return ''; } },
+            { headerName: 'Is Beneficiary Corporate', field: 'beneficiaryType', flex: 1, minWidth: 80,
+                valueFormatter: (params) => { if (!params.value)
+                    return ''; const value = params.value.toUpperCase(); if (value === 'CORPORATE')
+                    return 'YES'; if (value === 'INDIVIDUAL')
+                    return 'NO'; return ''; },
+                tooltipValueGetter: (params) => { if (!params.value)
+                    return ''; const value = params.value.toUpperCase(); if (value === 'CORPORATE')
+                    return 'YES'; if (value === 'INDIVIDUAL')
+                    return 'NO'; return ''; } },
             { field: 'payoutCCcode', headerName: 'Receive Currency', flex: 1, wrapText: true, autoHeight: true, minWidth: 90, width: 110, tooltipField: 'payoutCCcode' },
             { field: 'payoutAmount', headerName: 'Receive Amount', flex: 1, wrapText: true, autoHeight: true, minWidth: 90, maxWidth: 120, cellClass: 'ag-right-aligned-cell compact-cell', tooltipField: 'payoutAmount' },
             { field: 'payinCCcode', headerName: 'Send Currency', flex: 1, wrapText: true, autoHeight: true, minWidth: 90, maxWidth: 90, tooltipField: 'payinCCcode' },
@@ -7951,6 +8029,7 @@ class TransactionMonitoringReportComponent {
         this.showMessage = false;
         this.noDataFound = false;
         this.isFormValid = false;
+        this.clearSearch = false;
         this.columnDefs = [
             { field: 'businessDateTime', headerName: 'Business Date', flex: 1, headerClass: 'ag-left-aligned-header', minWidth: 70, wrapText: true, autoHeight: true, tooltipField: 'businessDateTime' },
             { field: 'transactionDateTime', headerName: 'Transaction Date', flex: 2, headerClass: 'ag-left-aligned-header', minWidth: 100, wrapText: true, autoHeight: true, tooltipField: 'transactionDateTime' },
@@ -8031,7 +8110,9 @@ class TransactionMonitoringReportComponent {
                 receiveCountry: params['receiveCountry'],
                 toDate: params['toDate'],
                 fromDate: params['fromDate'],
-                isRealtime: params['isRealtime'] === 'true' || params['isRealtime'] === true
+                isRealtime: params['isRealtime'] === 'true' || params['isRealtime'] === true,
+                loggedInTime: params['loggedInTime'],
+                count: Number(params['count'])
             };
         }
         else {
@@ -8150,13 +8231,27 @@ class TransactionMonitoringReportComponent {
         return '';
     }
     handleSearch(criteria) {
+        if (this.initialFilters != null) {
+            const realtimeStatuses = ['Paid', 'PaidCancelled', 'Cancelled', 'Void', 'Rejected'];
+            const isTerminatingStatus = realtimeStatuses.includes(this.initialFilters?.transactionStatus);
+            const isZeroCount = this.initialFilters?.count === 0;
+            // block api call
+            if (isTerminatingStatus && isZeroCount && (!criteria.modal.fromDate && !criteria.modal.toDate)) {
+                this.noDataFound = true;
+                this.showReport = true;
+                this.loadingState = ComponentLoadingStates.Complete;
+                this.clearSearch = false;
+                this.showMessage = true;
+                return;
+            }
+        }
         this.searchCriteria = criteria.searchCriteria;
         this.reportDate = new Date().toISOString();
         this.reportDate = formatDate(this.reportDate, 'dd/MM/yyyy hh:mm a', 'en-US');
         const modal = criteria.modal;
         this.user = criteria.sysUserID;
         // this.fromDate = formatDate(modal.fromDate, 'dd/MM/yyyy hh:mm a', 'en-US').slice(0, 10);
-        //this.toDate = formatDate(modal.toDate, 'dd/MM/yyyy hh:mm a', 'en-US').slice(0, 10);
+        // this.toDate = formatDate(modal.toDate, 'dd/MM/yyyy hh:mm a', 'en-US').slice(0, 10);
         this.fromDate = modal.fromDate
             ? formatDate(modal.fromDate, 'dd/MM/yyyy hh:mm a', 'en-US').slice(0, 10)
             : null;
@@ -8166,7 +8261,7 @@ class TransactionMonitoringReportComponent {
         console.log(modal);
         // Code For Meta Data
         this.leftData = {
-            //  'Report Period': this.fromDate + " - " + this.toDate,
+            // 'Report Period': this.fromDate + " - " + this.toDate,
             'Report Period': this.fromDate && this.toDate
                 ? `${this.fromDate} - ${this.toDate}`
                 : ''
@@ -8184,9 +8279,11 @@ class TransactionMonitoringReportComponent {
             "PayoutCurrency": modal.receiveCurrency,
             "TransactionType": modal.product,
             "BranchCode": modal.branch,
-            "IsrealTime": criteria.isRealtime
+            "IsrealTime": this.initialFilters?.isRealtime ?? false,
+            "LoggedInTime": this.initialFilters?.loggedInTime ?? null
         };
         this.showMessage = true;
+        this.clearSearch = true;
         this.loadingState = ComponentLoadingStates.Loading;
         this.reportService.getTransactionMonitoringReport(searchData).subscribe({
             next: (data) => {
@@ -8201,10 +8298,12 @@ class TransactionMonitoringReportComponent {
             },
             error: (err) => {
                 this.loadingState = ComponentLoadingStates.Complete;
+                this.clearSearch = false;
             },
             complete: () => {
                 this.loadingState = ComponentLoadingStates.Complete;
                 this.showReport = true;
+                this.clearSearch = false;
             }
         });
     }