@careonbrasil/dashboard 14.0.0 → 14.0.2

package/README.md

@@ -1,355 +1,359 @@
-# @careonbrasil/dashboard
-
-Biblioteca oficial de Dashboard de Recrutamento Institucional desenvolvida para o ecossistema CareOn.
-
-Fornece uma solucao analitica completa de metricas de atracao e selecao de profissionais de saude, reunindo indicadores-chave (KPIs), analise qualitativa de desempenho com ondas vetoriais, aprofundamento individual por vaga, comparativos de mercado e alertas operacionais acionaveis.
-
-Construida para projetos Angular 14 com suporte nativo a `ChangeDetectionStrategy.OnPush`, renderizacao vetorial SVG e integracao direta com `@careonbrasil/ng-charts`.
-
----
-
-## Sumario
-
-1. [Instalacao](#1-instalacao)
-2. [Configuracao](#2-configuracao)
-3. [Componentes](#3-componentes)
-   - [Dashboard Principal (`<careon-dashboard>`)](#1-dashboard-principal-careon-dashboard)
-   - [Esqueleto de Carregamento (`<careon-dashboard-skeleton>`)](#2-esqueleto-de-carregamento-careon-dashboard-skeleton)
-   - [Onda de Performance (`<careon-performance-wave>`)](#3-onda-de-performance-careon-performance-wave)
-4. [Modelos de Dados](#4-modelos-de-dados)
-   - [DashboardOverviewData](#dashboardoverviewdata)
-   - [DashboardKpiSummary](#dashboardkpisummary)
-   - [DashboardAttentionItem](#dashboardattentionitem)
-   - [DashboardPerformanceAnalysis](#dashboardperformanceanalysis)
-   - [DashboardDutyAnalysis](#dashboarddutyanalysis)
-   - [DashboardDutySalaryComparison](#dashboarddutysalarycomparison)
-   - [Enums do Pacote](#enums-do-pacote)
-5. [Compilacao e Publicacao](#5-compilacao-e-publicacao)
-
----
-
-## 1. Instalacao
-
-Instale o pacote e sua biblioteca de graficos par via NPM ou Yarn:
-
-```bash
-npm install @careonbrasil/dashboard @careonbrasil/ng-charts
-```
-
-### Dependencias de Peer
-
-O pacote foi desenhado para Angular 14 e requer as seguintes dependencias:
-
-| Dependencia | Versao compativel | Finalidade |
-| :--- | :--- | :--- |
-| `@angular/core` | `>=14.0.0 <15.0.0` | Nucleo do Angular |
-| `@angular/common` | `>=14.0.0 <15.0.0` | Diretivas comuns e pipes |
-| `@careonbrasil/ng-charts` | `^14.0.6` | Biblioteca de graficos SVG CareOn |
-| `tslib` | `^2.3.0` | Runtime helpers do TypeScript |
-
-> **Nota de Estilo**: O dashboard utiliza tipografia corporativa padrao Montserrat. Recomenda-se carregar a fonte no projeto hospedeiro (`font-family: 'Montserrat', sans-serif`).
-
----
-
-## 2. Configuracao
-
-Importe o modulo `CareonDashboardModule` no seu modulo Angular (ex: `AppModule` ou modulo de feature):
-
-```typescript
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { CareonDashboardModule } from '@careonbrasil/dashboard';
-
-import { AppComponent } from './app.component';
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [
-    BrowserModule,
-    CareonDashboardModule
-  ],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }
-```
-
----
-
-## 3. Componentes
-
-### 1. Dashboard Principal (`<careon-dashboard>`)
-
-Componente central que orquestra a visualizacao analitica completa. E estruturado nas seguintes secoes funcionais:
-
-1. **Cabecalho com Filtros**: Titulo, subtitulo e alternador de periodo reativo (`Hoje`, `Semana`, `Mes`).
-2. **Cards de Indicadores-Chave (KPIs)**: Vagas Publicadas, Candidatos Inscritos, Curriculos para Avaliar, Media de Candidatos por Vaga e Balanco de Status (Abertas vs. Encerradas) com badges de variacao comparativa.
-3. **Secao "Precisa da sua atencao"**: Listagem de vagas prioritarias (sem candidatos ou com prazo expirando), com atalho para contato consultivo.
-4. **Secao "Analise de Desempenho"**: Indicador de engajamento institucional por meio de curva de ondas vetorial (`PerformanceLevel`), status descritivo e recomendacoes praticas.
-5. **Secao "Analise por Vaga"**: Seletor dropdown para inspecao de vaga individual com linha do tempo de candidaturas, taxa de conversao (grafico donut), funil de atracao e comparativo salarial regional.
-6. **Secao "Candidaturas por Vaga"**: Grafico comparativo de barras verticais com linha de tendencia destacando a distribuicao de candidatos entre vagas ativas.
-
-#### Inputs e Outputs
-
-| Propriedade | Tipo | Padrao | Descricao |
-| :--- | :--- | :--- | :--- |
-| `[data]` | `DashboardOverviewData` | `undefined` | Conjunto completo de dados analiticos para alimentar o dashboard. |
-| `[loading]` | `boolean` | `false` | Quando `true`, exibe o esqueleto de carregamento com animacao shimmer. |
-| `[currentPeriod]` | `DashboardPeriod` | `DashboardPeriod.Week` | Periodo temporal ativo (`Today`, `Week`, `Month`). |
-| `[title]` | `string` | `'Dashboard'` | Titulo principal exibido no cabecalho. |
-| `[subtitle]` | `string` | `'Visao geral de recrutamento'` | Subtitulo ou nome da unidade no cabecalho. |
-| `[emptyMessage]` | `string` | `'Nenhum dado registrado para o periodo selecionado.'` | Mensagem do estado vazio quando nao ha dados. |
-| `[consultantPhone]` | `string` | `'5547996569707'` | Numero de telefone para o redirecionamento ao WhatsApp de consultoria. |
-| `[consultantMessage]` | `string` | `''` | Mensagem inicial pre-formatada para o WhatsApp. |
-| `[zeroStateMode]` | `'publish' \| 'basic'` | `'publish'` | Modo de estado vazio das secoes: `'publish'` exibe chamada para publicacao; `'basic'` exibe aviso informativo. |
-| `(periodChange)` | `EventEmitter<DashboardPeriod>` | — | Disparado quando o usuario clica em um filtro de periodo (`Hoje`, `Semana`, `Mes`). |
-| `(attentionItemSelected)` | `EventEmitter<DashboardAttentionItem>` | — | Disparado ao clicar em um item da lista de atencao. |
-| `(dutySelected)` | `EventEmitter<DashboardDutyAnalysis>` | — | Disparado ao selecionar uma vaga no dropdown da secao "Analise por Vaga". |
-| `(publishDuty)` | `EventEmitter<string \| void>` | — | Disparado ao clicar nos botoes "Publicar Vaga" das areas de estado zero (emite o nome da secao de origem). |
-| `(consultantClick)` | `EventEmitter<string>` | — | Disparado ao clicar nos links de suporte "Fale com um consultor" (emite a secao de origem). |
-| `(itemSelected)` | `EventEmitter<DashboardItemSelectedEvent>` | — | Disparado ao selecionar elementos interativos dos graficos integrados. |
-
-#### Exemplo de Uso
-
-```html
-<careon-dashboard
-  [data]="dashboardData"
-  [loading]="isLoading"
-  [currentPeriod]="selectedPeriod"
-  [title]="'Painel Institucional'"
-  [subtitle]="'Hospital Central'"
-  (periodChange)="onPeriodChange($event)"
-  (attentionItemSelected)="onAttentionItemClick($event)"
-  (dutySelected)="onDutyChange($event)"
-  (publishDuty)="onPublishDutyClick($event)"
-  (consultantClick)="onConsultantClick($event)"
-></careon-dashboard>
-```
-
-```typescript
-import { Component, OnInit } from '@angular/core';
-import {
-  DashboardOverviewData,
-  DashboardPeriod,
-  DashboardAttentionItem,
-  DashboardDutyAnalysis
-} from '@careonbrasil/dashboard';
-
-@Component({
-  selector: 'app-analytics-page',
-  templateUrl: './analytics-page.component.html'
-})
-export class AnalyticsPageComponent implements OnInit {
-  dashboardData?: DashboardOverviewData;
-  isLoading = false;
-  selectedPeriod: DashboardPeriod = DashboardPeriod.Week;
-
-  ngOnInit(): void {
-    this.loadData(this.selectedPeriod);
-  }
-
-  loadData(period: DashboardPeriod): void {
-    this.isLoading = true;
-    this.selectedPeriod = period;
-    // Exemplo: chamada a servico de dados
-  }
-
-  onPeriodChange(period: DashboardPeriod): void {
-    this.loadData(period);
-  }
-
-  onAttentionItemClick(item: DashboardAttentionItem): void {
-    console.log('Navegar para vaga com atencao:', item.dutyId);
-  }
-
-  onDutyChange(duty: DashboardDutyAnalysis): void {
-    console.log('Vaga selecionada na analise:', duty.title);
-  }
-
-  onPublishDutyClick(section?: string | void): void {
-    console.log('Abrir fluxo de publicacao a partir de:', section);
-  }
-
-  onConsultantClick(section: string): void {
-    console.log('Contato com consultor acionado em:', section);
-  }
-}
-```
-
----
-
-### 2. Esqueleto de Carregamento (`<careon-dashboard-skeleton>`)
-
-Componente visual independente que replica a disposicao geometrica dos cards de KPIs, listas de atencao e paineis de graficos do dashboard com animacao suave de shimmer. Util para telas com transicoes assincronas de carregamento.
-
-```html
-<careon-dashboard-skeleton></careon-dashboard-skeleton>
-```
-
----
-
-### 3. Onda de Performance (`<careon-performance-wave>`)
-
-Componente vetorial SVG inline responsavel por desenhar as curvas caracteristicas de desempenho institucional. Pode ser utilizado separadamente em outros contextos institucionais:
-
-#### Inputs
-
-| Propriedade | Tipo | Padrao | Descricao |
-| :--- | :--- | :--- | :--- |
-| `[level]` | `PerformanceLevel` | `PerformanceLevel.Blue` | Nivel de performance que define a curvatura e as cores do gradiente (`Blue`, `Orange`, `Red`). |
-
-#### Exemplo de Uso
-
-```html
-<careon-performance-wave [level]="PerformanceLevel.Orange"></careon-performance-wave>
-```
-
----
-
-## 4. Modelos de Dados
-
-### `DashboardOverviewData`
-
-Contrato mestre que alimenta o componente principal:
-
-```typescript
-export interface DashboardOverviewData {
-  /** Identificador unico da instituicao. */
-  institutionId?: number;
-  /** Razao social ou nome de exibicao da instituicao. */
-  institutionName?: string;
-  /** Rotulo do periodo ativo (ex: 'Hoje', 'Semana', 'Mes'). */
-  period?: string;
-  /** Data inicial do intervalo temporal coberto pelas metricas. */
-  startDate?: string | Date;
-  /** Data final do intervalo temporal coberto pelas metricas. */
-  endDate?: string | Date;
-  /** Resumo numerico dos KPIs superiores. */
-  kpis?: DashboardKpiSummary;
-  /** Pontos para o grafico de linha do tempo de candidaturas. */
-  timeline?: TimelinePoint[];
-  /** Dados para o grafico de barras comparativas entre vagas. */
-  comparison?: ComparisonItem[];
-  /** Distribuicao de candidaturas por categoria para grafico donut. */
-  distribution?: DonutChartItem[];
-  /** Distribuicao de status das vagas (abertas vs. encerradas). */
-  dutiesStatus?: StackedBarItem[];
-  /** Etapas do funil geral de recrutamento. */
-  recruitmentFunnel?: FunnelBarItem[];
-  /** Relacao de vagas prioritarias que requerem atencao imediata. */
-  attentionItems?: DashboardAttentionItem[];
-  /** Diagnostico qualitativo de performance geral com curva de ondas. */
-  performanceAnalysis?: DashboardPerformanceAnalysis;
-  /** Relacao de vagas detalhadas com metricas individuais para o seletor. */
-  vacanciesAnalysis?: DashboardDutyAnalysis[];
-}
-```
-
-### `DashboardKpiSummary`
-
-```typescript
-export interface DashboardKpiSummary {
-  registeredVacancies?: number;
-  registeredVacanciesPrevious?: number;
-  registeredVacanciesDifference?: number;
-
-  candidateApplications?: number;
-  candidateApplicationsPrevious?: number;
-  candidateApplicationsDifference?: number;
-
-  pendingReviews?: number;
-  pendingReviewsPrevious?: number;
-  pendingReviewsDifference?: number;
-
-  averageCandidatesPerVacancy?: number;
-  averageCandidatesPerVacancyPrevious?: number;
-  averageCandidatesDifference?: number;
-
-  openVacancies?: number;
-  closedVacancies?: number;
-  totalVacancies?: number;
-}
-```
-
-### `DashboardAttentionItem`
-
-```typescript
-export interface DashboardAttentionItem {
-  dutyId: number;
-  title: string;
-  subtitle: string;
-  candidatesCount?: number;
-  pendingReviewsCount?: number;
-  daysOpen?: number;
-  hoursOpen?: number;
-  isFixedJob?: boolean;
-}
-```
-
-### `DashboardPerformanceAnalysis`
-
-```typescript
-export interface DashboardPerformanceAnalysis {
-  averageConversionRate?: number;
-  level?: PerformanceLevel | number;
-  highlightTitle?: string;
-  description?: string;
-  totalVacanciesInPeriod?: number;
-}
-```
-
-### `DashboardDutyAnalysis`
-
-```typescript
-export interface DashboardDutyAnalysis {
-  dutyId: number;
-  title: string;
-  subtitle: string;
-  candidatesCount: number;
-  viewsCount: number;
-  conversionRate: number;
-  timelinePoints: TimelinePoint[];
-  conversionDonut?: DonutChartItem[];
-  funnelItems?: FunnelBarItem[];
-  salaryComparison?: DashboardDutySalaryComparison;
-}
-```
-
-### `DashboardDutySalaryComparison`
-
-```typescript
-export interface DashboardDutySalaryComparison {
-  yourSalary?: number | null;
-  regionalAverageSalary?: number | null;
-  differencePercentage?: number | null;
-  status: DutySalaryStatus;
-  highlightTitle: string;
-  description: string;
-  badgeText?: string | null;
-}
-```
-
-### Enums do Pacote
-
-```typescript
-export enum DashboardPeriod {
-  Today = 'Today',
-  Week = 'Week',
-  Month = 'Month'
-}
-
-export enum PerformanceLevel {
-  Blue = 'Blue',
-  Orange = 'Orange',
-  Red = 'Red'
-}
-
-export enum DutySalaryStatus {
-  BelowMarket = 'BelowMarket',
-  AtMarket = 'AtMarket',
-  AboveMarket = 'AboveMarket',
-  NotInformed = 'NotInformed',
-  InsufficientData = 'InsufficientData'
-}
-```
-
----
+# @careonbrasil/dashboard
+
+Biblioteca oficial de Dashboard de Recrutamento Institucional desenvolvida para o ecossistema CareOn.
+
+Fornece uma solucao analitica completa de metricas de atracao e selecao de profissionais de saude, reunindo indicadores-chave (KPIs), analise qualitativa de desempenho com ondas vetoriais, aprofundamento individual por vaga, comparativos de mercado e alertas operacionais acionaveis.
+
+Construida para projetos Angular 14 com suporte nativo a `ChangeDetectionStrategy.OnPush`, renderizacao vetorial SVG e integracao direta com `@careonbrasil/ng-charts`.
+
+---
+
+## Sumario
+
+1. [Instalacao](#1-instalacao)
+2. [Configuracao](#2-configuracao)
+3. [Componentes](#3-componentes)
+   - [Dashboard Principal (`<careon-dashboard>`)](#1-dashboard-principal-careon-dashboard)
+   - [Esqueleto de Carregamento (`<careon-dashboard-skeleton>`)](#2-esqueleto-de-carregamento-careon-dashboard-skeleton)
+   - [Onda de Performance (`<careon-performance-wave>`)](#3-onda-de-performance-careon-performance-wave)
+4. [Modelos de Dados](#4-modelos-de-dados)
+   - [DashboardOverviewData](#dashboardoverviewdata)
+   - [DashboardKpiSummary](#dashboardkpisummary)
+   - [DashboardAttentionItem](#dashboardattentionitem)
+   - [DashboardPerformanceAnalysis](#dashboardperformanceanalysis)
+   - [DashboardDutyAnalysis](#dashboarddutyanalysis)
+   - [DashboardDutySalaryComparison](#dashboarddutysalarycomparison)
+   - [Enums do Pacote](#enums-do-pacote)
+5. [Compilacao e Publicacao](#5-compilacao-e-publicacao)
+
+---
+
+## 1. Instalacao
+
+Instale o pacote via NPM ou Yarn:
+
+```bash
+npm install @careonbrasil/dashboard
+```
+
+### Dependencias de Peer
+
+
+| Dependencia | Versao compativel | Finalidade |
+| :--- | :--- | :--- |
+| `@angular/core` | `>=14.0.0 <15.0.0` | Nucleo do Angular |
+| `@angular/common` | `>=14.0.0 <15.0.0` | Diretivas comuns e pipes |
+
+### Dependencias Diretas
+
+| Dependencia | Versao compativel | Finalidade |
+| :--- | :--- | :--- |
+| `@careonbrasil/ng-charts` | `^14.0.6` | Biblioteca de graficos SVG CareOn |
+| `tslib` | `^2.3.0` | Runtime helpers do TypeScript |
+
+> **Nota de Estilo**: O dashboard utiliza tipografia corporativa padrao Montserrat. Recomenda-se carregar a fonte no projeto hospedeiro (`font-family: 'Montserrat', sans-serif`).
+
+---
+
+## 2. Configuracao
+
+Importe o modulo `CareonDashboardModule` no seu modulo Angular (ex: `AppModule` ou modulo de feature):
+
+```typescript
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { CareonDashboardModule } from '@careonbrasil/dashboard';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [
+    BrowserModule,
+    CareonDashboardModule
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
+```
+
+---
+
+## 3. Componentes
+
+### 1. Dashboard Principal (`<careon-dashboard>`)
+
+Componente central que orquestra a visualizacao analitica completa. E estruturado nas seguintes secoes funcionais:
+
+1. **Cabecalho com Filtros**: Titulo, subtitulo e alternador de periodo reativo (`Hoje`, `Semana`, `Mes`).
+2. **Cards de Indicadores-Chave (KPIs)**: Vagas Publicadas, Candidatos Inscritos, Curriculos para Avaliar, Media de Candidatos por Vaga e Balanco de Status (Abertas vs. Encerradas) com badges de variacao comparativa.
+3. **Secao "Precisa da sua atencao"**: Listagem de vagas prioritarias (sem candidatos ou com prazo expirando), com atalho para contato consultivo.
+4. **Secao "Analise de Desempenho"**: Indicador de engajamento institucional por meio de curva de ondas vetorial (`PerformanceLevel`), status descritivo e recomendacoes praticas.
+5. **Secao "Analise por Vaga"**: Seletor dropdown para inspecao de vaga individual com linha do tempo de candidaturas, taxa de conversao (grafico donut), funil de atracao e comparativo salarial regional.
+6. **Secao "Candidaturas por Vaga"**: Grafico comparativo de barras verticais com linha de tendencia destacando a distribuicao de candidatos entre vagas ativas.
+
+#### Inputs e Outputs
+
+| Propriedade | Tipo | Padrao | Descricao |
+| :--- | :--- | :--- | :--- |
+| `[data]` | `DashboardOverviewData` | `undefined` | Conjunto completo de dados analiticos para alimentar o dashboard. |
+| `[loading]` | `boolean` | `false` | Quando `true`, exibe o esqueleto de carregamento com animacao shimmer. |
+| `[currentPeriod]` | `DashboardPeriod` | `DashboardPeriod.Week` | Periodo temporal ativo (`Today`, `Week`, `Month`). |
+| `[title]` | `string` | `'Dashboard'` | Titulo principal exibido no cabecalho. |
+| `[subtitle]` | `string` | `'Visao geral de recrutamento'` | Subtitulo ou nome da unidade no cabecalho. |
+| `[emptyMessage]` | `string` | `'Nenhum dado registrado para o periodo selecionado.'` | Mensagem do estado vazio quando nao ha dados. |
+| `[consultantPhone]` | `string` | `undefined` | Numero de telefone para o redirecionamento de input. |
+| `[consultantMessage]` | `string` | `''` | Mensagem inicial pre-formatada para o WhatsApp. |
+| `[zeroStateMode]` | `'publish' \| 'basic'` | `'publish'` | Modo de estado vazio das secoes: `'publish'` exibe chamada para publicacao; `'basic'` exibe aviso informativo. |
+| `(periodChange)` | `EventEmitter<DashboardPeriod>` | — | Disparado quando o usuario clica em um filtro de periodo (`Hoje`, `Semana`, `Mes`). |
+| `(attentionItemSelected)` | `EventEmitter<DashboardAttentionItem>` | — | Disparado ao clicar em um item da lista de atencao. |
+| `(dutySelected)` | `EventEmitter<DashboardDutyAnalysis>` | — | Disparado ao selecionar uma vaga no dropdown da secao "Analise por Vaga". |
+| `(publishDuty)` | `EventEmitter<string \| void>` | — | Disparado ao clicar nos botoes "Publicar Vaga" das areas de estado zero (emite o nome da secao de origem). |
+| `(consultantClick)` | `EventEmitter<string>` | — | Disparado ao clicar nos links de suporte "Fale com um consultor" (emite a secao de origem). |
+| `(itemSelected)` | `EventEmitter<DashboardItemSelectedEvent>` | — | Disparado ao selecionar elementos interativos dos graficos integrados. |
+
+#### Exemplo de Uso
+
+```html
+<careon-dashboard
+  [data]="dashboardData"
+  [loading]="isLoading"
+  [currentPeriod]="selectedPeriod"
+  [title]="'Painel Institucional'"
+  [subtitle]="'Hospital Central'"
+  (periodChange)="onPeriodChange($event)"
+  (attentionItemSelected)="onAttentionItemClick($event)"
+  (dutySelected)="onDutyChange($event)"
+  (publishDuty)="onPublishDutyClick($event)"
+  (consultantClick)="onConsultantClick($event)"
+></careon-dashboard>
+```
+
+```typescript
+import { Component, OnInit } from '@angular/core';
+import {
+  DashboardOverviewData,
+  DashboardPeriod,
+  DashboardAttentionItem,
+  DashboardDutyAnalysis
+} from '@careonbrasil/dashboard';
+
+@Component({
+  selector: 'app-analytics-page',
+  templateUrl: './analytics-page.component.html'
+})
+export class AnalyticsPageComponent implements OnInit {
+  dashboardData?: DashboardOverviewData;
+  isLoading = false;
+  selectedPeriod: DashboardPeriod = DashboardPeriod.Week;
+
+  ngOnInit(): void {
+    this.loadData(this.selectedPeriod);
+  }
+
+  loadData(period: DashboardPeriod): void {
+    this.isLoading = true;
+    this.selectedPeriod = period;
+    // Exemplo: chamada a servico de dados
+  }
+
+  onPeriodChange(period: DashboardPeriod): void {
+    this.loadData(period);
+  }
+
+  onAttentionItemClick(item: DashboardAttentionItem): void {
+    console.log('Navegar para vaga com atencao:', item.dutyId);
+  }
+
+  onDutyChange(duty: DashboardDutyAnalysis): void {
+    console.log('Vaga selecionada na analise:', duty.title);
+  }
+
+  onPublishDutyClick(section?: string | void): void {
+    console.log('Abrir fluxo de publicacao a partir de:', section);
+  }
+
+  onConsultantClick(section: string): void {
+    console.log('Contato com consultor acionado em:', section);
+  }
+}
+```
+
+---
+
+### 2. Esqueleto de Carregamento (`<careon-dashboard-skeleton>`)
+
+Componente visual independente que replica a disposicao geometrica dos cards de KPIs, listas de atencao e paineis de graficos do dashboard com animacao suave de shimmer. Util para telas com transicoes assincronas de carregamento.
+
+```html
+<careon-dashboard-skeleton></careon-dashboard-skeleton>
+```
+
+---
+
+### 3. Onda de Performance (`<careon-performance-wave>`)
+
+Componente vetorial SVG inline responsavel por desenhar as curvas caracteristicas de desempenho institucional. Pode ser utilizado separadamente em outros contextos institucionais:
+
+#### Inputs
+
+| Propriedade | Tipo | Padrao | Descricao |
+| :--- | :--- | :--- | :--- |
+| `[level]` | `PerformanceLevel` | `PerformanceLevel.Blue` | Nivel de performance que define a curvatura e as cores do gradiente (`Blue`, `Orange`, `Red`). |
+
+#### Exemplo de Uso
+
+```html
+<careon-performance-wave [level]="PerformanceLevel.Orange"></careon-performance-wave>
+```
+
+---
+
+## 4. Modelos de Dados
+
+### `DashboardOverviewData`
+
+Contrato mestre que alimenta o componente principal:
+
+```typescript
+export interface DashboardOverviewData {
+  /** Identificador unico da instituicao. */
+  institutionId?: number;
+  /** Razao social ou nome de exibicao da instituicao. */
+  institutionName?: string;
+  /** Rotulo do periodo ativo (ex: 'Hoje', 'Semana', 'Mes'). */
+  period?: string;
+  /** Data inicial do intervalo temporal coberto pelas metricas. */
+  startDate?: string | Date;
+  /** Data final do intervalo temporal coberto pelas metricas. */
+  endDate?: string | Date;
+  /** Resumo numerico dos KPIs superiores. */
+  kpis?: DashboardKpiSummary;
+  /** Pontos para o grafico de linha do tempo de candidaturas. */
+  timeline?: TimelinePoint[];
+  /** Dados para o grafico de barras comparativas entre vagas. */
+  comparison?: ComparisonItem[];
+  /** Distribuicao de candidaturas por categoria para grafico donut. */
+  distribution?: DonutChartItem[];
+  /** Distribuicao de status das vagas (abertas vs. encerradas). */
+  dutiesStatus?: StackedBarItem[];
+  /** Etapas do funil geral de recrutamento. */
+  recruitmentFunnel?: FunnelBarItem[];
+  /** Relacao de vagas prioritarias que requerem atencao imediata. */
+  attentionItems?: DashboardAttentionItem[];
+  /** Diagnostico qualitativo de performance geral com curva de ondas. */
+  performanceAnalysis?: DashboardPerformanceAnalysis;
+  /** Relacao de vagas detalhadas com metricas individuais para o seletor. */
+  vacanciesAnalysis?: DashboardDutyAnalysis[];
+}
+```
+
+### `DashboardKpiSummary`
+
+```typescript
+export interface DashboardKpiSummary {
+  registeredVacancies?: number;
+  registeredVacanciesPrevious?: number;
+  registeredVacanciesDifference?: number;
+
+  candidateApplications?: number;
+  candidateApplicationsPrevious?: number;
+  candidateApplicationsDifference?: number;
+
+  pendingReviews?: number;
+  pendingReviewsPrevious?: number;
+  pendingReviewsDifference?: number;
+
+  averageCandidatesPerVacancy?: number;
+  averageCandidatesPerVacancyPrevious?: number;
+  averageCandidatesDifference?: number;
+
+  openVacancies?: number;
+  closedVacancies?: number;
+  totalVacancies?: number;
+}
+```
+
+### `DashboardAttentionItem`
+
+```typescript
+export interface DashboardAttentionItem {
+  dutyId: number;
+  title: string;
+  subtitle: string;
+  candidatesCount?: number;
+  pendingReviewsCount?: number;
+  daysOpen?: number;
+  hoursOpen?: number;
+  isFixedJob?: boolean;
+}
+```
+
+### `DashboardPerformanceAnalysis`
+
+```typescript
+export interface DashboardPerformanceAnalysis {
+  averageConversionRate?: number;
+  level?: PerformanceLevel | number;
+  highlightTitle?: string;
+  description?: string;
+  totalVacanciesInPeriod?: number;
+}
+```
+
+### `DashboardDutyAnalysis`
+
+```typescript
+export interface DashboardDutyAnalysis {
+  dutyId: number;
+  title: string;
+  subtitle: string;
+  candidatesCount: number;
+  viewsCount: number;
+  conversionRate: number;
+  timelinePoints: TimelinePoint[];
+  conversionDonut?: DonutChartItem[];
+  funnelItems?: FunnelBarItem[];
+  salaryComparison?: DashboardDutySalaryComparison;
+}
+```
+
+### `DashboardDutySalaryComparison`
+
+```typescript
+export interface DashboardDutySalaryComparison {
+  yourSalary?: number | null;
+  regionalAverageSalary?: number | null;
+  differencePercentage?: number | null;
+  status: DutySalaryStatus;
+  highlightTitle: string;
+  description: string;
+  badgeText?: string | null;
+}
+```
+
+### Enums do Pacote
+
+```typescript
+export enum DashboardPeriod {
+  Today = 'Today',
+  Week = 'Week',
+  Month = 'Month'
+}
+
+export enum PerformanceLevel {
+  Blue = 'Blue',
+  Orange = 'Orange',
+  Red = 'Red'
+}
+
+export enum DutySalaryStatus {
+  BelowMarket = 'BelowMarket',
+  AtMarket = 'AtMarket',
+  AboveMarket = 'AboveMarket',
+  NotInformed = 'NotInformed',
+  InsufficientData = 'InsufficientData'
+}
+```
+
+---