# PrincipalReportComponent

**Kind:** Class

**Source:** `Frontend/src/app/components/dashboard/_principalReport/principal-report.component.ts` (line 86)

**Part of:** [Frontend](subsystem-frontend-src-app)

`PrincipalReportComponent` manages the principal dashboard report view. It handles introduction modal state, date and numeral formatting, report period changes, window resizing, and page-number retrieval for report navigation.

**Implements:** `OnInit`

## Methods

| Method | Signature | Returns |
|---|---|---|
| `openIntroductionAndOutlinesPopup` | `openIntroductionAndOutlinesPopup()` | `void` |
| `closeIntroductionAndOutlinesModal` | `closeIntroductionAndOutlinesModal()` | `void` |
| `formatDate` | `formatDate(date: undefined)` | `void` |
| `NumeralConversionDefault` | `NumeralConversionDefault(num: number)` | `void` |
| `resizeWindow` | `resizeWindow()` | `void` |
| `ngOnInit` | `ngOnInit()` | `void` |
| `BookingHistoryPeriodChanged` | `BookingHistoryPeriodChanged(period: string)` | `void` |
| `DeliveriesHistoryPeriodChanged` | `DeliveriesHistoryPeriodChanged(period: string)` | `void` |
| `OverallAnalysisPeriodChanged` | `OverallAnalysisPeriodChanged(period: string)` | `void` |
| `getPageNumber` | `getPageNumber(pageId: string)` | `number` |
| `getAllLookups` | `getAllLookups()` | `void` |
| `AddInquiriesCol` | `AddInquiriesCol(e: undefined)` | `void` |
| `RemoveInquiriesCol` | `RemoveInquiriesCol(e: undefined)` | `void` |
| `AddOffersCol` | `AddOffersCol(e: undefined)` | `void` |
| `RemoveOffersCol` | `RemoveOffersCol(e: undefined)` | `void` |
| `getImagesFroPrint` | `getImagesFroPrint(accountId: number)` | `void` |
| `downloadLogoByLogoId` | `downloadLogoByLogoId(logoId: string, FileModules: number, accountId: number)` | `void` |
| `getBase64Image` | `getBase64Image(img: undefined)` | `void` |
| `GenerateNewReport` | `GenerateNewReport()` | `void` |
| `GenerateReport` | `GenerateReport()` | `void` |
| `checkForCachedData` | `checkForCachedData()` | `void` |
| `prepareGeneratedReportParameter` | `prepareGeneratedReportParameter()` | `void` |
| `prepareGeneratedReportData` | `prepareGeneratedReportData()` | `void` |
| `PrintReport` | `PrintReport()` | `void` |
| `scroll` | `scroll(id: undefined)` | `void` |
| `isScrolledIntoView` | `isScrolledIntoView(id: undefined)` | `void` |
| `checkScrolledIntoView` | `checkScrolledIntoView()` | `void` |
| `onAccountTypeChange` | `onAccountTypeChange(e: undefined)` | `void` |
| `onPrincipalChange` | `onPrincipalChange(e: undefined)` | `void` |
| `onPrincipalRemove` | `onPrincipalRemove(e: undefined)` | `void` |
| `onClientChange` | `onClientChange(e: undefined)` | `void` |
| `onClientRemove` | `onClientRemove(e: undefined)` | `void` |
| `onGridContentReady` | `onGridContentReady(e: undefined)` | `void` |
| `chooseWidget` | `chooseWidget(e: undefined)` | `void` |
| `onClientFilterChange` | `onClientFilterChange(e: undefined)` | `void` |
| `onProductTypeChange` | `onProductTypeChange(e: undefined)` | `void` |
| `onStatusChange` | `onStatusChange(e: undefined)` | `void` |
| `onSelectAllCharts` | `onSelectAllCharts()` | `void` |
| `ClosewithDonotSave` | `ClosewithDonotSave()` | `void` |
| `openTimeFrameOptions` | `openTimeFrameOptions()` | `void` |
| `openSettingsOptions` | `openSettingsOptions()` | `void` |
| `TimeFrameValueChanged` | `TimeFrameValueChanged()` | `void` |
| `OnOpenedPopup` | `OnOpenedPopup()` | `void` |
| `openPopup` | `openPopup(n: string, t: string, i: string, btnTxt: string)` | `void` |
| `savePopup` | `savePopup()` | `void` |
| `closePopup` | `closePopup()` | `void` |
| `ngDoCheck` | `ngDoCheck()` | `void` |
| `validate` | `validate(e: undefined)` | `void` |
| `selectText` | `selectText(e: undefined)` | `void` |
| `ngOnDestroy` | `ngOnDestroy()` | `void` |

## Properties

