EduardoDev
/
line-gestao-frontend
mirror of https://github.com/eduardolopesx03/line-gestao-frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'Filtros-Operadora' into dev

This commit is contained in:
Leon 2026-03-09 15:45:25 -03:00
parent 43bf611122 3437b2223e
commit 77973fc516
10 changed files with 2703 additions and 227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package-lock.json generated
View File

@ -640,6 +640,7 @@
"integrity": "sha512-yDBHV9kQNcr2/sUr9jghVyz9C3Y5G2zUM2H2lo+9mKv4sFgbA8s8Z9t8D1jiTkGoO/NoIfKMyKWr4s6CN23ZwQ==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@ampproject/remapping": "^2.2.0",
"@babel/code-frame": "^7.27.1",
@ -6944,6 +6945,7 @@
"integrity": "sha512-SL0JY3DaxylDuo/MecFeiC+7pedM0zia33zl0vcjgwcq1q1FWWF1To9EIauPbl8GbMCU0R2e0uJ8bZunhYKD2g==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"cli-truncate": "^4.0.0",
"colorette": "^2.0.20",
@ -9576,6 +9578,7 @@
"integrity": "sha512-uzcxnSDVjAopEUjljkWh8EIrg6tlzrjFUfMcR1EVsRDGwf/ccef0qQPRyOrROwhrTDaApueq+ja+KLPlzR/zdg==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"esbuild": "^0.25.0",
"fdir": "^6.5.0",

256
src/app/pages/dashboard/dashboard.html
View File

