@sachin9822/reports-lib 0.0.213 → 0.0.215

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

@@ -1,601 +0,0 @@
-<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>