| Property | Type |
|---|---|
| `sharedPopup` | `SharedPopupComponent` |
| `GenerateReportValidation` | `DxValidationGroupComponent` |
| `TimeFrameValidation` | `DxValidationGroupComponent` |
| `RunningJobs` | `ElementRef` |
| `SalesOverview` | `ElementRef` |
| `FirmOffersElement` | `ElementRef` |
| `OrdersStatusElement` | `ElementRef` |
| `LostAnalysisElement` | `ElementRef` |
| `OrdersBookingElement` | `ElementRef` |
| `DeliveredOrdersElement` | `ElementRef` |
| `SubmittedOffersElement` | `ElementRef` |
| `OverallAnalysisElement` | `ElementRef` |
| `subscription` | `Subscription` |
| `LodingPanalMessage` | `any` |
| `loadingVisible` | `any` |
| `principals` | `any` |
| `clients` | `any` |
| `accountsInfo` | `PrincipalsInfo[]` |
| `selectedAccountInfo` | `number[]` |
| `SelectedAccount` | `string[]` |
| `SelectedPrincipalId` | `number` |
| `SelectedClientId` | `number` |
| `clientsFilters` | `any` |
| `accountType` | `any` |
| `productTypes` | `any` |
| `Status` | `any` |
| `SelectedStatuses` | `any` |
| `TempKey` | `string` |
| `Periods` | `any` |
| `DateDisplayFormat` | `any` |
| `dateDisplayFormatForTypeScript` | `any` |
| `DateDisplayFormatForMoment` | `any` |
| `UseDate` | `boolean` |
| `UsePeriod` | `boolean` |
| `ClientsPerChart` | `number` |
| `SelectAllCharts` | `boolean` |
| `ThisYear` | `any` |
| `TimeValue` | `number` |
| `TimePeriod` | `number` |
| `LostTotalAmount` | `number` |
| `LostTotalCount` | `number` |
| `SubmittedTotalCount` | `number` |
| `SubmittedTotalAmount` | `number` |
| `HitRateCount` | `number` |
| `HitRateValue` | `number` |
| `ReportData` | `any` |
| `ReportIsReady` | `boolean` |
| `GeneratedReport` | `boolean` |
| `isGenerating` | `boolean` |
| `dataBackdrop` | `string` |

## Where it refuses work

- `PrincipalReportComponent` stops the work with an early return when `date`.
- `PrincipalReportComponent` stops the work with an early return when `this.isGenerating`.
- `PrincipalReportComponent` stops the work with an early return when `dataField == "OfferTotalPrice" || dataField == "OrderTotalPrice" || dataField == "OrderBa…`.
- `PrincipalReportComponent` stops the work with an early return when `id == ReportSettingsEnum.ReportIntroduction`.
- `PrincipalReportComponent` stops the work with an early return when `id == ReportSettingsEnum.ReportSalesAnalysis`.
- `PrincipalReportComponent` stops the work with an early return when `id == ReportSettingsEnum.ReportLostOpportunities`.

## Diagram

```mermaid
graph LR
  Dashboard[Dashboard View] --> Report[PrincipalReportComponent]
  Report --> Init[ngOnInit]
  Report --> Modal[Introduction and Outlines Modal]
  Report --> Formatting[Date and Numeral Formatting]
  Report --> Periods[History and Analysis Period Changes]
  Report --> Resize[resizeWindow]
  Report --> Pagination[getPageNumber]

  Modal --> Open[openIntroductionAndOutlinesPopup]
  Modal --> Close[closeIntroductionAndOutlinesModal]
  Periods --> Booking[BookingHistoryPeriodChanged]
  Periods --> Deliveries[DeliveriesHistoryPeriodChanged]
  Periods --> Analysis[OverallAnalysisPeriodChanged]
```

## Usage

```ts
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { PrincipalReportComponent } from './components/dashboard/_principalReport/principal-report.component';

@Component({
  selector: 'app-dashboard-host',
  template: `
    <app-principal-report></app-principal-report>
    <button (click)="showReportIntroduction()">Show introduction</button>
  `,
})
export class DashboardHostComponent implements AfterViewInit {
  @ViewChild(PrincipalReportComponent)
  reportComponent!: PrincipalReportComponent;

  ngAfterViewInit(): void {
    const pageNumber: number = this.reportComponent.getPageNumber();
    console.log('Current report page:', pageNumber);
  }

  showReportIntroduction(): void {
    this.reportComponent.openIntroductionAndOutlinesPopup();
  }

  closeReportIntroduction(): void {
    this.reportComponent.closeIntroductionAndOutlinesModal();
  }
}
```

## AI Coding Instructions

- Keep modal interactions paired: open the introduction view with `openIntroductionAndOutlinesPopup()` and dismiss it with `closeIntroductionAndOutlinesModal()`.
- Call report setup through Angular lifecycle hooks rather than invoking `ngOnInit()` from other components.
- Connect booking, delivery, and overall-analysis controls to their matching period-change methods.
- Preserve the return type of `getPageNumber()` as `number` when passing pagination state to related dashboard views.

## Used by

2 references from 2 files. Each is a place in this repository where the symbol is actually used — go read one rather than trusting an example.

### Imported by (2)

- `DashboardWidgetsModule` — `Frontend/src/app/components/dashboard/dashboard-widgets.module.ts`:1
- `PrincipalReportRouteModule` — `Frontend/src/app/components/dashboard/principal-report-route.module.ts`:1