@sachin9822/reports-lib 0.0.211 → 0.0.212

package/src/lib/shared/search-filter/search-filter.component.html

@@ -0,0 +1,601 @@
+<h6 class="Breadcrumb">
+  <a class="BreadCrumbLink" [routerLink]="['/reports']">
+    <h1>Reports</h1>
+  </a>
+  <a href="BreadCrumbLink"></a>
+  <span class="BreadCrumbArrow"></span>
+  <a class="BreadCrumbLink">
+    <h2>{{ ReportName }}</h2>
+  </a>
+</h6>
+
+<app-loader *ngIf="loadingState === ComponentLoadingState.Loading"></app-loader>
+<section>
+  <form [formGroup]="searchForm" (ngSubmit)="onSearch()">
+    <div class="row">
+      <div class="col-custom-10-5">
+        <div class="filter-grid">
+
+          <!-- Dynamically render filters in order -->
+          <ng-container *ngFor="let field of visibleFields">
+            <ng-container [ngSwitch]="field">
+
+              <!-- Client -->
+              <div class="form-field" *ngSwitchCase="'client'">
+                <div class="row align-items-center">
+                  <div class="col-2">
+                    <label class="form-label label-data">Client<span class="text-danger">*</span></label>
+                  </div>
+                  <div class="col-10">
+                    <ng-select [items]="clients1" bindLabel="businessPartnerName" bindValue="businessPartnerCode"
+                      placeholder="Select Client" [clearable]="false" formControlName="client" required
+                      [ngClass]="{'invalid-select': searchForm.get('client')?.invalid && (searchForm.get('client')?.touched || formValidationError)}"
+                      (change)="onClientChange()" (open)="onOpen()" (close)="onClose()" [searchable]="isOpen">
+
+                      <ng-template ng-option-tmp let-item="item">
+                        <span [title]="item.businessPartnerName">{{ item.businessPartnerName }}</span>
+                      </ng-template>
+
+                    </ng-select>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Branch -->
+              <div class="form-field" *ngSwitchCase="'branch'">
+                <div class="row align-items-center">
+                  <div class="col-2">
+                    <label class="form-label label-data">Branch<span class="text-danger">*</span></label>
+                  </div>
+                  <div class="col-10">
+                    <ng-select [items]="branches" bindLabel="businessPartnerBranch" bindValue="branchCode"
+                      placeholder="Select Branch" [clearable]="false" formControlName="branch" required
+                      [ngClass]="{'invalid-select': searchForm.get('branch')?.invalid && (searchForm.get('branch')?.touched || formValidationError)}"
+                      (change)="onBranchChange()" (open)="onOpen()" (close)="onClose()" [searchable]="isOpen">
+                      <ng-template ng-option-tmp let-item="item">
+                        <span [title]="item.businessPartnerBranch">{{ item.businessPartnerBranch }}</span>
+                      </ng-template>
+
+                    </ng-select>
+                  </div>
+                </div>
+              </div>
+
+              <!-- From Date -->
+              <div class="form-field" *ngSwitchCase="'fromDate'">
+                <div class="row align-items-center">
+                  <div class="col-2">
+                    <label class="form-label label-data">From Date<span class="text-danger">*</span></label>
+                  </div>
+                  <div class="col-10">
+                    <div class="input-group date-group">
+                      <input class="form-control dpicker" placeholder="dd/mm/yyyy" ngbDatepicker
+                        #fromDateInput="ngbDatepicker" formControlName="fromDate" autocomplete="off"
+                        [ngClass]="{'invalid-date':searchForm.get('fromDate')?.invalid && (searchForm.get('fromDate')?.touched || formValidationError)}" />
+                      <button class="input-group-button cal" (click)="fromDateInput.toggle()" type="button">
+                        <i class="fa fa-calendar" aria-hidden="true"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- To Date -->
+              <div class="form-field" *ngSwitchCase="'toDate'">
+                <div class="row align-items-center">
+                  <div class="col-2">
+                    <label class="form-label label-data">To Date<span class="text-danger">*</span></label>
+                  </div>
+                  <div class="col-10">
+                    <div class="input-group date-group">
+                      <input class="form-control dpicker" placeholder="dd/mm/yyyy" ngbDatepicker
+                        #toDateInput="ngbDatepicker" formControlName="toDate" [minDate]="disabledDate"
+                        autocomplete="off"
+                        [ngClass]="{'invalid-date':searchForm.get('toDate')?.invalid && (searchForm.get('toDate')?.touched || formValidationError)}" />
+                      <button class="input-group-button cal" (click)="toDateInput.toggle()" type="button">
+                        <i class="fa fa-calendar" aria-hidden="true"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Product -->
+              <div class="form-field" *ngSwitchCase="'product'">
+                <div class="row align-items-center">
+                  <div class="col-2">
+                    <label class="form-label label-data">Product</label>
+                  </div>
+                  <div class="col-10">
+                    <ng-select [items]="products" bindLabel="productName" bindValue="productCode"
+                      placeholder="Select Product" [clearable]="false" formControlName="product" (open)="onOpen()"
+                      (close)="onClose()" [searchable]="isOpen">
+                    </ng-select>
+                  </div>
+                </div>
+              </div>
+
+              <!-- User -->
+              <div class="form-field" *ngSwitchCase="'userId'">
+                <div class="row align-items-center">
+                  <div class="col-2">
+                    <label class="form-label label-data">User<span class="text-danger">*</span></label>
+                  </div>
+                  <div class="col-10">
+                    <ng-select [items]="users" bindLabel="userName" bindValue="userId" placeholder="Select User"
+                      [clearable]="false" formControlName="userId" required (open)="onOpen()" (close)="onClose()"
+                      [searchable]="isOpen"
+                      [ngClass]="{'invalid-select': searchForm.get('userId')?.invalid && (searchForm.get('userId')?.touched || formValidationError)}">
+                    </ng-select>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Currency -->
+              <div class="form-field" *ngSwitchCase="'currency'">
+                <div class="row align-items-center">
+                  <div class="col-2">
+                    <label class="form-label label-data">Currency</label>
+                  </div>
+                  <div class="col-10">
+                    <ng-select [items]="currencies" bindValue="currencyCode" placeholder="Select Currency"
+                      [clearable]="false" formControlName="currency" [searchable]="true" [searchFn]="currencySearch"
+                      (open)="onOpen()" (close)="onClose()" [searchable]="isOpen">
+
+                      <!-- Template for dropdown options -->
+                      <ng-template ng-option-tmp let-item="item">
+                        <div
+                          [title]="item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency)">
+                          {{ item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency) }}
+                        </div>
+                      </ng-template>
+
+                      <!-- Template for selected value -->
+                      <ng-template ng-label-tmp let-item="item">
+                        <div
+                          [title]="item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency)">
+                          {{ item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency) }}
+                        </div>
+                      </ng-template>
+
+                    </ng-select>
+                  </div>
+                </div>
+              </div>
+
+              <!--Send Currency -->
+              <div class="form-field" *ngSwitchCase="'sendCurrency'">
+                <div class="row align-items-center">
+                  <div class="col-2">
+                    <label class="form-label label-data">Send Currency</label>
+                  </div>
+                  <div class="col-10">
+                    <ng-select [items]="currencies" bindValue="currencyCode" placeholder="Select Currency"
+                      [clearable]="false" formControlName="currency" [searchable]="true" [searchFn]="currencySearch"
+                      (open)="onOpen()" (close)="onClose()" [searchable]="isOpen">
+
+                      <!-- Template for dropdown options -->
+                      <ng-template ng-option-tmp let-item="item">
+                        <div
+                          [title]="item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency)">
+                          {{ item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency) }}
+                        </div>
+                      </ng-template>
+
+                      <!-- Template for selected value -->
+                      <ng-template ng-label-tmp let-item="item">
+                        <div
+                          [title]="item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency)">
+                          {{ item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency) }}
+                        </div>
+                      </ng-template>
+
+                    </ng-select>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Transaction Status (Multi-select) -->
+              <div class="form-field" *ngSwitchCase="'transactionStatus'">
+                <div class="row align-items-center">
+                  <div class="col-2">
+                    <label class="form-label label-data">Txn. Status<span class="text-danger">*</span></label>
+                  </div>
+                  <div class="col-10">
+                    <ng-select class="transaction-status-select" [items]="transactionStatuses"
+                      bindLabel="transactionStatus" bindValue="transactionStatus" [multiple]="true"
+                      placeholder="Select Transaction Status" formControlName="transactionStatus"
+                      [closeOnSelect]="false" [clearable]="false" [searchable]="false" required
+                      [ngClass]="{'invalid-select': searchForm.get('transactionStatus')?.invalid && (searchForm.get('transactionStatus')?.touched || formValidationError)}">
+                      <ng-template ng-option-tmp let-item="item" let-item$="item$">
+                        <input type="checkbox" [checked]="item$.selected" /> {{ item.transactionStatus }}
+                      </ng-template>
+                    </ng-select>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Transaction No -->
+              <div class="form-field" *ngSwitchCase="'transactionNo'">
+                <div class="row align-items-center">
+                  <div class="col-2">
+                    <label class="form-label label-data">Txn. Number</label>
+                  </div>
+                  <div class="col-10">
+                    <input class="form-control dpicker" formControlName="transactionNo"
+                      placeholder="Enter transaction number" />
+                  </div>
+                </div>
+              </div>
+
+              <!-- Value Date -->
+              <div class="form-field" *ngSwitchCase="'valueDate'">
+                <div class="row align-items-center">
+                  <div class="col-3">
+                    <label class="form-label label-data">Value Date<span class="text-danger">*</span></label>
+                  </div>
+                  <div class="col-9">
+                    <div class="input-group">
+                      <input class="form-control dpicker" placeholder="dd/mm/yyyy" ngbDatepicker
+                        #toDateInput="ngbDatepicker" formControlName="toDate" autocomplete="off"
+                        [ngClass]="{'invalid-date':searchForm.get('date')?.invalid && (searchForm.get('date')?.touched || formValidationError)}" />
+                      <button class="btn btn-outline-secondary" type="button" (click)="toDateInput.toggle()">
+                        <i class="fa fa-calendar"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Send Country -->
+              <div class="form-field" *ngSwitchCase="'sendCountry'">
+                <div class="row align-items-center">
+                  <div class="col-2">
+                    <label class="form-label label-data">Send Country</label>
+                  </div>
+                  <div class="col-10">
+                    <ng-select [items]="countries" bindLabel="country" bindValue="countryCode"
+                      placeholder="Select Product" [clearable]="false" formControlName="sendCountry">
+
+                      <ng-template ng-option-tmp let-item="item">
+                        <span [title]="item.country">{{ item.country }}</span>
+                      </ng-template>
+
+                    </ng-select>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Receive Country -->
+              <div class="form-field" *ngSwitchCase="'receiveCountry'">
+                <div class="row align-items-center">
+                  <div class="col-2">
+                    <label class="form-label label-data">Receive Country</label>
+                  </div>
+                  <div class="col-10">
+                    <ng-select [items]="countries" bindLabel="country" bindValue="countryCode"
+                      placeholder="Select Product" [clearable]="false" formControlName="receiveCountry">
+
+                      <ng-template ng-option-tmp let-item="item">
+                        <span [title]="item.country">{{ item.country }}</span>
+                      </ng-template>
+
+                    </ng-select>
+                  </div>
+                </div>
+              </div>
+
+              <!--Transaction Product -->
+              <div class="form-field" *ngSwitchCase="'transactionProduct'">
+                <div class="row align-items-center">
+                  <div class="col-2">
+                    <label class="form-label label-data">Product</label>
+                  </div>
+                  <div class="col-10">
+                    <ng-select [items]="transactionProducts" bindLabel="name" bindValue="productCode"
+                      placeholder="Select Product" [clearable]="false" formControlName="product">
+                    </ng-select>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Date Type -->
+              <div class="form-field" *ngSwitchCase="'dateType'">
+                <div class="row align-items-center">
+                  <div class="col-2">
+                    <label class="form-label label-data">Date Type</label>
+                  </div>
+                  <div class="col-10">
+                    <ng-select placeholder="- Please select -" formControlName="dateType" [clearable]="false" required>
+                      <ng-option [value]="1">
+                        Value Date
+                      </ng-option>
+                      <ng-option [value]="2">
+                        Posting Date
+                      </ng-option>
+                    </ng-select>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Date -->
+              <div class="form-field" *ngSwitchCase="'date'">
+                <div class="row align-items-center">
+                  <div class="col-2">
+                    <label class="form-label label-data">Date</label>
+                  </div>
+                  <div class="col-10">
+                    <div class="input-group date-group">
+                      <input class="form-control dpicker" placeholder="dd/mm/yyyy" ngbDatepicker
+                        #dateInput="ngbDatepicker" formControlName="date" autocomplete="off"
+                        [ngClass]="{'invalid-date': searchForm.get('date')?.invalid && (searchForm.get('date')?.touched || formValidationError)}" />
+                      <button class="input-group-button cal" type="button" (click)="dateInput.toggle()">
+                        <i class="fa fa-calendar" aria-hidden="true"></i>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- receiveCurrency -->
+              <div class="form-field" *ngSwitchCase="'receiveCurrency'">
+                <div class="row align-items-center">
+                  <div class="col-2">
+                    <label class="form-label label-data">Receive Currency</label>
+                  </div>
+                  <div class="col-10">
+                    <ng-select [items]="currencies" bindValue="currencyCode" placeholder="Select Receive Currency"
+                      [clearable]="false" formControlName="receiveCurrency" required (change)="onBranchChange()"
+                      [searchable]="true" [searchFn]="currencySearch" (open)="onOpen()" (close)="onClose()"
+                      [searchable]="isOpen">
+
+                      <!-- Dropdown options -->
+                      <ng-template ng-option-tmp let-item="item">
+                        <div
+                          [title]="item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency)">
+                          {{ item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency) }}
+                        </div>
+                      </ng-template>
+
+                      <!-- Selected value -->
+                      <ng-template ng-label-tmp let-item="item">
+                        <div
+                          [title]="item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency)">
+                          {{ item.currencyCode === 'All' ? 'All' : (item.currencyCode + ' - ' + item.currency) }}
+                        </div>
+                      </ng-template>
+
+                    </ng-select>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Send BusinessPartner -->
+              <div class="form-field" *ngSwitchCase="'sendBusinessPartner'">
+                <div class="row align-items-center">
+                  <div class="col-2">
+                    <label class="form-label label-data">Send Client<span class="text-danger">*</span></label>
+                  </div>
+                  <div class="col-10">
+                    <ng-select [items]="sendBusinessPartnerAgents" bindLabel="name" bindValue="id"
+                      placeholder="Select Send Partner" [clearable]="false" formControlName="sendBusinessPartner"
+                      [ngClass]="{'invalid-select': searchForm.get('sendBusinessPartner')?.invalid && (searchForm.get('sendBusinessPartner')?.touched || formValidationError)}">
+
+                      <ng-template ng-option-tmp let-item="item">
+                        <span [title]="item.name">{{ item.name }}</span>
+                      </ng-template>
+
+                    </ng-select>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Recv BusinessPartner -->
+              <div class="form-field" *ngSwitchCase="'recvBusinessPartner'">
+                <div class="row align-items-center">
+                  <div class="col-2">
+                    <label class="form-label label-data">Recv Client<span class="text-danger">*</span></label>
+                  </div>
+                  <div class="col-10">
+                    <ng-select [items]="recvBusinessPartnerAgents" bindLabel="name" bindValue="id"
+                      placeholder="Select Recv Partner" [clearable]="false" formControlName="recvBusinessPartner"
+                      [ngClass]="{'invalid-select': searchForm.get('recvBusinessPartner')?.invalid && (searchForm.get('recvBusinessPartner')?.touched || formValidationError)}">
+
+                      <ng-template ng-option-tmp let-item="item">
+                        <span [title]="item.name">{{ item.name }}</span>
+                      </ng-template>
+
+                    </ng-select>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Transaction Status (Single-select) -->
+              <div class="form-field" *ngSwitchCase="'transactionStatusSingleSelect'">
+                <div class="row align-items-center">
+                  <div class="col-2">
+                    <label class="form-label label-data">Txn. Status<span class="text-danger">*</span></label>
+                  </div>
+                  <div class="col-10">
+                    <ng-select [items]="transactionStatuses" bindLabel="transactionStatus" bindValue="transactionStatus"
+                      placeholder="Select Status" [clearable]="false" formControlName="transactionStatus" required
+                      [ngClass]="{'invalid-select': searchForm.get('transactionStatus')?.invalid && (searchForm.get('transactionStatus')?.touched || formValidationError)}">
+                    </ng-select>
+                  </div>
+                </div>
+              </div>
+
+              <!-- For Trial Balance - Accounts Report -->
+
+              <!-- Business Unit -->
+              <div class="form-field" *ngSwitchCase="'businessUnit'">
+                <div class="row align-items-center">
+                  <div class="col-2">
+                    <label class="form-label label-data">Business Unit</label>
+                  </div>
+                  <div class="col-10">
+                    <ng-select [items]="businessUnits" bindLabel="companyFullName" bindValue="companyCode"
+                      placeholder="Select Business Unit" [clearable]="false" formControlName="businessUnit"
+                      [ngClass]="{'invalid-select': searchForm.get('businessUnit')?.invalid && (searchForm.get('businessUnit')?.touched || formValidationError)}">
+                    </ng-select>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Year -->
+              <div class="form-field" *ngSwitchCase="'financialYear'">
+                <div class="row align-items-center">
+                  <div class="col-2">
+                    <label class="form-label label-data">Financial Year</label>
+                  </div>
+                  <div class="col-10">
+                    <ng-select [items]="financialYears" bindLabel="financialYear" bindValue="financialYear"
+                      placeholder="Select Year" [clearable]="false" formControlName="financialYear"
+                      [ngClass]="{'invalid-select': searchForm.get('financialYear')?.invalid && (searchForm.get('financialYear')?.touched || formValidationError)}"
+                      (change)="onSelectFinancialYear()">
+                    </ng-select>
+                  </div>
+                </div>
+              </div>
+
+              <!-- From Month -->
+              <div class="form-field" *ngSwitchCase="'fromMonth'">
+                <div class="row align-items-center">
+                  <div class="col-2">
+                    <label class="form-label label-data">From Month</label>
+                  </div>
+                  <div class="col-10">
+                    <ng-select [items]="fromMonths" bindLabel="period" bindValue="pOrder"
+                      placeholder="Select From Month" [clearable]="false" formControlName="fromMonth"
+                      [ngClass]="{'invalid-select': searchForm.get('fromMonth')?.invalid && (searchForm.get('fromMonth')?.touched|| formValidationError)}"
+                      (change)="onSelectFromMonth()">
+                    </ng-select>
+                  </div>
+                </div>
+              </div>
+
+              <!-- To Month -->
+              <div class="form-field" *ngSwitchCase="'toMonth'">
+                <div class="row align-items-center">
+                  <div class="col-2">
+                    <label class="form-label label-data">To Month</label>
+                  </div>
+                  <div class="col-10">
+                    <ng-select [items]="toMonths" bindLabel="pMonthName" bindValue="pMonth"
+                      placeholder="Select To Month" [clearable]="false" formControlName="toMonth"
+                      [ngClass]="{'invalid-select': searchForm.get('toMonth')?.invalid && (searchForm.get('toMonth')?.touched|| formValidationError)}"
+                      (change)="onSelectToMonth()">
+                    </ng-select>
+                  </div>
+                </div>
+              </div>
+
+              <!-- From Day -->
+              <div class="form-field" *ngSwitchCase="'fromDay'">
+                <div class="row align-items-center">
+                  <div class="col-2">
+                    <label class="form-label label-data">From Day <span class="text-danger">*</span></label>
+                  </div>
+                  <div class="col-10">
+                    <ng-select [items]="fromDays" bindLabel="individualDay" bindValue="individualDate"
+                      placeholder="Select From Day" [clearable]="false" formControlName="fromDay"
+                      [ngClass]="{'invalid-select': searchForm.get('fromDay')?.invalid && (searchForm.get('fromDay')?.touched|| formValidationError)}"
+                      (change)="onSelectFromDay()">
+                    </ng-select>
+                  </div>
+                </div>
+              </div>
+
+              <!-- To Day -->
+              <div class="form-field" *ngSwitchCase="'toDay'">
+                <div class="row align-items-center">
+                  <div class="col-2">
+                    <label class="form-label label-data">To Day<span style="margin-left: 1px;"
+                        class="text-danger">*</span></label>
+                  </div>
+                  <div class="col-10">
+                    <ng-select [items]="toDays" bindLabel="pDate" bindValue="individualDate" placeholder="Select To Day"
+                      [clearable]="false" formControlName="toDay"
+                      [ngClass]="{'invalid-select': searchForm.get('toDay')?.invalid && (searchForm.get('toDay')?.touched|| formValidationError)}">
+                    </ng-select>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Date Type -->
+              <div class="form-field" *ngSwitchCase="'dateTypeForTrialBalanceAccounts'">
+                <div class="row align-items-center">
+                  <div class="col-2">
+                    <label class="form-label label-data">Date Type</label>
+                  </div>
+                  <div class="col-10">
+                    <ng-select [items]="dateTypes" bindLabel="dateTypeLabel" bindValue="dateTypeCode"
+                      placeholder="Select Date Type" formControlName="dateType" [clearable]="false" required
+                      [ngClass]="{'invalid-select': searchForm.get('dateType')?.invalid && (searchForm.get('dateType')?.touched|| formValidationError)}">
+                    </ng-select>
+                  </div>
+                </div>
+              </div>
+
+
+              <!-- Account Status -->
+              <div class="form-field" *ngSwitchCase="'accountStatus'">
+                <div class="row align-items-center">
+                  <div class="col-2">
+                    <label class="form-label label-data">Account Status</label>
+                  </div>
+                  <div class="col-10">
+                    <ng-select class="transaction-status-select" [items]="accountStatuses" bindLabel="statusName"
+                      bindValue="statusCode" [multiple]="true" placeholder="Select Account Status"
+                      formControlName="accountStatus" [closeOnSelect]="false" [clearable]="false" [searchable]="false"
+                      required
+                      [ngClass]="{'invalid-select': searchForm.get('accountStatus')?.invalid && (searchForm.get('accountStatus')?.touched|| formValidationError)}">
+                      <ng-template ng-option-tmp let-item="item" let-item$="item$">
+                        <input type="checkbox" [checked]="item$.selected" /> {{ item.statusName }}
+                      </ng-template>
+                    </ng-select>
+                  </div>
+                </div>
+              </div>
+              <!--Summary Report-->
+                   <div class="form-field" *ngSwitchCase="'summaryReport'">
+                <div class="row align-items-center">
+                  <div class="col-2">
+                    <label class="form-label label-data">Summary Report</label>
+                  </div>
+                  <div class="col-10">
+                    <ng-select [items]="summaryReportTypes" bindLabel="label" bindValue="value"
+                     [clearable]="false" formControlName="summaryReport">
+
+                      <ng-template ng-option-tmp let-item="item">
+                        <span [title]="item.label">{{ item.label }}</span>
+                      </ng-template>
+
+                    </ng-select>
+                  </div>
+                </div>
+              </div>
+            </ng-container>
+          </ng-container>
+
+        </div>
+
+      </div>
+      <div class="col-custom-1-5">
+        <!-- View Report Button (Always at Top-Right) -->
+        <div class="form-field view-report-btn">
+          <button type="submit" class="btn btn-report">View</button>
+        </div>
+      </div>
+    </div>
+  </form>
+</section>
+<hr>
+<!-- Error Messages -->
+<div class="alert alert-danger mt-3" *ngIf="formValidationError && hasSearched">
+  Please fill all mandatory fields
+</div>
+
+<div class="alert alert-danger mt-3" *ngIf="errorMessage && loadingState === ComponentLoadingState.Error">
+  {{ errorMessage }}
+</div>