@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
2. Configuracao
3. Componentes
   • Dashboard Principal (<careon-dashboard>)
   • Esqueleto de Carregamento (<careon-dashboard-skeleton>)
   • Onda de Performance (<careon-performance-wave>)
4. Modelos de Dados
   • DashboardOverviewData
   • DashboardKpiSummary
   • DashboardAttentionItem
   • DashboardPerformanceAnalysis
   • DashboardDutyAnalysis
   • DashboardDutySalaryComparison
   • Enums do Pacote
5. Compilacao e Publicacao

1. Instalacao

Instale o pacote via NPM ou Yarn:

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):

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

<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>

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.

<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

<careon-performance-wave [level]="PerformanceLevel.Orange"></careon-performance-wave>

4. Modelos de Dados

DashboardOverviewData

Contrato mestre que alimenta o componente principal:

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

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

export interface DashboardAttentionItem {
  dutyId: number;
  title: string;
  subtitle: string;
  candidatesCount?: number;
  pendingReviewsCount?: number;
  daysOpen?: number;
  hoursOpen?: number;
  isFixedJob?: boolean;
}

DashboardPerformanceAnalysis

export interface DashboardPerformanceAnalysis {
  averageConversionRate?: number;
  level?: PerformanceLevel | number;
  highlightTitle?: string;
  description?: string;
  totalVacanciesInPeriod?: number;
}

DashboardDutyAnalysis

export interface DashboardDutyAnalysis {
  dutyId: number;
  title: string;
  subtitle: string;
  candidatesCount: number;
  viewsCount: number;
  conversionRate: number;
  timelinePoints: TimelinePoint[];
  conversionDonut?: DonutChartItem[];
  funnelItems?: FunnelBarItem[];
  salaryComparison?: DashboardDutySalaryComparison;
}

DashboardDutySalaryComparison

export interface DashboardDutySalaryComparison {
  yourSalary?: number | null;
  regionalAverageSalary?: number | null;
  differencePercentage?: number | null;
  status: DutySalaryStatus;
  highlightTitle: string;
  description: string;
  badgeText?: string | null;
}

Enums do Pacote

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'
}