@ -29,6 +29,24 @@
</div>
</div>
<div class="operadora-filter-row fade-in-up" [style.animation-delay]="'80ms'" *ngIf="!isCliente">
<div class="operadora-filter-label">
<i class="bi bi-funnel-fill"></i>
<span>Filtro de Operadora</span>
</div>
<div class="filter-tabs">
<button
type="button"
class="filter-tab"
*ngFor="let option of operadoraFilters; trackBy: trackByOperadoraFilter"
[class.active]="operadoraFilter === option.value"
[disabled]="operadoraFilterLoading"
(click)="onOperadoraFilterChange(option.value)">
{{ option.label }}
</button>
</div>
</div>
<div class="hero-grid fade-in-up" [style.animation-delay]="'100ms'" *ngIf="!isCliente || clientOverview.hasData">
<div
class="hero-card"
@ -44,7 +62,6 @@
<div class="hero-data">
<span class="hero-label">{{ k.title }}</span>
<span class="hero-value">{{ k.value }}</span>
<span class="hero-hint" *ngIf="k.hint">{{ k.hint }}</span>
</div>
</div>
</div>
@ -66,7 +83,12 @@
</div>
</div>
<div class="card-body-split">
<div class="chart-wrapper-pie">
<div
class="chart-wrapper-pie chart-click-target"
role="button"
tabindex="0"
(click)="openChartModal('status')"
(keydown)="onChartTargetKeydown($event, 'status')">
<canvas #chartStatusPie></canvas>
</div>
<div class="status-list">
@ -107,7 +129,12 @@
</div>
</div>
<div class="card-body-adicionais">
<div class="chart-wrapper-pie-sm">
<div
class="chart-wrapper-pie-sm chart-click-target"
role="button"
tabindex="0"
(click)="openChartModal('adicionaisComparativo')"
(keydown)="onChartTargetKeydown($event, 'adicionaisComparativo')">
<canvas #chartAdicionaisComparativo></canvas>
</div>
<div class="compare-list">
@ -143,7 +170,12 @@
<p>Status de vencimento atual</p>
</div>
</div>
<div class="chart-wrapper-pie">
<div
class="chart-wrapper-pie chart-click-target"
role="button"
tabindex="0"
(click)="openChartModal('vigenciaBuckets')"
(keydown)="onChartTargetKeydown($event, 'vigenciaBuckets')">
<canvas #chartVigenciaSupervisao></canvas>
</div>
</div>
@ -156,7 +188,12 @@
<p>Linhas com e sem serviço ativo</p>
</div>
</div>
<div class="chart-wrapper-pie">
<div
class="chart-wrapper-pie chart-click-target"
role="button"
tabindex="0"
(click)="openChartModal('travel')"
(keydown)="onChartTargetKeydown($event, 'travel')">
<canvas #chartTravelMundo></canvas>
</div>
</div>
@ -170,7 +207,12 @@
<p>Distribuição da base por faixa de franquia</p>
</div>
</div>
<div class="chart-wrapper-bar compact">
<div
class="chart-wrapper-bar compact chart-click-target"
role="button"
tabindex="0"
(click)="openChartModal('linhasFranquia')"
(keydown)="onChartTargetKeydown($event, 'linhasFranquia')">
<canvas #chartLinhasPorFranquia></canvas>
</div>
</div>
@ -182,7 +224,12 @@
<p>Quantidade de linhas por serviço adicional ativo</p>
</div>
</div>
<div class="chart-wrapper-bar compact">
<div
class="chart-wrapper-bar compact chart-click-target"
role="button"
tabindex="0"
(click)="openChartModal('adicionaisPagos')"
(keydown)="onChartTargetKeydown($event, 'adicionaisPagos')">
<canvas #chartAdicionaisPagos></canvas>
</div>
</div>
@ -194,13 +241,65 @@
<p>Quantidade de linhas e-SIM e SIMCARD</p>
</div>
</div>
<div class="chart-wrapper-pie">
<div
class="chart-wrapper-pie chart-click-target"
role="button"
tabindex="0"
(click)="openChartModal('tipoChip')"
(keydown)="onChartTargetKeydown($event, 'tipoChip')">
<canvas #chartTipoChip></canvas>
</div>
</div>
</div>
</div>
<div class="dashboard-section fade-in-up" [style.animation-delay]="'300ms'" *ngIf="showVivoComparison">
<div class="context-title">
<h2>Comparativo VIVO</h2>
<p>Comparação entre contas da operadora VIVO: MACROPHONY x LINE MÓVEL.</p>
</div>
<div class="vivo-comparison-grid">
<div class="card-modern">
<div class="card-header-clean">
<div class="header-text">
<h3>Linhas por Empresa</h3>
<p>Volume total de linhas VIVO por empresa.</p>
</div>
</div>
<div
class="chart-wrapper-bar compact-half chart-click-target"
role="button"
tabindex="0"
(click)="openChartModal('vivoEmpresasLinhas')"
(keydown)="onChartTargetKeydown($event, 'vivoEmpresasLinhas')">
<canvas #chartVivoEmpresasLinhas></canvas>
</div>
</div>
<div class="card-modern">
<div class="card-header-clean">
<div class="header-text">
<h3>Adicionais por Empresa</h3>
<p>Comparação de linhas com e sem adicionais pagos.</p>
</div>
</div>
<div
class="chart-wrapper-bar compact-half chart-click-target"
role="button"
tabindex="0"
(click)="openChartModal('vivoEmpresasAdicionais')"
(keydown)="onChartTargetKeydown($event, 'vivoEmpresasAdicionais')">
<canvas #chartVivoEmpresasAdicionais></canvas>
</div>
</div>
</div>
<div class="vivo-comparison-empty" *ngIf="vivoComparison.macrophonyLinhas === 0 && vivoComparison.lineMovelLinhas === 0">
Não há linhas VIVO vinculadas às empresas MACROPHONY ou LINE MÓVEL para o filtro atual.
</div>
</div>
<div class="context-title fade-in-up" [style.animation-delay]="'320ms'">
<h2>Página Resumo</h2>
<p>Indicadores do Resumo focados em quantidade e distribuição de linhas.</p>
@ -247,22 +346,50 @@
<div class="analytics-grid" *ngIf="!resumoLoading && !resumoError">
<div class="mini-chart-card">
<h6>Top Clientes (Qtd. Linhas)</h6>
<div class="chart-area"><canvas #chartResumoTopClientes></canvas></div>
<div
class="chart-area chart-click-target"
role="button"
tabindex="0"
(click)="openChartModal('resumoTopClientes')"
(keydown)="onChartTargetKeydown($event, 'resumoTopClientes')">
<canvas #chartResumoTopClientes></canvas>
</div>
</div>
<div class="mini-chart-card">
<h6>Top Planos (Qtd. Linhas)</h6>
<div class="chart-area"><canvas #chartResumoTopPlanos></canvas></div>
<div
class="chart-area chart-click-target"
role="button"
tabindex="0"
(click)="openChartModal('resumoTopPlanos')"
(keydown)="onChartTargetKeydown($event, 'resumoTopPlanos')">
<canvas #chartResumoTopPlanos></canvas>
</div>
</div>
<div class="mini-chart-card">
<h6>PF vs PJ (Qtd. Linhas)</h6>
<div class="chart-area"><canvas #chartResumoPfPjLinhas></canvas></div>
<div
class="chart-area chart-click-target"
role="button"
tabindex="0"
(click)="openChartModal('resumoPfPj')"
(keydown)="onChartTargetKeydown($event, 'resumoPfPj')">
<canvas #chartResumoPfPjLinhas></canvas>
</div>
</div>
<div class="mini-chart-card">
<h6>Reserva por DDD</h6>
<div class="chart-area"><canvas #chartResumoReservaDdd></canvas></div>
<div
class="chart-area chart-click-target"
role="button"
tabindex="0"
(click)="openChartModal('resumoReservaDdd')"
(keydown)="onChartTargetKeydown($event, 'resumoReservaDdd')">
<canvas #chartResumoReservaDdd></canvas>
</div>
</div>
<div class="mini-chart-card mini-metric-card">
@ -301,7 +428,12 @@
<p>Histórico mensal de mudanças de plano/aparelho</p>
</div>
</div>
<div class="chart-wrapper-bar compact-half">
<div
class="chart-wrapper-bar compact-half chart-click-target"
role="button"
tabindex="0"
(click)="openChartModal('mureg12')"
(keydown)="onChartTargetKeydown($event, 'mureg12')">
<canvas #chartMureg12></canvas>
</div>
</div>
@ -313,7 +445,12 @@
<p>Histórico mensal de trocas realizadas</p>
</div>
</div>
<div class="chart-wrapper-bar compact-half">
<div
class="chart-wrapper-bar compact-half chart-click-target"
role="button"
tabindex="0"
(click)="openChartModal('troca12')"
(keydown)="onChartTargetKeydown($event, 'troca12')">
<canvas #chartTroca12></canvas>
</div>
</div>
@ -326,7 +463,12 @@
<p>Contratos a encerrar por mês</p>
</div>
</div>
<div class="chart-wrapper-bar compact-half">
<div
class="chart-wrapper-bar compact-half chart-click-target"
role="button"
tabindex="0"
(click)="openChartModal('vigenciaMesAno')"
(keydown)="onChartTargetKeydown($event, 'vigenciaMesAno')">
<canvas #chartVigenciaMesAno></canvas>
</div>
</div>
@ -352,7 +494,12 @@
</div>
</div>
<div class="card-body-split">
<div class="chart-wrapper-pie">
<div
class="chart-wrapper-pie chart-click-target"
role="button"
tabindex="0"
(click)="openChartModal('status')"
(keydown)="onChartTargetKeydown($event, 'status')">
<canvas #chartStatusPie></canvas>
</div>
<div class="status-list">
@ -373,7 +520,12 @@
<p>Quantidade de linhas por faixa de franquia contratada</p>
</div>
</div>
<div class="chart-wrapper-bar compact-half">
<div
class="chart-wrapper-bar compact-half chart-click-target"
role="button"
tabindex="0"
(click)="openChartModal('linhasFranquia')"
(keydown)="onChartTargetKeydown($event, 'linhasFranquia')">
<canvas #chartLinhasPorFranquia></canvas>
</div>
</div>
@ -388,7 +540,12 @@
<p>Planos com maior volume na sua operação</p>
</div>
</div>
<div class="chart-wrapper-bar compact">
<div
class="chart-wrapper-bar compact chart-click-target"
role="button"
tabindex="0"
(click)="openChartModal('resumoTopPlanos')"
(keydown)="onChartTargetKeydown($event, 'resumoTopPlanos')">
<canvas #chartResumoTopPlanos></canvas>
</div>
</div>
@ -401,7 +558,12 @@
<p>Apenas usuários de fato (sem bloqueados/aguardando)</p>
</div>
</div>
<div class="chart-wrapper-bar compact">
<div
class="chart-wrapper-bar compact chart-click-target"
role="button"
tabindex="0"
(click)="openChartModal('resumoTopClientes')"
(keydown)="onChartTargetKeydown($event, 'resumoTopClientes')">
<canvas #chartResumoTopClientes></canvas>
</div>
</div>
@ -414,7 +576,12 @@
<p>Distribuição entre e-SIM, SIMCARD e outros</p>
</div>
</div>
<div class="chart-wrapper-pie">
<div
class="chart-wrapper-pie chart-click-target"
role="button"
tabindex="0"
(click)="openChartModal('tipoChip')"
(keydown)="onChartTargetKeydown($event, 'tipoChip')">
<canvas #chartTipoChip></canvas>
</div>
</div>
@ -441,5 +608,54 @@
</div>
</ng-template>
</ng-template>
<div
class="chart-modal-overlay"
*ngIf="chartModalOpen"
role="dialog"
aria-modal="true"
[attr.aria-label]="chartModalTitle || 'Gráfico expandido'"
(click)="closeChartModal()">
<div class="chart-modal-card" (click)="$event.stopPropagation()">
<div class="chart-modal-header">
<div class="chart-modal-title-wrap">
<h3>{{ chartModalTitle }}</h3>
<p *ngIf="chartModalSubtitle">{{ chartModalSubtitle }}</p>
</div>
<button
type="button"
class="chart-modal-close"
aria-label="Fechar gráfico expandido"
(click)="closeChartModal()">
<i class="bi bi-x-lg"></i>
</button>
</div>
<div class="chart-modal-body">
<div class="chart-modal-content">
<div class="chart-modal-visual">
<canvas #chartExpandedCanvas></canvas>
</div>
<div
class="chart-modal-info"
*ngIf="chartModalInfoRows.length > 0"
[style.--dataset-cols]="chartModalDatasetHeaders.length">
<div class="chart-modal-info-head">
<span class="col-label">Categoria</span>
<span class="col-value" *ngFor="let dataset of chartModalDatasetHeaders">{{ dataset }}</span>
</div>
<div class="chart-modal-info-row" *ngFor="let row of chartModalInfoRows">
<span class="col-label">{{ row.label }}</span>
<span class="col-value" *ngFor="let cell of row.cells">{{ cell.valueText }}</span>
</div>
<div class="chart-modal-info-total" *ngIf="chartModalDatasetTotals.length > 0">
<span *ngFor="let total of chartModalDatasetTotals">
Total {{ total.dataset }}: <strong>{{ total.totalText }}</strong>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

296
src/app/pages/dashboard/dashboard.scss
View File

@ -98,6 +98,72 @@
@media(max-width: 768px) { flex-direction: column; align-items: flex-start; gap: 16px; }
}
.operadora-filter-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: -8px 0 22px;
padding: 14px 16px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.88);
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: var(--shadow-sm);
@media (max-width: 840px) {
flex-direction: column;
align-items: stretch;
}
}
.operadora-filter-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--text-muted);
font-weight: 700;
letter-spacing: 0.02em;
i {
color: var(--brand);
}
}
.filter-tabs {
display: inline-flex;
flex-wrap: wrap;
gap: 8px;
}
.filter-tab {
border: 1px solid rgba(15, 23, 42, 0.15);
background: #fff;
color: var(--text-muted);
border-radius: 999px;
padding: 6px 12px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s ease;
&:hover:not(:disabled) {
border-color: rgba(227, 61, 207, 0.45);
color: var(--brand);
}
&.active {
background: var(--brand-soft);
border-color: rgba(227, 61, 207, 0.45);
color: var(--brand);
}
&:disabled {
opacity: 0.55;
cursor: not-allowed;
}
}
.badge-pill {
display: inline-flex;
align-items: center;
@ -392,6 +458,22 @@
&.compact-half { height: 200px; }
}
.chart-click-target {
cursor: zoom-in;
border-radius: 12px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
&:hover {
transform: translateY(-1px);
box-shadow: 0 10px 18px -16px rgba(17, 18, 20, 0.65);
}
&:focus-visible {
outline: 2px solid rgba(3, 15, 170, 0.26);
outline-offset: 2px;
}
}
.card-adicionais .card-body-adicionais {
padding: 14px 16px 12px;
display: grid;
@ -630,7 +712,221 @@
@media(max-width: 1080px) { grid-template-columns: 1fr; }
}
.vivo-comparison-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
@media (max-width: 980px) {
grid-template-columns: 1fr;
}
}
.vivo-comparison-empty {
margin-top: 10px;
padding: 12px 14px;
border-radius: 10px;
background: rgba(148, 163, 184, 0.12);
border: 1px solid rgba(148, 163, 184, 0.28);
color: var(--text-muted);
font-size: 12px;
font-weight: 600;
}
.chart-modal-overlay {
position: fixed;
inset: 0;
z-index: 1200;
background: rgba(10, 14, 35, 0.58);
backdrop-filter: blur(5px);
display: flex;
align-items: center;
justify-content: center;
padding: 28px 20px;
}
.chart-modal-card {
width: min(1120px, 96vw);
max-height: min(86vh, 860px);
background: #fff;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 18px;
box-shadow: 0 30px 70px -26px rgba(2, 8, 23, 0.65);
display: flex;
flex-direction: column;
overflow: hidden;
animation: modalChartIn 0.22s ease;
}
.chart-modal-header {
padding: 14px 18px;
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
}
.chart-modal-title-wrap {
h3 {
margin: 0;
font-size: 16px;
font-weight: 800;
color: var(--text-main);
}
p {
margin: 4px 0 0;
font-size: 12px;
color: var(--text-muted);
font-weight: 600;
}
}
.chart-modal-close {
width: 34px;
height: 34px;
border-radius: 10px;
border: 1px solid rgba(15, 23, 42, 0.12);
background: #fff;
color: rgba(17, 18, 20, 0.7);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
&:hover {
border-color: rgba(227, 61, 207, 0.35);
color: var(--brand);
background: var(--brand-soft);
}
}
.chart-modal-body {
position: relative;
height: min(72vh, 680px);
min-height: 360px;
padding: 14px 16px 16px;
}
.chart-modal-content {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
gap: 14px;
height: 100%;
}
.chart-modal-visual {
position: relative;
min-height: 0;
}
.chart-modal-info {
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 12px;
background: #f8fafc;
overflow: auto;
display: flex;
flex-direction: column;
}
.chart-modal-info-head,
.chart-modal-info-row {
display: grid;
grid-template-columns: minmax(120px, 1.2fr) repeat(var(--dataset-cols, 1), minmax(78px, 1fr));
gap: 10px;
padding: 10px 12px;
align-items: center;
}
.chart-modal-info-head {
position: sticky;
top: 0;
z-index: 1;
background: #eef2ff;
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
font-size: 11px;
font-weight: 800;
color: #334155;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.chart-modal-info-row {
border-bottom: 1px solid rgba(15, 23, 42, 0.06);
font-size: 12px;
color: #0f172a;
font-weight: 600;
background: #fff;
&:nth-child(odd) {
background: #fdfdff;
}
}
.chart-modal-info .col-label {
text-align: left;
word-break: break-word;
}
.chart-modal-info .col-value {
text-align: right;
font-variant-numeric: tabular-nums;
}
.chart-modal-info-total {
display: flex;
flex-wrap: wrap;
gap: 10px 16px;
border-top: 1px solid rgba(15, 23, 42, 0.08);
padding: 10px 12px 12px;
background: #f1f5f9;
font-size: 11px;
font-weight: 700;
color: #334155;
}
@keyframes modalChartIn {
from {
opacity: 0;
transform: translateY(8px) scale(0.985);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Utils */
.text-brand { color: var(--brand); }
.text-brand-dark { color: #b832a8; }
.full-width { width: 100%; }
@media (max-width: 760px) {
.chart-modal-overlay {
padding: 16px 10px;
}
.chart-modal-card {
width: 100%;
border-radius: 14px;
}
.chart-modal-body {
min-height: 300px;
height: min(72vh, 620px);
padding: 10px 10px 12px;
}
.chart-modal-content {
grid-template-columns: 1fr;
grid-template-rows: minmax(200px, 1fr) minmax(140px, auto);
}
.chart-modal-info-head,
.chart-modal-info-row {
grid-template-columns: minmax(120px, 1.2fr) repeat(var(--dataset-cols, 1), minmax(72px, 1fr));
}
}

1489
src/app/pages/dashboard/dashboard.ts
View File

File diff suppressed because it is too large Load Diff

360
src/app/pages/geral/geral.html
View File

@ -75,180 +75,214 @@
</div>
</div>
<div class="filters-row mt-4" data-animate>
<div class="filter-tabs">
<button type="button" class="filter-tab" [class.active]="filterSkil === 'ALL'" (click)="setFilter('ALL')" [disabled]="loading">
Todos
</button>
<ng-container *ngIf="!isClientRestricted">
<button type="button" class="filter-tab" [class.active]="filterSkil === 'PF'" (click)="setFilter('PF')" [disabled]="loading">
<i class="bi bi-person me-1"></i> Pessoa Física
<div class="filters-stack mt-4" data-animate>
<div class="filters-row filters-row-top">
<div class="filter-tabs">
<button type="button" class="filter-tab" [class.active]="filterSkil === 'ALL'" (click)="setFilter('ALL')" [disabled]="loading">
Todos
</button>
<button type="button" class="filter-tab" [class.active]="filterSkil === 'PJ'" (click)="setFilter('PJ')" [disabled]="loading">
<i class="bi bi-building me-1"></i> Pessoa Jurídica
</button>
<button type="button" class="filter-tab" [class.active]="filterSkil === 'RESERVA'" (click)="setFilter('RESERVA')" [disabled]="loading">
<i class="bi bi-archive me-1"></i> Reservas
</button>
</ng-container>
<button type="button" class="filter-tab" [class.active]="filterStatus === 'BLOCKED'" (click)="toggleBlockedFilter()" [disabled]="loading">
<i class="bi bi-slash-circle me-1"></i> Bloqueadas
</button>
<ng-container *ngIf="filterStatus === 'BLOCKED'">
<button
type="button"
class="filter-tab"
[class.active]="blockedStatusMode === 'PERDA_ROUBO'"
(click)="setBlockedStatusMode('PERDA_ROUBO')"
[disabled]="loading">
Perda/Roubo
</button>
<button
type="button"
class="filter-tab"
[class.active]="blockedStatusMode === 'BLOQUEIO_120'"
(click)="setBlockedStatusMode('BLOQUEIO_120')"
[disabled]="loading">
120 dias
</button>
</ng-container>
</div>
<!-- CLIENTE MULTI-SELECT -->
<div class="client-filter-wrap" *ngIf="!isClientRestricted" (click)="$event.stopPropagation()">
<button
type="button"
class="btn-client-filter"
[class.has-selection]="selectedClients.length > 0"
(click)="toggleClientMenu()"
[disabled]="loading">
<ng-container *ngIf="selectedClients.length === 0">
<i class="bi bi-people-fill me-2"></i>
<span>Clientes</span>
<i class="bi bi-chevron-down ms-2 small"></i>
<ng-container *ngIf="!isClientRestricted">
<button type="button" class="filter-tab" [class.active]="filterSkil === 'PF'" (click)="setFilter('PF')" [disabled]="loading">
<i class="bi bi-person me-1"></i> Pessoa Física
</button>
<button type="button" class="filter-tab" [class.active]="filterSkil === 'PJ'" (click)="setFilter('PJ')" [disabled]="loading">
<i class="bi bi-building me-1"></i> Pessoa Jurídica
</button>
<button type="button" class="filter-tab" [class.active]="filterSkil === 'RESERVA'" (click)="setFilter('RESERVA')" [disabled]="loading">
<i class="bi bi-archive me-1"></i> Reservas
</button>
</ng-container>
<ng-container *ngIf="selectedClients.length > 0">
<div class="chips-container">
<span *ngFor="let client of selectedClients" class="client-chip" (click)="$event.stopPropagation()">
{{ client }}
<i class="bi bi-x chip-close" (click)="removeClient(client, $event)"></i>
</span>
</div>
<i class="bi bi-chevron-down ms-1 small text-muted"></i>
<button type="button" class="filter-tab" [class.active]="filterStatus === 'BLOCKED'" (click)="toggleBlockedFilter()" [disabled]="loading">
<i class="bi bi-slash-circle me-1"></i> Bloqueadas
</button>
<ng-container *ngIf="filterStatus === 'BLOCKED'">
<button
type="button"
class="filter-tab"
[class.active]="blockedStatusMode === 'PERDA_ROUBO'"
(click)="setBlockedStatusMode('PERDA_ROUBO')"
[disabled]="loading">
Perda/Roubo
</button>
<button
type="button"
class="filter-tab"
[class.active]="blockedStatusMode === 'BLOQUEIO_120'"
(click)="setBlockedStatusMode('BLOQUEIO_120')"
[disabled]="loading">
120 dias
</button>
</ng-container>
</button>
<div class="client-dropdown" *ngIf="showClientMenu">
<div class="dropdown-header-search">
<input
type="text"
class="form-control form-control-sm"
placeholder="Buscar na lista..."
[(ngModel)]="clientSearchTerm"
autofocus
(click)="$event.stopPropagation()">
</div>
<div class="dropdown-list">
<div class="dropdown-item-custom" [class.selected]="selectedClients.length === 0" (click)="selectClient(null)">
<i class="bi bi-grid me-2"></i> Todos os Clientes
</div>
<ng-container *ngFor="let client of filteredClientsList">
<div class="dropdown-item-custom" [class.selected]="isClientSelected(client)" (click)="selectClient(client)">
<div class="d-flex align-items-center justify-content-between w-100">
<span>{{ client }}</span>
<i class="bi bi-check-lg text-brand" *ngIf="isClientSelected(client)"></i>
</div>
</div>
</ng-container>
</div>
</div>
</div>
<div class="additional-filter-wrap" *ngIf="!isClientRestricted" (click)="$event.stopPropagation()">
<button
type="button"
class="btn-client-filter btn-additional-filter"
[class.has-selection]="hasAdditionalFiltersApplied"
(click)="toggleAdditionalMenu()"
[disabled]="loading">
<ng-container *ngIf="!hasAdditionalFiltersApplied">
<i class="bi bi-sliders2-vertical me-2"></i>
<span>Adicionais</span>
<i class="bi bi-chevron-down ms-2 small"></i>
</ng-container>
<ng-container *ngIf="hasAdditionalFiltersApplied">
<div class="chips-container">
<span class="client-chip">
{{ additionalModeLabel }}
</span>
<span *ngFor="let label of additionalSelectedLabels" class="client-chip">
{{ label }}
</span>
</div>
<i class="bi bi-chevron-down ms-1 small text-muted"></i>
</ng-container>
</button>
<div class="client-dropdown additional-dropdown" *ngIf="showAdditionalMenu">
<div class="additional-dropdown-section">
<div class="additional-dropdown-title">Modo</div>
<div class="additional-mode-tabs">
<button
type="button"
class="additional-mode-btn"
[class.active]="additionalMode === 'ALL'"
(click)="setAdditionalMode('ALL')"
[disabled]="loading">
Todos os adicionais
</button>
<button
type="button"
class="additional-mode-btn"
[class.active]="additionalMode === 'WITH'"
(click)="setAdditionalMode('WITH')"
[disabled]="loading">
Com adicionais
</button>
<button
type="button"
class="additional-mode-btn"
[class.active]="additionalMode === 'WITHOUT'"
(click)="setAdditionalMode('WITHOUT')"
[disabled]="loading">
Sem adicionais
</button>
</div>
<div class="filters-row filters-row-bottom" *ngIf="!isClientRestricted">
<div class="operadora-empresa-filters" (click)="$event.stopPropagation()">
<div class="filter-select-box">
<app-select
class="select-glass"
size="sm"
[options]="operadoraFilterOptions"
labelKey="label"
valueKey="value"
[(ngModel)]="filterOperadora"
(ngModelChange)="setOperadoraFilter($event)"
[disabled]="loading"
></app-select>
</div>
<div class="additional-dropdown-section">
<div class="additional-dropdown-title">Serviços</div>
<div class="additional-services-chips">
<button
type="button"
class="additional-chip-btn"
*ngFor="let svc of additionalServiceOptions"
[class.active]="isAdditionalServiceSelected(svc.key)"
(click)="toggleAdditionalService(svc.key)"
[disabled]="loading">
{{ svc.label }}
</button>
<div class="filter-select-box">
<app-select
class="select-glass"
size="sm"
[options]="contaEmpresaFilterOptions"
labelKey="label"
valueKey="value"
[(ngModel)]="filterContaEmpresa"
(ngModelChange)="setContaEmpresaFilter($event)"
[searchable]="true"
searchPlaceholder="Buscar empresa..."
[disabled]="loading || loadingAccountCompanies"
></app-select>
</div>
</div>
<!-- CLIENTE MULTI-SELECT -->
<div class="client-filter-wrap" (click)="$event.stopPropagation()">
<button
type="button"
class="btn-client-filter"
[class.has-selection]="selectedClients.length > 0"
(click)="toggleClientMenu()"
[disabled]="loading">
<ng-container *ngIf="selectedClients.length === 0">
<i class="bi bi-people-fill me-2"></i>
<span>Clientes</span>
<i class="bi bi-chevron-down ms-2 small"></i>
</ng-container>
<ng-container *ngIf="selectedClients.length > 0">
<div class="chips-container">
<span *ngFor="let client of selectedClients" class="client-chip" (click)="$event.stopPropagation()">
{{ client }}
<i class="bi bi-x chip-close" (click)="removeClient(client, $event)"></i>
</span>
</div>
<i class="bi bi-chevron-down ms-1 small text-muted"></i>
</ng-container>
</button>
<div class="client-dropdown" *ngIf="showClientMenu">
<div class="dropdown-header-search">
<input
type="text"
class="form-control form-control-sm"
placeholder="Buscar na lista..."
[(ngModel)]="clientSearchTerm"
autofocus
(click)="$event.stopPropagation()">
</div>
<div class="dropdown-list">
<div class="dropdown-item-custom" [class.selected]="selectedClients.length === 0" (click)="selectClient(null)">
<i class="bi bi-grid me-2"></i> Todos os Clientes
</div>
<ng-container *ngFor="let client of filteredClientsList">
<div class="dropdown-item-custom" [class.selected]="isClientSelected(client)" (click)="selectClient(client)">
<div class="d-flex align-items-center justify-content-between w-100">
<span>{{ client }}</span>
<i class="bi bi-check-lg text-brand" *ngIf="isClientSelected(client)"></i>
</div>
</div>
</ng-container>
</div>
</div>
</div>
<div class="additional-dropdown-footer">
<button
type="button"
class="additional-chip-btn clear"
(click)="clearAdditionalFilters()"
[disabled]="loading">
Limpar filtros adicionais
</button>
<div class="additional-filter-wrap" (click)="$event.stopPropagation()">
<button
type="button"
class="btn-client-filter btn-additional-filter"
[class.has-selection]="hasAdditionalFiltersApplied"
(click)="toggleAdditionalMenu()"
[disabled]="loading">
<ng-container *ngIf="!hasAdditionalFiltersApplied">
<i class="bi bi-sliders2-vertical me-2"></i>
<span>Adicionais</span>
<i class="bi bi-chevron-down ms-2 small"></i>
</ng-container>
<ng-container *ngIf="hasAdditionalFiltersApplied">
<div class="chips-container">
<span class="client-chip">
{{ additionalModeLabel }}
</span>
<span *ngFor="let label of additionalSelectedLabels" class="client-chip">
{{ label }}
</span>
</div>
<i class="bi bi-chevron-down ms-1 small text-muted"></i>
</ng-container>
</button>
<div class="client-dropdown additional-dropdown" *ngIf="showAdditionalMenu">
<div class="additional-dropdown-section">
<div class="additional-dropdown-title">Modo</div>
<div class="additional-mode-tabs">
<button
type="button"
class="additional-mode-btn"
[class.active]="additionalMode === 'ALL'"
(click)="setAdditionalMode('ALL')"
[disabled]="loading">
Todos os adicionais
</button>
<button
type="button"
class="additional-mode-btn"
[class.active]="additionalMode === 'WITH'"
(click)="setAdditionalMode('WITH')"
[disabled]="loading">
Com adicionais
</button>
<button
type="button"
class="additional-mode-btn"
[class.active]="additionalMode === 'WITHOUT'"
(click)="setAdditionalMode('WITHOUT')"
[disabled]="loading">
Sem adicionais
</button>
</div>
</div>
<div class="additional-dropdown-section">
<div class="additional-dropdown-title">Serviços</div>
<div class="additional-services-chips">
<button
type="button"
class="additional-chip-btn"
*ngFor="let svc of additionalServiceOptions"
[class.active]="isAdditionalServiceSelected(svc.key)"
(click)="toggleAdditionalService(svc.key)"
[disabled]="loading">
{{ svc.label }}
</button>
</div>
</div>
<div class="additional-dropdown-footer">
<button
type="button"
class="additional-chip-btn clear"
(click)="clearAdditionalFilters()"
[disabled]="loading">
Limpar filtros adicionais
</button>
</div>
</div>
</div>
</div>

68
src/app/pages/geral/geral.scss
View File

@ -123,11 +123,35 @@
.btn-glass { border-radius: 12px; font-weight: 900; background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(3, 15, 170, 0.25); color: var(--blue); &:hover { transform: translateY(-2px); border-color: var(--brand); background: #fff; } }
/* Filtros e Multi-Select */
.filters-row { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.filters-stack {
display: flex;
flex-direction: column;
gap: 10px;
}
.filters-row {
display: flex;
justify-content: center;
align-items: flex-end;
gap: 12px;
flex-wrap: wrap;
margin-top: 0;
position: relative;
z-index: 30;
overflow: visible;
}
.filters-row-top {
justify-content: center;
}
.filters-row-bottom {
justify-content: center;
}
.filter-tabs { display: flex; gap: 4px; padding: 4px; background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(17, 18, 20, 0.08); border-radius: 12px; backdrop-filter: blur(8px); }
.filter-tab { border: none; background: transparent; padding: 8px 16px; border-radius: 8px; font-size: 0.85rem; font-weight: 700; color: var(--muted); transition: all 0.2s ease; display: flex; align-items: center; gap: 6px; &:hover { color: var(--text); background: rgba(255, 255, 255, 0.5); } &.active { background: #fff; color: var(--brand); box-shadow: 0 2px 8px rgba(227, 61, 207, 0.15); } &:disabled { opacity: 0.5; cursor: not-allowed; } }
.client-filter-wrap { position: relative; }
.client-filter-wrap { position: relative; z-index: 40; }
.btn-client-filter { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 12px; border: 1px solid rgba(17, 18, 20, 0.08); background: rgba(255, 255, 255, 0.6); color: var(--muted); font-weight: 700; font-size: 0.85rem; backdrop-filter: blur(8px); transition: all 0.2s; min-height: 38px; height: auto; flex-wrap: wrap; &:hover { background: #fff; border-color: var(--blue); color: var(--blue); } &.active, &.has-selection { background: #fff; border-color: var(--brand); } }
.chips-container { display: flex; flex-wrap: wrap; gap: 6px; max-width: 400px; }
.client-chip { display: inline-flex; align-items: center; background: rgba(227, 61, 207, 0.1); color: var(--brand); border: 1px solid rgba(227, 61, 207, 0.2); border-radius: 6px; padding: 2px 6px; font-size: 0.75rem; font-weight: 800; cursor: default; user-select: none; }
@ -140,6 +164,34 @@
.additional-filter-wrap {
position: relative;
z-index: 40;
}
.operadora-empresa-filters {
display: flex;
align-items: flex-end;
gap: 10px;
flex-wrap: wrap;
position: relative;
z-index: 50;
}
.filter-select-box {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 190px;
position: relative;
z-index: 50;
}
.filter-select-label {
font-size: 0.66rem;
font-weight: 900;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(17, 18, 20, 0.58);
padding-left: 2px;
}
.btn-additional-filter {
@ -249,6 +301,18 @@
}
}
@media (max-width: 768px) {
.operadora-empresa-filters {
width: 100%;
justify-content: center;
}
.filter-select-box {
flex: 1 1 220px;
min-width: 0;
}
}
/* KPIs */
.geral-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 20px; margin-bottom: 16px; width: 100%; @media (max-width: 992px) { grid-template-columns: repeat(2, 1fr); } @media (max-width: 576px) { grid-template-columns: 1fr; } }
.geral-kpis.geral-kpis-client {

32
src/app/pages/geral/geral.spec.ts
View File

@ -73,4 +73,36 @@ describe('Geral', () => {
expect(component.createBatchLines[0].linha).toBe('11888888888');
expect(component.createBatchLines[0]['planoContrato']).toBe('PLANO B');
});
it('should apply TIM filter in client-side pipeline using conta TIM textual', () => {
component.filterOperadora = 'TIM';
component.filterContaEmpresa = '';
component.filterStatus = 'ALL';
component.additionalMode = 'ALL';
component.selectedAdditionalServices = [];
const filtered = (component as any).applyAdditionalFiltersClientSide([
{ id: '1', item: 1, conta: 'TIM', linha: '11911111111', cliente: 'A', usuario: 'U', vencConta: null, status: 'ATIVO' },
{ id: '2', item: 2, conta: '455371844', linha: '11922222222', cliente: 'B', usuario: 'U', vencConta: null, status: 'ATIVO' },
]);
expect(filtered.length).toBe(1);
expect(filtered[0].conta).toBe('TIM');
});
it('should combine operadora and empresa filters for VIVO MACROPHONY', () => {
component.filterOperadora = 'VIVO';
component.filterContaEmpresa = 'VIVO MACROPHONY';
component.filterStatus = 'ALL';
component.additionalMode = 'ALL';
component.selectedAdditionalServices = [];
const filtered = (component as any).applyAdditionalFiltersClientSide([
{ id: '1', item: 1, conta: '460161507', linha: '11911111111', cliente: 'A', usuario: 'U', vencConta: null, status: 'ATIVO' },
{ id: '2', item: 2, conta: '0435288088', linha: '11922222222', cliente: 'B', usuario: 'U', vencConta: null, status: 'ATIVO' },
]);
expect(filtered.length).toBe(1);
expect(filtered[0].conta).toBe('460161507');
});
});

170
src/app/pages/geral/geral.ts
View File

@ -52,11 +52,20 @@ import {
buildBatchMassPreview,
mergeMassRows
} from './batch-mass-input.util';
import {
DEFAULT_ACCOUNT_COMPANIES,
mergeAccountCompaniesWithDefaults,
normalizeConta as normalizeContaValue,
resolveEmpresaByConta,
resolveOperadoraContext,
sameConta as sameContaValue,
} from '../../utils/account-operator.util';
type SortDir = 'asc' | 'desc';
type CreateMode = 'NEW_CLIENT' | 'NEW_LINE_IN_GROUP';
type CreateEntryMode = 'SINGLE' | 'BATCH';
type AdditionalMode = 'ALL' | 'WITH' | 'WITHOUT';
type OperadoraFilterMode = 'ALL' | 'VIVO' | 'CLARO' | 'TIM';
type AdditionalServiceKey = 'gvd' | 'skeelo' | 'news' | 'travel' | 'sync' | 'dispositivo';
type BlockedStatusMode = 'ALL' | 'PERDA_ROUBO' | 'BLOQUEIO_120';
@ -86,6 +95,9 @@ interface ApiPagedResult<T> {
interface ApiLineList {
id: string;
item: number;
conta?: string | null;
contaEmpresa?: string | null;
empresaConta?: string | null;
linha: string | null;
chip?: string | null;
cliente: string | null;
@ -396,6 +408,8 @@ export class Geral implements OnInit, AfterViewInit, OnDestroy {
blockedStatusMode: BlockedStatusMode = 'ALL';
additionalMode: AdditionalMode = 'ALL';
selectedAdditionalServices: AdditionalServiceKey[] = [];
filterOperadora: OperadoraFilterMode = 'ALL';
filterContaEmpresa = '';
readonly additionalServiceOptions: Array<{ key: AdditionalServiceKey; label: string }> = [
{ key: 'gvd', label: 'Gestão Voz e Dados' },
{ key: 'skeelo', label: 'Skeelo' },
@ -404,6 +418,12 @@ export class Geral implements OnInit, AfterViewInit, OnDestroy {
{ key: 'sync', label: 'Vivo Sync' },
{ key: 'dispositivo', label: 'Vivo Gestão Dispositivo' }
];
readonly operadoraFilterOptions: Array<{ label: string; value: OperadoraFilterMode }> = [
{ label: 'Todas operadoras', value: 'ALL' },
{ label: 'VIVO', value: 'VIVO' },
{ label: 'CLARO', value: 'CLARO' },
{ label: 'TIM', value: 'TIM' },
];
clientsList: string[] = [];
loadingClientsList = false;
@ -521,12 +541,10 @@ export class Geral implements OnInit, AfterViewInit, OnDestroy {
'M2M 50MB'
];
private readonly fallbackAccountCompanies: AccountCompanyOption[] = [
{ empresa: 'CLARO LINE MÓVEL', contas: ['172593311', '172593840'] },
{ empresa: 'VIVO MACROPHONY', contas: ['0430237019', '0437488125', '0449508564', '0454371844'] },
{ empresa: 'VIVO LINE MÓVEL', contas: ['0435288088'] },
{ empresa: 'TIM LINE MÓVEL', contas: ['0072046192'] }
];
private readonly fallbackAccountCompanies: AccountCompanyOption[] = DEFAULT_ACCOUNT_COMPANIES.map((group) => ({
empresa: group.empresa,
contas: [...group.contas],
}));
accountCompanies: AccountCompanyOption[] = [...this.fallbackAccountCompanies];
loadingAccountCompanies = false;
@ -538,6 +556,15 @@ export class Geral implements OnInit, AfterViewInit, OnDestroy {
return this.accountCompanies.map((x) => x.empresa);
}
get contaEmpresaFilterOptions(): Array<{ label: string; value: string }> {
const empresas = this.getContaEmpresaOptionsByOperadora(this.filterOperadora);
const merged = this.mergeOption(this.filterContaEmpresa, empresas);
return [
{ label: 'Todas empresas', value: '' },
...merged.map((empresa) => ({ label: empresa, value: empresa })),
];
}
get contaOptionsForCreate(): string[] {
return this.getContasByEmpresa(this.createModel?.contaEmpresa);
}
@ -789,8 +816,12 @@ export class Geral implements OnInit, AfterViewInit, OnDestroy {
return this.additionalMode !== 'ALL' || this.selectedAdditionalServices.length > 0;
}
get hasOperadoraEmpresaFiltersApplied(): boolean {
return this.filterOperadora !== 'ALL' || !!this.filterContaEmpresa.trim();
}
get hasClientSideFiltersApplied(): boolean {
return this.hasAdditionalFiltersApplied || this.filterStatus === 'BLOCKED';
return this.hasAdditionalFiltersApplied || this.filterStatus === 'BLOCKED' || this.hasOperadoraEmpresaFiltersApplied;
}
get additionalModeLabel(): string {
@ -1197,9 +1228,10 @@ export class Geral implements OnInit, AfterViewInit, OnDestroy {
this.http.get<AccountCompanyOption[]>(`${this.apiBase}/account-companies`).subscribe({
next: (data) => {
const normalized = this.normalizeAccountCompanies(data);
this.accountCompanies =
normalized.length > 0 ? normalized : [...this.fallbackAccountCompanies];
const source = normalized.length > 0 ? normalized : this.fallbackAccountCompanies;
this.accountCompanies = mergeAccountCompaniesWithDefaults(source);
this.loadingAccountCompanies = false;
this.syncContaEmpresaFilterByOperadora();
this.syncContaEmpresaSelection(this.createModel);
this.syncContaEmpresaSelection(this.editModel);
@ -1208,8 +1240,9 @@ export class Geral implements OnInit, AfterViewInit, OnDestroy {
this.cdr.detectChanges();
},
error: () => {
this.accountCompanies = [...this.fallbackAccountCompanies];
this.accountCompanies = mergeAccountCompaniesWithDefaults(this.fallbackAccountCompanies);
this.loadingAccountCompanies = false;
this.syncContaEmpresaFilterByOperadora();
this.syncContaEmpresaSelection(this.createModel);
this.syncContaEmpresaSelection(this.editModel);
@ -1785,6 +1818,32 @@ export class Geral implements OnInit, AfterViewInit, OnDestroy {
this.refreshData();
}
setOperadoraFilter(mode: OperadoraFilterMode) {
if (this.isClientRestricted) return;
this.filterOperadora = mode;
this.syncContaEmpresaFilterByOperadora();
this.expandedGroup = null;
this.groupLines = [];
this.searchResolvedClient = null;
this.page = 1;
this.loadClients();
this.refreshData();
}
setContaEmpresaFilter(empresa: string) {
if (this.isClientRestricted) return;
const next = (empresa ?? '').toString().trim();
this.filterContaEmpresa = next;
this.expandedGroup = null;
this.groupLines = [];
this.searchResolvedClient = null;
this.page = 1;
this.loadClients();
this.refreshData();
}
private applyBaseFilters(params: HttpParams): HttpParams {
let next = params;
@ -1868,6 +1927,10 @@ export class Geral implements OnInit, AfterViewInit, OnDestroy {
return false;
}
if (!this.matchesOperadoraContaEmpresaFilters(line)) {
return false;
}
const selected = this.selectedAdditionalServices;
const hasSelected = selected.length > 0;
@ -1891,6 +1954,40 @@ export class Geral implements OnInit, AfterViewInit, OnDestroy {
return true;
}
private matchesOperadoraContaEmpresaFilters(line: ApiLineList): boolean {
const hasOperadora = this.filterOperadora !== 'ALL';
const selectedEmpresa = this.filterContaEmpresa.trim();
const hasEmpresa = !!selectedEmpresa;
if (!hasOperadora && !hasEmpresa) return true;
const conta = (line as any)?.conta ?? (line as any)?.Conta ?? '';
const empresaConta = (line as any)?.contaEmpresa
?? (line as any)?.empresaConta
?? (line as any)?.ContaEmpresa
?? (line as any)?.EmpresaConta
?? (line as any)?.empresa_conta
?? (line as any)?.Empresa_Conta
?? (line as any)?.['empresa (conta)']
?? (line as any)?.['EMPRESA (CONTA)']
?? '';
const context = resolveOperadoraContext({
conta,
empresaConta,
accountCompanies: this.accountCompanies,
});
if (hasOperadora && context.operadora !== this.filterOperadora) {
return false;
}
if (!hasEmpresa) return true;
const resolvedEmpresa = (context.empresaConta || this.findEmpresaByConta(conta) || '').toString().trim();
if (!resolvedEmpresa) return false;
return this.normalizeFilterToken(resolvedEmpresa) === this.normalizeFilterToken(selectedEmpresa);
}
private applyAdditionalFiltersClientSide(lines: ApiLineList[]): ApiLineList[] {
if (!Array.isArray(lines) || lines.length === 0) return [];
return lines.filter((line) => this.matchesAdditionalFilters(line));
@ -2702,6 +2799,13 @@ export class Geral implements OnInit, AfterViewInit, OnDestroy {
parts.push(this.selectedAdditionalServices.join('-'));
}
if (this.filterOperadora !== 'ALL') {
parts.push(`operadora-${this.filterOperadora.toLowerCase()}`);
}
if (this.filterContaEmpresa.trim()) {
parts.push(`empresa-${this.normalizeFilterToken(this.filterContaEmpresa).toLowerCase()}`);
}
return parts.join('_');
}
@ -5144,26 +5248,46 @@ export class Geral implements OnInit, AfterViewInit, OnDestroy {
return found ? [...found.contas] : [];
}
private findEmpresaByConta(conta: any): string {
const target = this.normalizeConta(conta);
if (!target) return '';
private getContaEmpresaOptionsByOperadora(mode: OperadoraFilterMode): string[] {
const empresas = this.mergeOptionList([], this.accountCompanies.map((group) => group?.empresa ?? ''))
.filter((empresa) => !!(empresa ?? '').toString().trim());
const found = this.accountCompanies.find((group) =>
(group.contas ?? []).some((c) => this.sameConta(c, target))
);
return found?.empresa ?? '';
const filtered = mode === 'ALL'
? empresas
: empresas.filter((empresa) => {
const operadora = resolveOperadoraContext({
empresaConta: empresa,
accountCompanies: this.accountCompanies,
}).operadora;
return operadora === mode;
});
return filtered.sort((a, b) => a.localeCompare(b, 'pt-BR', { sensitivity: 'base' }));
}
private syncContaEmpresaFilterByOperadora(): void {
const selected = this.filterContaEmpresa.trim();
if (!selected) return;
const available = this.getContaEmpresaOptionsByOperadora(this.filterOperadora);
const normalizedSelected = this.normalizeFilterToken(selected);
const hasSelected = available.some((empresa) => this.normalizeFilterToken(empresa) === normalizedSelected);
if (!hasSelected) {
this.filterContaEmpresa = '';
}
}
private findEmpresaByConta(conta: any): string {
return resolveEmpresaByConta(conta, this.accountCompanies);
}
private normalizeConta(value: any): string {
const raw = (value ?? '').toString().trim();
if (!raw) return '';
if (!/^\d+$/.test(raw)) return raw.toUpperCase();
const noLeadingZero = raw.replace(/^0+/, '');
return noLeadingZero || '0';
return normalizeContaValue(value);
}
private sameConta(a: any, b: any): boolean {
return this.normalizeConta(a) === this.normalizeConta(b);
return sameContaValue(a, b);
}
private syncContaEmpresaSelection(model: any) {

80
src/app/utils/account-operator.util.spec.ts Normal file
View File

@ -0,0 +1,80 @@
import {
DEFAULT_ACCOUNT_COMPANIES,
mergeAccountCompaniesWithDefaults,
normalizeConta,
resolveEmpresaByConta,
resolveOperadoraContext,
sameConta,
} from './account-operator.util';
describe('account-operator.util', () => {
it('normaliza contas removendo zeros a esquerda', () => {
expect(normalizeConta('0455371844')).toBe('455371844');
expect(normalizeConta('000187890982')).toBe('187890982');
});
it('compara contas normalizadas', () => {
expect(sameConta('0435288088', '435288088')).toBeTrue();
expect(sameConta('172593311', '172593840')).toBeFalse();
});
it('resolve empresa por conta com regras deterministicas obrigatorias', () => {
expect(resolveEmpresaByConta('455371844', [])).toBe('VIVO MACROPHONY');
expect(resolveEmpresaByConta('460161507', [])).toBe('VIVO MACROPHONY');
expect(resolveEmpresaByConta('187890982', [])).toBe('CLARO LINE MÓVEL');
expect(resolveEmpresaByConta('TIM', [])).toBe('TIM LINE MÓVEL');
});
it('mescla lista da API com defaults sem perder contas obrigatorias', () => {
const merged = mergeAccountCompaniesWithDefaults([
{ empresa: 'VIVO MACROPHONY', contas: ['0430237019'] },
]);
const vivo = merged.find((group) => group.empresa === 'VIVO MACROPHONY');
const contas = (vivo?.contas ?? []).map((value) => normalizeConta(value));
expect(contas).toContain(normalizeConta('455371844'));
expect(contas).toContain(normalizeConta('460161507'));
expect(contas).toContain(normalizeConta('0430237019'));
});
it('classifica operadora e grupo da vivo por contexto', () => {
const vivo = resolveOperadoraContext({
conta: '455371844',
accountCompanies: DEFAULT_ACCOUNT_COMPANIES,
});
expect(vivo.operadora).toBe('VIVO');
expect(vivo.vivoEmpresaGrupo).toBe('MACROPHONY');
const claro = resolveOperadoraContext({
conta: '187890982',
accountCompanies: DEFAULT_ACCOUNT_COMPANIES,
});
expect(claro.operadora).toBe('CLARO');
expect(claro.vivoEmpresaGrupo).toBeNull();
const tim = resolveOperadoraContext({
empresaConta: 'TIM LINE MÓVEL',
accountCompanies: DEFAULT_ACCOUNT_COMPANIES,
});
expect(tim.operadora).toBe('TIM');
const timByConta = resolveOperadoraContext({
conta: 'TIM',
accountCompanies: DEFAULT_ACCOUNT_COMPANIES,
});
expect(timByConta.operadora).toBe('TIM');
});
it('prioriza mapeamento deterministico por conta mesmo com empresa da linha divergente', () => {
const vivoDeterministico = resolveOperadoraContext({
conta: '455371844',
empresaConta: 'VIVO LINE MÓVEL',
accountCompanies: DEFAULT_ACCOUNT_COMPANIES,
});
expect(vivoDeterministico.operadora).toBe('VIVO');
expect(vivoDeterministico.empresaConta).toBe('VIVO MACROPHONY');
expect(vivoDeterministico.vivoEmpresaGrupo).toBe('MACROPHONY');
});
});

176
src/app/utils/account-operator.util.ts Normal file
View File

@ -0,0 +1,176 @@
import { normalizeAccentInsensitive } from './text-normalization.util';
export type OperadoraNome = 'VIVO' | 'CLARO' | 'TIM' | 'OUTRA';
export type OperadoraFiltro = 'TODOS' | 'VIVO' | 'CLARO' | 'TIM';
export type VivoEmpresaGrupo = 'MACROPHONY' | 'LINE MOVEL' | 'OUTRA';
export interface AccountCompanyOption {
empresa: string;
contas: string[];
}
export interface OperadoraResolution {
operadora: OperadoraNome;
empresaConta: string;
vivoEmpresaGrupo: VivoEmpresaGrupo | null;
}
export const DEFAULT_ACCOUNT_COMPANIES: AccountCompanyOption[] = [
{ empresa: 'CLARO LINE MÓVEL', contas: ['172593311', '172593840', '187890982'] },
{ empresa: 'VIVO MACROPHONY', contas: ['0430237019', '0437488125', '0449508564', '0454371844', '455371844', '460161507'] },
{ empresa: 'VIVO LINE MÓVEL', contas: ['0435288088'] },
{ empresa: 'TIM LINE MÓVEL', contas: ['TIM'] },
];
const DEFAULT_EMPRESA_BY_CONTA = buildDefaultEmpresaByConta();
function buildDefaultEmpresaByConta(): Map<string, string> {
const result = new Map<string, string>();
DEFAULT_ACCOUNT_COMPANIES.forEach((group) => {
(group.contas ?? []).forEach((conta) => {
const normalized = normalizeConta(conta);
if (!normalized) return;
result.set(normalized, group.empresa);
});
});
return result;
}
function normalizeEmpresaKey(value: unknown): string {
return normalizeAccentInsensitive(value, 'upper').replace(/[^A-Z0-9]/g, '');
}
function normalizeContas(contas: unknown): string[] {
if (!Array.isArray(contas)) return [];
const result: string[] = [];
const seen = new Set<string>();
contas.forEach((value) => {
const trimmed = String(value ?? '').trim();
if (!trimmed) return;
const normalized = normalizeConta(trimmed);
if (!normalized || seen.has(normalized)) return;
seen.add(normalized);
result.push(trimmed);
});
return result;
}
export function normalizeConta(value: unknown): string {
const raw = String(value ?? '').trim();
if (!raw) return '';
if (!/^\d+$/.test(raw)) {
return normalizeAccentInsensitive(raw, 'upper');
}
const noLeadingZero = raw.replace(/^0+/, '');
return noLeadingZero || '0';
}
export function sameConta(a: unknown, b: unknown): boolean {
return normalizeConta(a) === normalizeConta(b);
}
export function mergeAccountCompaniesWithDefaults(
source: AccountCompanyOption[] | null | undefined
): AccountCompanyOption[] {
const merged = new Map<string, { empresa: string; contas: string[] }>();
const contaSeenByEmpresa = new Map<string, Set<string>>();
const addGroup = (empresaRaw: unknown, contasRaw: unknown) => {
const empresa = String(empresaRaw ?? '').trim();
if (!empresa) return;
const key = normalizeEmpresaKey(empresa);
const contas = normalizeContas(contasRaw);
if (!merged.has(key)) {
merged.set(key, { empresa, contas: [] });
contaSeenByEmpresa.set(key, new Set<string>());
}
const record = merged.get(key);
const seen = contaSeenByEmpresa.get(key);
if (!record || !seen) return;
contas.forEach((conta) => {
const normalized = normalizeConta(conta);
if (!normalized || seen.has(normalized)) return;
seen.add(normalized);
record.contas.push(conta);
});
};
(source ?? []).forEach((group) => addGroup(group?.empresa, group?.contas));
DEFAULT_ACCOUNT_COMPANIES.forEach((group) => addGroup(group.empresa, group.contas));
return Array.from(merged.values());
}
export function resolveEmpresaByConta(
conta: unknown,
accountCompanies: AccountCompanyOption[] | null | undefined
): string {
const target = normalizeConta(conta);
if (!target) return '';
const deterministic = DEFAULT_EMPRESA_BY_CONTA.get(target);
if (deterministic) return deterministic;
const found = (accountCompanies ?? []).find((group) =>
(group.contas ?? []).some((candidate) => sameConta(candidate, target))
);
return found?.empresa ?? '';
}
function resolveOperadoraByEmpresa(empresa: unknown): OperadoraNome {
const normalized = normalizeEmpresaKey(empresa);
if (!normalized) return 'OUTRA';
if (normalized.includes('CLARO')) return 'CLARO';
if (normalized.includes('TIM')) return 'TIM';
if (normalized.includes('VIVO') || normalized.includes('MACROPHONY')) return 'VIVO';
return 'OUTRA';
}
function resolveVivoEmpresaGrupo(empresa: unknown): VivoEmpresaGrupo {
const normalized = normalizeEmpresaKey(empresa);
if (!normalized) return 'OUTRA';
if (normalized.includes('MACROPHONY')) return 'MACROPHONY';
if (normalized.includes('LINEMOVEL') || normalized.includes('LINEMOV')) return 'LINE MOVEL';
return 'OUTRA';
}
export function resolveOperadoraContext(input: {
conta?: unknown;
empresaConta?: unknown;
accountCompanies?: AccountCompanyOption[] | null;
}): OperadoraResolution {
const contaRaw = String(input.conta ?? '').trim();
const contaEmpresaRaw = String(input.empresaConta ?? '').trim();
const empresaFromConta = resolveEmpresaByConta(input.conta, input.accountCompanies);
// Regras por conta (determinísticas) têm prioridade sobre texto livre da linha.
const empresaConta = empresaFromConta || contaEmpresaRaw;
let operadora = resolveOperadoraByEmpresa(empresaConta);
if (operadora === 'OUTRA' && empresaFromConta) {
operadora = resolveOperadoraByEmpresa(empresaFromConta);
}
if (operadora === 'OUTRA' && contaRaw) {
operadora = resolveOperadoraByEmpresa(contaRaw);
}
const vivoEmpresaGrupo = operadora === 'VIVO'
? resolveVivoEmpresaGrupo(empresaConta || empresaFromConta || contaRaw)
: null;
return {
operadora,
empresaConta: empresaConta || '',
vivoEmpresaGrupo,
};
}