From 14128cce995f192fad507973a2e29270244df29f Mon Sep 17 00:00:00 2001 From: Eduardo Date: Fri, 19 Dec 2025 17:19:56 -0300 Subject: [PATCH] =?UTF-8?q?Feat:=20Adiciona=20filtros=20PF/PJ,=20dropdown?= =?UTF-8?q?=20de=20clientes=20e=20visualiza=C3=A7=C3=A3o=20em=20grupo=20(a?= =?UTF-8?q?ccordion)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/pages/geral/geral.html | 658 +++++++++++++++-------------- src/app/pages/geral/geral.scss | 737 ++++++++++++++++----------------- src/app/pages/geral/geral.ts | 553 +++++++++++-------------- 3 files changed, 959 insertions(+), 989 deletions(-) diff --git a/src/app/pages/geral/geral.html b/src/app/pages/geral/geral.html index 5b0701c..899d965 100644 --- a/src/app/pages/geral/geral.html +++ b/src/app/pages/geral/geral.html @@ -1,401 +1,441 @@ - -
- - -
-
- Mostrando {{ pageStart }}–{{ pageEnd }} de {{ filteredCount }} registros -
- -
- - -
-
+
- + Detalhes da Linha
- - +
- -
-
-
ITÉM{{ detailData.item }}
-
CONTA{{ detailData.conta }}
-
LINHA{{ detailData.linha }}
-
CHIP{{ detailData.chip }}
- -
CLIENTE{{ detailData.cliente }}
-
USUÁRIO{{ detailData.usuario }}
-
PLANO CONTRATO{{ detailData.planoContrato }}
- -
STATUS{{ detailData.status }}
-
DATA DO BLOQUEIO{{ detailData.dataBloqueio }}
- -
SKIL{{ detailData.skil }}
-
MODALIDADE{{ detailData.modalidade }}
- -
CEDENTE{{ detailData.cedente }}
-
SOLICITANTE{{ detailData.solicitante }}
- -
DATA ENTREGA OPERA.{{ detailData.dataEntregaOpera }}
-
DATA ENTREGA CLIENTE{{ detailData.dataEntregaCliente }}
- -
VENC. DA CONTA{{ detailData.vencConta }}
+ +
+
+
+
+
Identificação
+
+
LINHA{{ detailData.linha || '-' }}
+
CLIENTE{{ detailData.cliente || '-' }}
+
USUÁRIO{{ detailData.usuario || '-' }}
+
+
+
ITEM{{ detailData.item }}
+
CHIP{{ detailData.chip || '-' }}
+
+
+
+
+
Contrato & Plano
+
+
PLANO CONTRATO{{ detailData.planoContrato || '-' }}
+
CONTA{{ detailData.conta || '-' }}
+
VENC. DA CONTA{{ detailData.vencConta || '-' }}
+
+
+
+
+
+
Status & Logística
+
+
STATUS{{ statusLabel(detailData.status) }}
+
DATA DO BLOQUEIO{{ formatDateBr(detailData.dataBloqueio) }}
+
MODALIDADE{{ detailData.modalidade || '-' }}
+
+
DATA ENTREGA OPERA.{{ formatDateBr(detailData.dataEntregaOpera) }}
+
DATA ENTREGA CLIENTE{{ formatDateBr(detailData.dataEntregaCliente) }}
+
+
+
+
Dados de Gestão
+
+
SKIL{{ detailData.skil || '-' }}
+
CEDENTE{{ detailData.cedente || '-' }}
+
SOLICITANTE{{ detailData.solicitante || '-' }}
+
+
+
- - -
- - Carregando detalhes... -
- +
Carregando detalhes...
- - -
-
+
-
- - Financeiro -
- - +
Financeiro
+
- -
- -
-
Vivo
-
-
FRAQUIA{{ financeData.franquiaVivo }}
-
VALOR DO PLANO R${{ financeData.valorPlanoVivo }}
-
GESTÃO VOZ E DADOS R${{ financeData.gestaoVozDados }}
-
SKEELO{{ financeData.skeelo }}
-
VIVO NEWS PLUS{{ financeData.vivoNewsPlus }}
-
VIVO TRAVEL MUNDO{{ financeData.vivoTravelMundo }}
-
VIVO GESTÃO DISPOSITIVO{{ financeData.vivoGestaoDispositivo }}
-
VALOR CONTRATO VIVO{{ financeData.valorContratoVivo }}
+
+
+
+
Vivo
+
+
Franquia {{ formatFranquia(financeData.franquiaVivo) }}
+
Valor Plano {{ formatMoney(financeData.valorPlanoVivo) }}
+
Gestão Voz/Dados {{ formatMoney(financeData.gestaoVozDados) }}
+
Skeelo {{ formatMoney(financeData.skeelo) }}
+
Vivo News+ {{ formatMoney(financeData.vivoNewsPlus) }}
+
Travel Mundo {{ formatMoney(financeData.vivoTravelMundo) }}
+
Gestão Disp. {{ formatMoney(financeData.vivoGestaoDispositivo) }}
+
+
Total Vivo {{ formatMoney(financeData.valorContratoVivo) }}
+
+
+
+
Line Móvel
+
+
Franquia Line {{ formatFranquia(financeData.franquiaLine) }}
+
Franquia Gestão {{ formatFranquia(financeData.franquiaGestao) }}
+
Locação Ap. {{ formatMoney(financeData.locacaoAp) }}
+
+
Total Line {{ formatMoney(financeData.valorContratoLine) }}
+
- -
-
Line Móvel
-
-
FRANQUIA LINE{{ financeData.franquiaLine }}
-
FRANQUIA GESTÃO{{ financeData.franquiaGestao }}
-
LOCAÇÃO AP.{{ financeData.locacaoAp }}
-
VALOR CONTRATO LINE{{ financeData.valorContratoLine }}
-
+
+
Desconto{{ formatMoney(financeData.desconto) }}
+
+
Lucro Estimado{{ formatMoney(financeData.lucro) }}
- -
-
DESCONTO{{ financeData.desconto }}
-
LUCRO{{ financeData.lucro }}
-
-
- - -
- - Carregando financeiro... -
- +
Carregando financeiro...
+ +
+
+
+
+
Editar Linha
+
+ + +
+
+
+ +
+
+ Identificação +
+
+
+
+
+
+
+
+
+
Contrato & Plano +
+
+
+
+
+
+
Status & Logística +
+
+
+
+
+
+
+
+
+
+
+ +
Carregando...
 +
+
+
\ No newline at end of file diff --git a/src/app/pages/geral/geral.scss b/src/app/pages/geral/geral.scss index e8fe766..31cbe3c 100644 --- a/src/app/pages/geral/geral.scss +++ b/src/app/pages/geral/geral.scss @@ -1,32 +1,44 @@ :host { + /* ================= PALETA DE CORES ================= */ --brand: #E33DCF; --blue: #030FAA; - --text: #111214; - --muted: rgba(17, 18, 20, 0.70); + --muted: rgba(17, 18, 20, 0.65); + + /* Cores Específicas (Financeiro) */ + --bg-vivo: #fbf5fc; + --text-vivo: #8a2be2; + --bg-line: #f5f6ff; + --text-line: #030FAA; + /* Dimensões & Bordas */ --radius-xl: 22px; --radius-lg: 16px; + --radius-md: 12px; display: block; + font-family: 'Inter', sans-serif; + color: var(--text); } +/* ========================================= */ +/* 1. LAYOUT DA PÁGINA & BACKGROUND */ +/* ========================================= */ .geral-page { - min-height: calc(100vh - 69.2px); + min-height: 100vh; padding: 24px 12px 90px; display: flex; justify-content: center; - - font-family: 'Inter', sans-serif; - position: relative; overflow: hidden; + /* Fundo com Gradientes Suaves */ background: radial-gradient(900px 420px at 20% 10%, rgba(227, 61, 207, 0.14), transparent 60%), radial-gradient(820px 380px at 80% 30%, rgba(227, 61, 207, 0.08), transparent 60%), linear-gradient(180deg, #ffffff 0%, #f5f5f7 70%); + /* Overlay sutil de ruído/textura (opcional) */ &::after { content: ''; position: absolute; @@ -36,15 +48,9 @@ } } -/* blobs fixos */ +/* Blobs Flutuantes (Animação de Fundo) */ .page-blob { - position: fixed; - pointer-events: none; - border-radius: 999px; - filter: blur(34px); - opacity: 0.55; - z-index: 0; - + position: fixed; pointer-events: none; border-radius: 999px; filter: blur(34px); opacity: 0.55; z-index: 0; background: radial-gradient(circle at 30% 30%, rgba(227,61,207,0.55), rgba(227,61,207,0.06)); animation: floaty 10s ease-in-out infinite; @@ -52,8 +58,12 @@ &.blob-2 { width: 520px; height: 520px; top: -220px; right: -240px; animation-duration: 12s; } &.blob-3 { width: 360px; height: 360px; bottom: -180px; left: 25%; animation-duration: 14s; } &.blob-4 { width: 520px; height: 520px; bottom: -260px; right: -260px; animation-duration: 16s; opacity: .45; } +} - @media (max-width: 992px) { opacity: 0.35; } +@keyframes floaty { + 0% { transform: translate(0, 0) scale(1); } + 50% { transform: translate(18px, 10px) scale(1.03); } + 100% { transform: translate(0, 0) scale(1); } } .container-geral { @@ -63,450 +73,427 @@ z-index: 1; } -/* CARD GLASS */ +/* Card Principal (Efeito de Vidro) */ .geral-card { border-radius: var(--radius-xl); - overflow: hidden; - + overflow: hidden; /* Importante para conter tabelas */ background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(227, 61, 207, 0.16); backdrop-filter: blur(12px); box-shadow: 0 22px 46px rgba(17, 18, 20, 0.10); - - /* borda interna */ position: relative; + display: flex; + flex-direction: column; + max-height: 85vh; /* Limita altura total do card na tela */ + &::before { - content: ''; - position: absolute; - inset: 1px; - border-radius: calc(var(--radius-xl) - 1px); - pointer-events: none; - border: 1px solid rgba(255, 255, 255, 0.65); - opacity: 0.75; + content: ''; position: absolute; inset: 1px; border-radius: calc(var(--radius-xl) - 1px); + pointer-events: none; border: 1px solid rgba(255, 255, 255, 0.65); opacity: 0.75; } } -/* HEADER */ +/* ========================================= */ +/* 2. HEADER & AÇÕES */ +/* ========================================= */ .geral-header { - padding: 16px 16px 14px 16px; + padding: 16px 24px; border-bottom: 1px solid rgba(17, 18, 20, 0.06); - background: linear-gradient(180deg, rgba(227,61,207,0.08), rgba(255,255,255,0.10)); + background: linear-gradient(180deg, rgba(227,61,207,0.06), rgba(255,255,255,0.2)); + flex-shrink: 0; /* Header não encolhe */ } .header-row-top { display: grid; - grid-template-columns: 1fr auto; + grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; @media (max-width: 768px) { grid-template-columns: 1fr; text-align: center; + gap: 16px; } } .header-title { - display: flex; - flex-direction: column; - align-items: flex-start; - - @media (max-width: 768px) { - align-items: center; - } + display: flex; flex-direction: column; align-items: center; text-align: center; } .title-badge { - display: inline-flex; - align-items: center; - gap: 10px; - - padding: 8px 12px; - border-radius: 999px; - - background: rgba(255, 255, 255, 0.78); - border: 1px solid rgba(227, 61, 207, 0.22); - backdrop-filter: blur(10px); - - color: var(--text); - font-size: 13px; - font-weight: 800; - + display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px; + border-radius: 999px; background: rgba(255, 255, 255, 0.78); + border: 1px solid rgba(227, 61, 207, 0.22); backdrop-filter: blur(10px); + color: var(--text); font-size: 13px; font-weight: 800; i { color: var(--brand); } } -.title { - font-size: 26px; - font-weight: 950; - letter-spacing: -0.3px; - color: var(--text); - margin-top: 10px; +.title { font-size: 26px; font-weight: 950; letter-spacing: -0.3px; color: var(--text); margin-top: 10px; margin-bottom: 0; } +.subtitle { color: rgba(17, 18, 20, 0.65); font-weight: 700; } - @media (max-width: 768px) { font-size: 24px; } -} - -.subtitle { - color: rgba(17, 18, 20, 0.65); - font-weight: 700; -} - -.header-actions { - justify-content: flex-end; - - @media (max-width: 768px) { - justify-content: center; - } -} - -/* BOTÕES */ +/* Botões de Ação Principais */ .btn-brand { - background-color: var(--brand); - border-color: var(--brand); - font-weight: 900; - border-radius: 12px; - - transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease; - - &:hover { - transform: translateY(-2px); - box-shadow: 0 14px 24px rgba(227, 61, 207, 0.22); - filter: brightness(0.97); - } + background-color: var(--brand); border-color: var(--brand); color: #fff; + font-weight: 900; border-radius: 12px; transition: transform 0.2s, box-shadow 0.2s; + &:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(227, 61, 207, 0.25); filter: brightness(1.05); } + &:disabled { opacity: 0.7; cursor: not-allowed; transform: none; } } .btn-glass { - border-radius: 12px; - font-weight: 900; - - background: rgba(255, 255, 255, 0.72); - border: 1px solid rgba(3, 15, 170, 0.25); - color: var(--blue); - - transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; - - &:hover { - transform: translateY(-2px); - box-shadow: 0 14px 24px rgba(17, 18, 20, 0.10); - border-color: rgba(227, 61, 207, 0.30); - } + 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; } } -/* CONTROLES */ -.controls { +/* ========================================= */ +/* 3. FILTROS (TABS E DROPDOWN) */ +/* ========================================= */ +.filters-row { display: flex; - gap: 12px; + justify-content: center; align-items: center; - justify-content: space-between; + gap: 12px; flex-wrap: wrap; - - @media (max-width: 768px) { - justify-content: center; - } } -/* Busca */ -.search-group { - max-width: 340px; - border-radius: 14px; - overflow: hidden; - - .input-group-text { - background: rgba(255, 255, 255, 0.78); - border: 1px solid rgba(17, 18, 20, 0.10); - color: var(--brand); - } - - .form-control { - border: 1px solid rgba(17, 18, 20, 0.10); - background: rgba(255, 255, 255, 0.78); - } - - .form-control:focus { - border-color: rgba(227, 61, 207, 0.35); - box-shadow: 0 0 0 0.2rem rgba(227, 61, 207, 0.12); - } - - .btn-clear { - border: 1px solid rgba(17, 18, 20, 0.10); - background: rgba(255, 255, 255, 0.78); - } -} - -/* select */ -.select-glass { +/* Tabs (Todos / PF / PJ) */ +.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; - background: rgba(255, 255, 255, 0.78); - border: 1px solid rgba(17, 18, 20, 0.10); + backdrop-filter: blur(8px); } -/* BODY */ +.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; } +} + +/* Dropdown de Clientes */ +.client-filter-wrap { + position: relative; +} + +.btn-client-filter { + display: flex; align-items: center; gap: 8px; + padding: 8px 16px; 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; + + &:hover { background: #fff; border-color: var(--blue); color: var(--blue); } + + &.active { + background: var(--blue); color: #fff; border-color: var(--blue); + i { color: #fff; } + } +} + +.client-dropdown { + position: absolute; top: calc(100% + 8px); right: 0; + width: 280px; max-height: 350px; + background: #fff; border-radius: 12px; + box-shadow: 0 10px 30px rgba(0,0,0,0.15); + border: 1px solid rgba(17,18,20,0.08); + z-index: 50; + display: flex; flex-direction: column; + overflow: hidden; + animation: fadeIn 0.2s ease; +} + +@keyframes fadeIn { + from { opacity:0; transform:translateY(-10px); } + to { opacity:1; transform:translateY(0); } +} + +.dropdown-header-search { + padding: 8px; border-bottom: 1px solid rgba(0,0,0,0.05); background: #f9fafb; +} + +.dropdown-list { + overflow-y: auto; max-height: 300px; +} + +.dropdown-item-custom { + padding: 10px 16px; font-size: 0.85rem; color: var(--text); + cursor: pointer; border-bottom: 1px solid rgba(0,0,0,0.03); + transition: background 0.1s; + + &:hover { background: rgba(227,61,207,0.05); color: var(--brand); font-weight: 600; } + &.selected { background: rgba(3,15,170,0.08); color: var(--blue); font-weight: 700; } +} + +/* Inputs de Busca e Paginação */ +.controls { + display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; +} + +.search-group { + max-width: 340px; border-radius: 14px; overflow: hidden; + .input-group-text { background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(17, 18, 20, 0.1); color: var(--brand); } + .form-control { border: 1px solid rgba(17, 18, 20, 0.1); background: rgba(255, 255, 255, 0.6); &:focus { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(227,61,207,0.1); } } + .btn-clear { background: rgba(255,255,255,0.6); border: 1px solid rgba(17,18,20,0.1); } +} + +.select-glass { + border-radius: 12px; background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(17, 18, 20, 0.1); width: auto; cursor: pointer; +} + +/* ========================================= */ +/* 4. ÁREA DE CONTEÚDO (BODY) */ +/* ========================================= */ .geral-body { padding: 0; + background: transparent; + flex: 1; /* Ocupa espaço restante do card */ + overflow: hidden; /* Scroll interno na tabela/grupos */ + display: flex; flex-direction: column; } -/* Wrapper com altura e scroll */ -.table-wrap { - max-height: 58vh; - overflow: auto; +/* ========================================= */ +/* 5. MODO GRUPO (ACCORDION) */ +/* ========================================= */ +.groups-container { + padding: 16px; + overflow-y: auto; + height: 100%; } -/* TABELA MODERNA */ -.table-geral { - font-size: 0.875rem; +.group-list { + display: flex; flex-direction: column; gap: 12px; +} - th, td { - white-space: nowrap; - padding: 10px 12px; - color: var(--text); - font-weight: 700; +.client-group-card { + background: #fff; + border-radius: 16px; + border: 1px solid rgba(17,18,20,0.08); + overflow: hidden; + transition: all 0.3s ease; + + &:hover { + border-color: var(--brand); + box-shadow: 0 4px 12px rgba(227,61,207,0.1); } + + &.expanded { + border-color: var(--brand); + box-shadow: 0 8px 24px rgba(227,61,207,0.12); + } +} + +.group-header { + padding: 16px 24px; + display: flex; justify-content: space-between; align-items: center; + cursor: pointer; + background: linear-gradient(180deg, #fff, #fdfdfd); + + &:hover .group-toggle-icon { color: var(--brand); } +} + +.group-info { + display: flex; flex-direction: column; gap: 6px; +} + +.group-badges { + display: flex; gap: 8px; flex-wrap: wrap; +} + +.badge-pill { + font-size: 0.7rem; padding: 4px 10px; border-radius: 99px; font-weight: 800; text-transform: uppercase; + &.total { background: rgba(3,15,170,0.1); color: var(--blue); } + &.active { background: rgba(25,135,84,0.1); color: #198754; } + &.blocked { background: rgba(220,53,69,0.1); color: #dc3545; } +} + +.group-toggle-icon { + font-size: 1.2rem; color: var(--muted); transition: transform 0.3s ease; +} + +.client-group-card.expanded .group-toggle-icon { + transform: rotate(180deg); color: var(--brand); +} + +.group-body { + border-top: 1px solid rgba(17,18,20,0.06); + background: #fbfbfc; + animation: slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1); +} + +@keyframes slideDown { + from { opacity: 0; transform: translateY(-10px); } + to { opacity: 1; transform: translateY(0); } +} + +.inner-table-wrap { + max-height: 450px; + overflow-y: auto; +} + +/* ========================================= */ +/* 6. MODO TABELA (CENTRALIZADA) */ +/* ========================================= */ +.table-wrap { + overflow-x: auto; + overflow-y: auto; + height: 100%; +} + +.table-modern { + width: 100%; min-width: 1000px; border-collapse: separate; border-spacing: 0; thead th { - position: sticky; - top: 0; - z-index: 2; - - background: rgba(255, 255, 255, 0.92); - backdrop-filter: blur(10px); - + position: sticky; top: 0; z-index: 10; + background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); border-bottom: 2px solid rgba(227, 61, 207, 0.15); - - color: rgba(17, 18, 20, 0.75); - font-weight: 950; - letter-spacing: 0.06em; - text-transform: uppercase; - } - - th.sortable { - cursor: pointer; - user-select: none; - transition: color 180ms ease; - + padding: 12px; + color: rgba(17, 18, 20, 0.7); font-size: 0.8rem; font-weight: 950; letter-spacing: 0.05em; text-transform: uppercase; + white-space: nowrap; cursor: pointer; transition: color 0.2s; + + /* Centralização Forçada */ + text-align: center !important; + &:hover { color: var(--brand); } } - .sort-caret { - font-size: 11px; - margin-left: 6px; - opacity: 0.75; - color: rgba(17, 18, 20, 0.60); - } - - /* destaque da linha */ - .td-highlight { - color: var(--blue); - font-weight: 950; - } - - /* linhas mais “clean” */ tbody tr { - border-top: 1px solid rgba(17, 18, 20, 0.06); - transition: background-color 180ms ease, transform 180ms ease; + transition: background-color 0.2s; + border-bottom: 1px solid rgba(17,18,20,0.05); + &:hover { background-color: rgba(227, 61, 207, 0.05); } + td { border-bottom: 1px solid rgba(17,18,20,0.04); } } - tbody tr:hover { - background-color: rgba(227, 61, 207, 0.06); - } - - td.actions { - min-width: 160px; + td { + padding: 12px; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + font-size: 0.875rem; color: var(--text); + + /* Centralização Forçada */ + text-align: center !important; } } -/* botões ícone */ +.th-content { display: flex; align-items: center; justify-content: center; gap: 4px; } + +.sort-caret { display: inline-block; width: 14px; text-align: center; opacity: 0.3; &.active { opacity: 1; color: var(--brand); } } +.text-brand { color: var(--brand) !important; } +.text-blue { color: var(--blue) !important; } +.fw-black { font-weight: 950; } +.td-clip { overflow: hidden; text-overflow: ellipsis; max-width: 250px; } +.empty-state { background: rgba(255,255,255,0.4); } + +/* Ações */ +.action-group { display: flex; justify-content: center; gap: 6px; } .btn-icon { - padding: 6px 10px; - border-radius: 12px; - transition: transform 150ms ease, box-shadow 150ms ease; - - &:hover { - transform: translateY(-1px); - box-shadow: 0 12px 22px rgba(17, 18, 20, 0.10); - } + width: 32px; height: 32px; border: none; background: transparent; border-radius: 8px; + display: flex; align-items: center; justify-content: center; color: rgba(17,18,20,0.5); transition: all 0.2s; + &:hover { background: rgba(17,18,20,0.05); color: var(--text); transform: translateY(-1px); } + &.success:hover { color: #198754; background: rgba(25,135,84,0.1); } + &.primary:hover { color: var(--blue); background: rgba(3,15,170,0.1); } + &.danger:hover { color: #dc3545; background: rgba(220,53,69,0.1); } } -.empty-state { - background: rgba(255, 255, 255, 0.35); -} - -/* FOOTER */ +/* Footer */ .geral-footer { - padding: 14px 16px; - border-top: 1px solid rgba(17, 18, 20, 0.06); - - display: flex; - justify-content: space-between; - align-items: center; - gap: 12px; - flex-wrap: wrap; - - @media (max-width: 768px) { - justify-content: center; - text-align: center; - } + padding: 14px 24px; border-top: 1px solid rgba(17, 18, 20, 0.06); + display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; flex-shrink: 0; + @media (max-width: 768px) { justify-content: center; text-align: center; } } -/* Paginação moderna */ .pagination-modern .page-link { - color: var(--blue); - font-weight: 900; - border-radius: 12px; - border: 1px solid rgba(17, 18, 20, 0.10); - background: rgba(255, 255, 255, 0.78); - transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, color 150ms ease; + color: var(--blue); font-weight: 900; border-radius: 10px; border: 1px solid rgba(17,18,20,0.1); + background: rgba(255,255,255,0.6); margin: 0 2px; + &:hover { transform: translateY(-1px); border-color: var(--brand); color: var(--brand); } +} +.pagination-modern .page-item.active .page-link { background-color: var(--blue); border-color: var(--blue); color: #fff; } - i { font-size: 12px; } +/* ========================================= */ +/* 7. MODAIS (Geral) */ +/* ========================================= */ +.modal-backdrop-custom { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 9990; backdrop-filter: blur(4px); } +.modal-custom { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 9995; padding: 16px; } + +.modal-card { + background: #ffffff; border: 1px solid rgba(255,255,255,0.8); border-radius: 20px; + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); overflow: hidden; display: flex; flex-direction: column; + animation: modalPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); + + /* Tamanho Padrão */ + width: min(850px, 100%); + max-height: 90vh; } -.pagination-modern .page-link:hover { - transform: translateY(-1px); - border-color: rgba(227, 61, 207, 0.28); - color: var(--brand); - box-shadow: 0 12px 22px rgba(17, 18, 20, 0.08); +@keyframes modalPop { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } } + +.modal-header { + padding: 16px 24px; border-bottom: 1px solid rgba(0,0,0,0.06); background: #fff; display: flex; justify-content: space-between; align-items: center; + .modal-title { font-size: 1.1rem; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 12px; } + .icon-bg { width: 32px; height: 32px; border-radius: 10px; background: rgba(3, 15, 170, 0.1); color: var(--blue); display: flex; align-items: center; justify-content: center; font-size: 16px; &.success { background: rgba(25, 135, 84, 0.1); color: #198754; } &.primary-soft { background: rgba(3, 15, 170, 0.1); color: var(--blue); } } + .btn-icon { color: var(--muted); background: transparent; font-size: 1.2rem; &:hover { color: var(--brand); transform: rotate(90deg); } } } -.pagination-modern .page-item.active .page-link { - background-color: rgba(3, 15, 170, 0.92); - border-color: rgba(3, 15, 170, 0.92); - color: #fff; -} +.modal-body { padding: 24px; overflow-y: auto; &.bg-light-gray { background-color: #f8f9fa; } } -/* =============================== */ -/* ✅ ANIMAÇÕES SSR-SAFE */ -/* =============================== */ -[data-animate] { opacity: 1; transform: none; } +/* ========================================= */ +/* 8. MODAL DETALHES (Responsivo Inteligente) */ +/* ========================================= */ -.js-animate [data-animate] { - opacity: 0; - transform: translateY(14px); - transition: opacity 600ms ease, transform 600ms ease; - will-change: opacity, transform; -} - -.js-animate [data-animate].is-visible { - opacity: 1; - transform: translateY(0); -} - -@media (prefers-reduced-motion: reduce) { - .page-blob { animation: none; } - .js-animate [data-animate] { transition: none; transform: none; opacity: 1; } -} - -/* animações */ -@keyframes floaty { - 0% { transform: translate(0, 0) scale(1); } - 50% { transform: translate(18px, 10px) scale(1.03); } - 100% { transform: translate(0, 0) scale(1); } -} - -/* =============================== */ -/* ✅ MODAIS (Detalhes / Financeiro) */ -/* =============================== */ - -.modal-backdrop-custom{ - position: fixed; - inset: 0; - background: rgba(0,0,0,.35); - z-index: 2500; -} - -.modal-custom{ - position: fixed; - inset: 0; - display: flex; - align-items: center; - justify-content: center; - z-index: 2501; - padding: 14px; -} - -.modal-card{ - width: min(980px, 100%); - background: rgba(255, 255, 255, 0.92); - border: 1px solid rgba(227, 61, 207, 0.16); - backdrop-filter: blur(12px); - border-radius: 18px; - box-shadow: 0 22px 46px rgba(17, 18, 20, 0.18); - overflow: hidden; -} - -.modal-header{ - padding: 12px 14px; - display: flex; - justify-content: space-between; - align-items: center; - background: linear-gradient(180deg, rgba(227,61,207,0.08), rgba(255,255,255,0.10)); - border-bottom: 1px solid rgba(17, 18, 20, 0.06); -} - -.modal-title{ - font-weight: 950; - color: var(--text); - letter-spacing: -0.2px; -} - -.modal-body{ - padding: 14px; -} - -.detail-grid{ - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 10px 14px; - - .k { display:block; font-size: 12px; color: rgba(17, 18, 20, 0.65); font-weight: 800; } - .v { display:block; font-size: 14px; color: var(--text); font-weight: 950; } -} - -.detail-grid .span-2{ - grid-column: 1 / -1; -} - -.finance-box{ - border-radius: 16px; - padding: 12px; - border: 1px solid rgba(17, 18, 20, 0.08); - background: rgba(255,255,255,0.78); - margin-bottom: 12px; - - .box-title{ - font-weight: 950; - margin-bottom: 8px; +/* Regra apenas para telas GRANDES (>1440px) */ +@media (min-width: 1441px) { + .modal-card.modal-responsive { + width: min(1200px, 95%); + height: 85vh; + max-height: none; } + + .detail-box .box-header { padding: 8px 16px; } + .detail-box .box-body.compact { padding: 10px 14px; } + .box-body.compact .row-item { margin-bottom: 4px; font-size: 0.85rem; } + .details-dashboard { gap: 16px; } +} - .box-grid{ - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 10px 14px; +.details-dashboard { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; @media(max-width: 700px) { grid-template-columns: 1fr; } } +.detail-box { background: #fff; border-radius: 12px; border: 1px solid rgba(0,0,0,0.06); overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.02); height: 100%; .box-header { padding: 10px 16px; font-weight: 800; font-size: 0.85rem; background: #fdfdfd; border-bottom: 1px solid rgba(0,0,0,0.04); color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; i { color: var(--blue); } } .box-body { padding: 16px; } .box-body.compact { padding: 12px 14px; } } +.row-item { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 0.9rem; color: var(--muted); .lbl { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px; } .val { color: var(--text); font-weight: 700; text-align: right; } } +.box-body.compact .row-item { margin-bottom: 6px; } +.row-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } +.mini-item { display: flex; flex-direction: column; .lbl { font-size: 0.7rem; color: var(--muted); font-weight: 800; text-transform: uppercase; } .val { font-size: 0.9rem; color: var(--text); font-weight: 700; } } +.divider { height: 1px; background: rgba(0,0,0,0.06); margin: 12px 0; } +.divider.small { margin: 8px 0; } - .k { display:block; font-size: 12px; opacity: .8; font-weight: 800; } - .v { display:block; font-weight: 950; } - } -} - -.finance-box.vivo{ - border-color: rgba(227, 61, 207, 0.25); - .box-title, .v { color: var(--brand); } -} - -.finance-box.line{ - border-color: rgba(3, 15, 170, 0.20); - .box-title, .v { color: var(--blue); } -} - -.finance-footer{ - display: flex; - justify-content: flex-end; - gap: 16px; - padding-top: 4px; - - .k { display:block; font-size: 12px; color: rgba(17, 18, 20, 0.65); font-weight: 800; } - .v { display:block; font-weight: 950; color: var(--text); } -} - -@media (max-width: 720px){ - .detail-grid, - .finance-box .box-grid{ - grid-template-columns: 1fr; +/* ========================================= */ +/* 9. MODAL FINANCEIRO */ +/* ========================================= */ +.finance-dashboard { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; @media(max-width: 700px) { grid-template-columns: 1fr; } } +.finance-card { background: #fff; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.04); overflow: hidden; &.vivo-card { border-top: 4px solid var(--brand); .card-header-f { color: var(--brand); background: var(--bg-vivo); } } &.line-card { border-top: 4px solid var(--blue); .card-header-f { color: var(--blue); background: var(--bg-line); } } } +.card-header-f { padding: 12px 16px; font-weight: 800; font-size: 0.95rem; display: flex; align-items: center; } +.card-body-f { padding: 16px; .row-item { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 0.85rem; color: var(--muted); strong { color: var(--text); font-weight: 700; } &.total { font-size: 1rem; color: var(--text); margin-top: 8px; margin-bottom: 0; strong { color: var(--text); font-weight: 900; } } } .divider { height: 1px; background: rgba(0,0,0,0.06); margin: 12px 0; } } +.finance-summary { background: #fff; border-radius: 16px; padding: 16px 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.03); display: flex; align-items: center; justify-content: space-around; .summary-item { display: flex; flex-direction: column; align-items: center; .lbl { font-size: 0.75rem; text-transform: uppercase; font-weight: 800; color: var(--muted); } .val { font-size: 1.25rem; font-weight: 900; } } .vertical-line { width: 1px; height: 40px; background: rgba(0,0,0,0.08); } } +.text-success { color: #198754 !important; } + +/* ========================================= */ +/* 10. MODAL EDITAR */ +/* ========================================= */ +.modal-card.modal-edit { width: min(1100px, 100%); } +.edit-sections { display: grid; gap: 12px; } +.edit-section { + background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 16px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.03); + summary { + cursor: pointer; user-select: none; padding: 12px 16px; font-weight: 950; color: rgba(17,18,20,0.75); display: flex; align-items: center; background: linear-gradient(180deg, rgba(227,61,207,0.06), rgba(255,255,255,0.6)); border-bottom: 1px solid rgba(0,0,0,0.06); + i { color: var(--blue); } } } +.edit-grid { padding: 14px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; @media (max-width: 700px) { grid-template-columns: 1fr; } } +.form-field { display: flex; flex-direction: column; gap: 6px; label { font-size: 0.75rem; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(17,18,20,0.65); } } +.form-field.span-2 { grid-column: span 2; @media (max-width: 700px) { grid-column: span 1; } } +.edit-section .form-control { border-radius: 12px; border: 1px solid rgba(17,18,20,0.12); background: rgba(255,255,255,0.85); &:focus { border-color: rgba(227,61,207,0.5); box-shadow: 0 0 0 2px rgba(227,61,207,0.12); } } \ No newline at end of file diff --git a/src/app/pages/geral/geral.ts b/src/app/pages/geral/geral.ts index 3b8c134..1fe6675 100644 --- a/src/app/pages/geral/geral.ts +++ b/src/app/pages/geral/geral.ts @@ -1,74 +1,39 @@ -import { Component, ElementRef, ViewChild, Inject, PLATFORM_ID, AfterViewInit } from '@angular/core'; +import { Component, ElementRef, ViewChild, Inject, PLATFORM_ID, AfterViewInit, ChangeDetectorRef } from '@angular/core'; import { isPlatformBrowser, CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; -import { HttpClient, HttpClientModule, HttpParams } from '@angular/common/http'; +import { HttpClient, HttpClientModule, HttpParams, HttpErrorResponse } from '@angular/common/http'; type SortDir = 'asc' | 'desc'; +// ✅ CORREÇÃO: Adicionado 'usuario' aqui type LineRow = { - id: string; // GUID - item: string; - conta: string; - linha: string; - chip: string; - cliente: string; - usuario: string; - plano: string; // PLANO CONTRATO - contrato: string; // VENC. DA CONTA -}; - -// ✅ seu backend está retornando camelCase (confirmado no Network) -type ApiPagedResult = { - page: number; - pageSize: number; - total: number; - items: T[]; -}; - -type ApiLineList = { id: string; - item: number; - conta: string | null; - linha: string | null; - chip: string | null; - cliente: string | null; - usuario: string | null; - planoContrato: string | null; - vencConta: string | null; - - // se vier no list também (como no seu Response) - status?: string | null; - skil?: string | null; - modalidade?: string | null; + item: string; + linha: string; + cliente: string; + usuario: string; // <--- NOVO CAMPO + status: string; + skil: string; + contrato: string; }; -type ApiLineDetail = ApiLineList & { - dataBloqueio?: string | null; - cedente?: string | null; - solicitante?: string | null; - dataEntregaOpera?: string | null; - dataEntregaCliente?: string | null; - - // Vivo - franquiaVivo?: number | null; - valorPlanoVivo?: number | null; - gestaoVozDados?: number | null; - skeelo?: number | null; - vivoNewsPlus?: number | null; - vivoTravelMundo?: number | null; - vivoGestaoDispositivo?: number | null; - valorContratoVivo?: number | null; - - // Line - franquiaLine?: number | null; - franquiaGestao?: number | null; - locacaoAp?: number | null; - valorContratoLine?: number | null; - - desconto?: number | null; - lucro?: number | null; +type ApiPagedResult = { page: number; pageSize: number; total: number; items: T[]; }; +// ✅ CORREÇÃO: Adicionado 'usuario' no DTO de listagem também, caso não tivesse +type ApiLineList = { + id: string; + item: number; + linha: string | null; + cliente: string | null; + usuario: string | null; // <--- NOVO CAMPO + vencConta: string | null; + status?: string | null; + skil?: string | null; }; +type ApiLineDetail = { /* ... campos detalhe (mantenha os mesmos) ... */ id: string; item: number; conta?: string | null; linha?: string | null; chip?: string | null; cliente?: string | null; usuario?: string | null; planoContrato?: string | null; status?: string | null; skil?: string | null; modalidade?: string | null; dataBloqueio?: string | null; cedente?: string | null; solicitante?: string | null; dataEntregaOpera?: string | null; dataEntregaCliente?: string | null; vencConta?: string | null; franquiaVivo?: number | null; valorPlanoVivo?: number | null; gestaoVozDados?: number | null; skeelo?: number | null; vivoNewsPlus?: number | null; vivoTravelMundo?: number | null; vivoGestaoDispositivo?: number | null; valorContratoVivo?: number | null; franquiaLine?: number | null; franquiaGestao?: number | null; locacaoAp?: number | null; valorContratoLine?: number | null; desconto?: number | null; lucro?: number | null; }; +type UpdateMobileLineRequest = Omit; +type ClientGroupDto = { cliente: string; totalLinhas: number; ativos: number; bloqueados: number; }; + @Component({ standalone: true, imports: [CommonModule, FormsModule, HttpClientModule], @@ -77,316 +42,294 @@ type ApiLineDetail = ApiLineList & { }) export class Geral implements AfterViewInit { toastMessage = ''; - @ViewChild('successToast') successToast!: ElementRef; + @ViewChild('successToast', { static: false }) successToast!: ElementRef; @ViewChild('excelInput') excelInput!: ElementRef; - constructor( - @Inject(PLATFORM_ID) private platformId: object, - private http: HttpClient - ) {} + constructor(@Inject(PLATFORM_ID) private platformId: object, private http: HttpClient, private cdr: ChangeDetectorRef) {} - // ========= API ========= private readonly apiBase = 'https://localhost:7205/api/lines'; - loading = false; - - // ========= TABELA (agora vem da API) ========= + rows: LineRow[] = []; + clientGroups: ClientGroupDto[] = []; + groupLines: LineRow[] = []; + + expandedGroup: string | null = null; + loadingLines = false; searchTerm = ''; + filterSkil: 'ALL' | 'PF' | 'PJ' = 'ALL'; + clientsList: string[] = []; + selectedClient: string | null = null; + showClientMenu = false; + clientSearchTerm = ''; + sortKey: keyof LineRow = 'item'; sortDir: SortDir = 'asc'; - page = 1; pageSize = 10; + total = 0; - total = 0; // total do banco - - // modais - detailOpen = false; - financeOpen = false; - detailData: ApiLineDetail | null = null; - financeData: ApiLineDetail | null = null; - + detailOpen = false; financeOpen = false; editOpen = false; editSaving = false; + detailData: any = null; financeData: any = null; editModel: any = null; + private editingId: string | null = null; private searchTimer: any = null; + get isGroupMode(): boolean { + return this.filterSkil === 'ALL' && !this.selectedClient && !this.searchTerm; + } + async ngAfterViewInit() { if (!isPlatformBrowser(this.platformId)) return; - this.initAnimations(); - this.loadFromApi(); - - const msg = (history.state && history.state.toastMessage) ? String(history.state.toastMessage) : ''; - if (!msg) return; - - this.toastMessage = msg; - await this.showToast(msg); - - const newState = { ...history.state }; - delete newState.toastMessage; - history.replaceState(newState, '', location.href); + this.refreshData(); + this.loadClients(); + + const state = history.state; + if (state && state.toastMessage) { + const msg = String(state.toastMessage); + const newState = { ...state }; delete newState.toastMessage; + history.replaceState(newState, '', location.href); + setTimeout(() => this.showToast(msg), 500); + } } private initAnimations() { document.documentElement.classList.add('js-animate'); - setTimeout(() => { - const items = Array.from(document.querySelectorAll('[data-animate]')); - if (!items.length) return; + const items = document.querySelectorAll('[data-animate]'); + items.forEach(el => el.classList.add('is-visible')); + }, 100); + } - const reduceMotion = - window.matchMedia && - window.matchMedia('(prefers-reduced-motion: reduce)').matches; + refreshData() { + if (this.isGroupMode) { + this.loadGroups(); + } else { + this.loadFromApi(); + } + } - if (reduceMotion || !('IntersectionObserver' in window)) { - items.forEach(i => i.classList.add('is-visible')); - return; + private loadGroups() { + this.loading = true; + this.http.get(`${this.apiBase}/groups`).subscribe({ + next: (data) => { + this.clientGroups = data || []; + this.loading = false; + }, + error: () => { + this.loading = false; + this.showToast('Erro ao carregar grupos.'); } - - const io = new IntersectionObserver((entries) => { - for (const entry of entries) { - if (entry.isIntersecting) { - (entry.target as HTMLElement).classList.add('is-visible'); - io.unobserve(entry.target); - } - } - }, { threshold: 0.12 }); - - items.forEach(el => io.observe(el)); - }, 0); + }); } - private async showToast(message: string) { - this.toastMessage = message; + toggleGroup(clientName: string) { + if (this.expandedGroup === clientName) { + this.expandedGroup = null; + return; + } + this.expandedGroup = clientName; + this.groupLines = []; + this.loadingLines = true; - // ✅ segurança (caso algum dia seja chamado fora do browser) - if (!isPlatformBrowser(this.platformId)) return; + const params = new HttpParams() + .set('client', clientName) + .set('page', '1') + .set('pageSize', '500') + .set('sortBy', 'item') + .set('sortDir', 'asc'); - const bs = await import('bootstrap'); - const toast = new bs.Toast(this.successToast.nativeElement, { autohide: true, delay: 1500 }); - toast.show(); - } - - // ========= API LOAD ========= - private mapSortKeyToApi(sortKey: keyof LineRow): string { - const map: Record = { - item: 'item', - conta: 'conta', - linha: 'linha', - chip: 'chip', - cliente: 'cliente', - usuario: 'usuario', - plano: 'planoContrato', - contrato: 'vencConta', - }; - return map[String(sortKey)] ?? 'item'; + this.http.get>(this.apiBase, { params }).subscribe({ + next: (res) => { + // ✅ CORREÇÃO: Mapeando 'usuario' corretamente aqui + this.groupLines = (res.items ?? []).map(x => ({ + id: x.id, + item: String(x.item ?? ''), + linha: x.linha ?? '', + cliente: x.cliente ?? '', + usuario: x.usuario ?? '', // <--- Mapeado + status: x.status ?? '', + skil: x.skil ?? '', + contrato: x.vencConta ?? '' + })); + this.loadingLines = false; + }, + error: () => { + this.loadingLines = false; + this.showToast('Erro ao carregar linhas do grupo.'); + } + }); } private loadFromApi() { this.loading = true; - - const params = new HttpParams() + let params = new HttpParams() .set('page', String(this.page)) .set('pageSize', String(this.pageSize)) .set('search', (this.searchTerm ?? '').trim()) .set('sortBy', this.mapSortKeyToApi(this.sortKey)) .set('sortDir', this.sortDir); + if (this.filterSkil === 'PF') params = params.set('skil', 'PESSOA FÍSICA'); + else if (this.filterSkil === 'PJ') params = params.set('skil', 'PESSOA JURÍDICA'); + + if (this.selectedClient) params = params.set('client', this.selectedClient); + this.http.get>(this.apiBase, { params }).subscribe({ next: (res) => { - // ✅ camelCase (igual seu Response) this.total = res.total ?? 0; - - this.rows = (res.items ?? []).map((x) => ({ - id: x.id, - item: String(x.item ?? ''), - conta: x.conta ?? '', - linha: x.linha ?? '', - chip: x.chip ?? '', - cliente: x.cliente ?? '', - usuario: x.usuario ?? '', - plano: x.planoContrato ?? '', - contrato: x.vencConta ?? '', + // ✅ CORREÇÃO: Mapeando 'usuario' corretamente aqui também + this.rows = (res.items ?? []).map(x => ({ + id: x.id, + item: String(x.item ?? ''), + linha: x.linha ?? '', + cliente: x.cliente ?? '', + usuario: x.usuario ?? '', // <--- Mapeado + status: x.status ?? '', + skil: x.skil ?? '', + contrato: x.vencConta ?? '' })); - this.loading = false; }, error: async () => { this.loading = false; - await this.showToast('Erro ao carregar dados da API.'); + await this.showToast('Erro ao carregar dados.'); } }); } - // ========= BUSCA / ORDENAÇÃO / PAGINAÇÃO ========= - onSearch() { - if (this.searchTimer) clearTimeout(this.searchTimer); - - this.searchTimer = setTimeout(() => { - this.page = 1; - this.loadFromApi(); - }, 250); + setFilter(type: 'ALL' | 'PF' | 'PJ') { + if (this.filterSkil === type) return; + this.filterSkil = type; + this.page = 1; + this.refreshData(); } - clearSearch() { - this.searchTerm = ''; + onSearch() { + if (this.searchTimer) clearTimeout(this.searchTimer); + this.searchTimer = setTimeout(() => { + this.page = 1; + this.refreshData(); + }, 300); + } + + clearSearch() { + this.searchTerm = ''; + this.page = 1; + this.refreshData(); + } + + private loadClients() { this.http.get(`${this.apiBase}/clients`).subscribe({ next: (data) => this.clientsList = data || [] }); } + toggleClientMenu() { this.showClientMenu = !this.showClientMenu; this.clientSearchTerm = ''; } + closeClientDropdown() { this.showClientMenu = false; } + selectClient(client: string | null) { + this.selectedClient = client; + this.showClientMenu = false; this.page = 1; - this.loadFromApi(); + this.refreshData(); + } + get filteredClientsList(): string[] { + if (!this.clientSearchTerm) return this.clientsList; + const s = this.clientSearchTerm.toLowerCase(); + return this.clientsList.filter(c => c.toLowerCase().includes(s)); } setSort(key: keyof LineRow) { - if (this.sortKey === key) { - this.sortDir = this.sortDir === 'asc' ? 'desc' : 'asc'; - } else { - this.sortKey = key; - this.sortDir = 'asc'; - } - - this.page = 1; - this.loadFromApi(); + if (this.sortKey === key) this.sortDir = this.sortDir === 'asc' ? 'desc' : 'asc'; + else { this.sortKey = key; this.sortDir = 'asc'; } + this.page = 1; this.loadFromApi(); } - - onPageSizeChange() { - this.page = 1; - this.loadFromApi(); - } - - goToPage(p: number) { - const target = Math.max(1, Math.min(this.totalPages, p)); - this.page = target; - this.loadFromApi(); - } - + onPageSizeChange() { this.page = 1; this.loadFromApi(); } + goToPage(p: number) { this.page = Math.max(1, Math.min(this.totalPages, p)); this.loadFromApi(); } trackById(_: number, row: LineRow) { return row.id; } + get pagedRows() { return this.rows; } + get totalPages() { return Math.ceil((this.total || 0) / this.pageSize) || 1; } + get filteredCount() { return this.total || 0; } + get pageStart() { return this.filteredCount === 0 ? 0 : (this.page - 1) * this.pageSize + 1; } + get pageEnd() { return this.filteredCount === 0 ? 0 : Math.min((this.page - 1) * this.pageSize + this.rows.length, this.filteredCount); } + get pageNumbers() { const total = this.totalPages; const current = this.page; const max = 5; let start = Math.max(1, current - 2); let end = Math.min(total, start + (max - 1)); start = Math.max(1, end - (max - 1)); const pages = []; for (let i = start; i <= end; i++) pages.push(i); return pages; } + + private getById(id: string, cb: (d: any) => void) { this.http.get(`${this.apiBase}/${id}`).subscribe({ next: cb }); } + onDetalhes(r: LineRow) { this.detailOpen = true; this.detailData = null; this.getById(r.id, d => this.detailData = d); } + onFinanceiro(r: LineRow) { this.financeOpen = true; this.financeData = null; this.getById(r.id, d => this.financeData = d); } + closeDetail() { this.detailOpen = false; this.detailData = null; } + closeFinance() { this.financeOpen = false; this.financeData = null; } + + async onEditar(r: LineRow) { + this.editOpen = true; this.editSaving = false; this.editModel = null; this.editingId = r.id; + this.http.get(`${this.apiBase}/${r.id}`).subscribe({ next: (d) => this.editModel = this.toEditModel(d) }); + } + closeEdit() { this.editOpen = false; this.editSaving = false; this.editModel = null; this.editingId = null; } + + async saveEdit() { + if (!this.editingId || !this.editModel) return; + this.editSaving = true; + + const payload: UpdateMobileLineRequest = { + item: this.toInt(this.editModel.item), + conta: (this.editModel.conta ?? '').toString(), + linha: (this.editModel.linha ?? '').toString(), + chip: (this.editModel.chip ?? '').toString(), + cliente: (this.editModel.cliente ?? '').toString(), + usuario: (this.editModel.usuario ?? '').toString(), + planoContrato: (this.editModel.planoContrato ?? '').toString(), + status: (this.editModel.status ?? '').toString(), + skil: (this.editModel.skil ?? '').toString(), + modalidade: (this.editModel.modalidade ?? '').toString(), + dataBloqueio: this.dateInputToIso(this.editModel.dataBloqueio), + cedente: (this.editModel.cedente ?? '').toString(), + solicitante: (this.editModel.solicitante ?? '').toString(), + dataEntregaOpera: this.dateInputToIso(this.editModel.dataEntregaOpera), + dataEntregaCliente: this.dateInputToIso(this.editModel.dataEntregaCliente), + vencConta: (this.editModel.vencConta ?? '').toString(), + franquiaVivo: this.toNullableNumber(this.editModel.franquiaVivo), + valorPlanoVivo: this.toNullableNumber(this.editModel.valorPlanoVivo), + gestaoVozDados: this.toNullableNumber(this.editModel.gestaoVozDados), + skeelo: this.toNullableNumber(this.editModel.skeelo), + vivoNewsPlus: this.toNullableNumber(this.editModel.vivoNewsPlus), + vivoTravelMundo: this.toNullableNumber(this.editModel.vivoTravelMundo), + vivoGestaoDispositivo: this.toNullableNumber(this.editModel.vivoGestaoDispositivo), + valorContratoVivo: this.toNullableNumber(this.editModel.valorContratoVivo), + franquiaLine: this.toNullableNumber(this.editModel.franquiaLine), + franquiaGestao: this.toNullableNumber(this.editModel.franquiaGestao), + locacaoAp: this.toNullableNumber(this.editModel.locacaoAp), + valorContratoLine: this.toNullableNumber(this.editModel.valorContratoLine), + desconto: this.toNullableNumber(this.editModel.desconto), + lucro: this.toNullableNumber(this.editModel.lucro), + }; - get pagedRows(): LineRow[] { - return this.rows; + this.http.put(`${this.apiBase}/${this.editingId}`, payload).subscribe({ + next: async () => { this.editSaving = false; this.closeEdit(); await this.showToast('Registro atualizado!'); if(this.isGroupMode && this.expandedGroup) { this.toggleGroup(this.expandedGroup); } else { this.refreshData(); } }, + error: async () => { this.editSaving = false; await this.showToast('Erro ao salvar.'); } + }); } - get totalPages(): number { - const total = Math.ceil((this.total || 0) / this.pageSize); - return total > 0 ? total : 1; - } - - get filteredCount(): number { - return this.total || 0; - } - - get pageStart(): number { - if (this.filteredCount === 0) return 0; - return (this.page - 1) * this.pageSize + 1; - } - - get pageEnd(): number { - if (this.filteredCount === 0) return 0; - return Math.min((this.page - 1) * this.pageSize + this.rows.length, this.filteredCount); - } - - get pageNumbers(): number[] { - const total = this.totalPages; - const current = this.page; - - const max = 5; - let start = Math.max(1, current - 2); - let end = Math.min(total, start + (max - 1)); - start = Math.max(1, end - (max - 1)); - - const pages: number[] = []; - for (let i = start; i <= end; i++) pages.push(i); - return pages; - } - - // ========= IMPORTAR EXCEL ========= - async onImportExcel() { - if (!this.excelInput?.nativeElement) return; - this.excelInput.nativeElement.value = ''; - this.excelInput.nativeElement.click(); - } - - onExcelSelected(ev: Event) { - const input = ev.target as HTMLInputElement; - const file = input.files?.[0]; - if (!file) return; - - const form = new FormData(); - - // ✅ mantém 'file' porque já funcionou no seu import - form.append('file', file); - + async onRemover(r: LineRow, fromGroup = false) { + if (!confirm(`Remover linha ${r.linha}?`)) return; this.loading = true; - - this.http.post<{ imported: number }>(`${this.apiBase}/import-excel`, form).subscribe({ - next: async (r) => { - await this.showToast(`Importação concluída: ${r?.imported ?? 0} linhas.`); - this.page = 1; - this.loadFromApi(); - }, - error: async () => { - this.loading = false; - await this.showToast('Falha ao importar Excel. Verifique a aba "GERAL" e o formato .xlsx.'); - } + this.http.delete(`${this.apiBase}/${r.id}`).subscribe({ + next: async () => { await this.showToast('Removido com sucesso.'); if(fromGroup && this.expandedGroup) { this.toggleGroup(this.expandedGroup); } else { this.refreshData(); } }, + error: async () => { this.loading = false; await this.showToast('Erro ao remover.'); } }); } - // ========= DETALHES / FINANCEIRO ========= - private getById(id: string, cb: (d: ApiLineDetail) => void) { - this.http.get(`${this.apiBase}/${id}`).subscribe({ - next: (d) => cb(d), - error: async () => { - await this.showToast('Erro ao carregar dados da linha.'); - } - }); - } + async onCadastrarLinha() { await this.showToast('Em breve.'); } - async onDetalhes(row: LineRow) { - this.detailOpen = true; - this.detailData = null; - - this.getById(row.id, (d) => { - this.detailData = d; - }); - } - - async onFinanceiro(row: LineRow) { - this.financeOpen = true; - this.financeData = null; - - this.getById(row.id, (d) => { - this.financeData = d; - }); - } - - closeDetail() { - this.detailOpen = false; - this.detailData = null; - } - - closeFinance() { - this.financeOpen = false; - this.financeData = null; - } - - // ========= REMOVER ========= - async onRemover(row: LineRow) { - if (!confirm(`Deseja remover a linha ${row.linha}?`)) return; - - this.loading = true; - - this.http.delete(`${this.apiBase}/${row.id}`).subscribe({ - next: async () => { - await this.showToast('Linha removida com sucesso.'); - if (this.rows.length === 1 && this.page > 1) this.page -= 1; - this.loadFromApi(); - }, - error: async () => { - this.loading = false; - await this.showToast('Erro ao remover a linha.'); - } - }); - } - - // ========= BOTÕES (mantidos) ========= - async onCadastrarLinha() { - await this.showToast('Cadastro de linha será implementado.'); - } -} + private async showToast(message: string) { if (!isPlatformBrowser(this.platformId)) return; this.toastMessage = message; this.cdr.detectChanges(); if (!this.successToast?.nativeElement) return; try { const bs = await import('bootstrap'); const toastInstance = bs.Toast.getOrCreateInstance(this.successToast.nativeElement, { autohide: true, delay: 3000 }); toastInstance.show(); } catch (error) { console.error(error); } } + formatMoney(v: any): string { if (v == null || Number.isNaN(v)) return '-'; return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(v); } + formatNumber(v: any): string { if (v == null || Number.isNaN(v)) return '-'; return new Intl.NumberFormat('pt-BR').format(v); } + formatFranquia(v: any): string { if (v == null || Number.isNaN(v)) return '-'; return `${new Intl.NumberFormat('pt-BR').format(v)} GB`; } + formatDateBr(iso: any): string { if (!iso) return '-'; const d = new Date(iso); return Number.isNaN(d.getTime()) ? '-' : new Intl.DateTimeFormat('pt-BR').format(d); } + statusClass(s: any): string { const n = (s??'').toLowerCase(); if(n.includes('bloq')||n.includes('perda')) return 'is-blocked'; if(n.includes('ativo')) return 'is-active'; return ''; } + statusLabel(s: any): string { return s || '-'; } + private mapSortKeyToApi(sortKey: keyof LineRow): string { const map: Record = { item: 'item', linha: 'linha', cliente: 'cliente', status: 'status', skil: 'skil', contrato: 'vencConta' }; return map[String(sortKey)] ?? 'item'; } + private isoToDateInput(iso: string | null | undefined): string { if (!iso) return ''; const dt = new Date(iso); return Number.isNaN(dt.getTime()) ? '' : dt.toISOString().slice(0, 10); } + private dateInputToIso(dateStr: string | null | undefined): string | null { const s = (dateStr ?? '').trim(); return s ? new Date(`${s}T00:00:00.000Z`).toISOString() : null; } + private toNullableNumber(v: any): number | null { if (v === null || v === undefined || v === '') return null; const n = Number(String(v).trim().replace(',', '.')); return Number.isFinite(n) ? n : null; } + private toInt(v: any): number { const n = parseInt(String(v ?? '0'), 10); return Number.isFinite(n) ? n : 0; } + private toEditModel(d: ApiLineDetail) { return { ...d, dataBloqueio: this.isoToDateInput(d.dataBloqueio), dataEntregaOpera: this.isoToDateInput(d.dataEntregaOpera), dataEntregaCliente: this.isoToDateInput(d.dataEntregaCliente) }; } + + async onImportExcel() { if (!this.excelInput?.nativeElement) return; this.excelInput.nativeElement.value = ''; this.excelInput.nativeElement.click(); } + onExcelSelected(ev: Event) { const file = (ev.target as HTMLInputElement).files?.[0]; if (!file) return; const form = new FormData(); form.append('file', file); this.loading = true; this.http.post<{ imported: number }>(`${this.apiBase}/import-excel`, form).subscribe({ next: async (r) => { await this.showToast(`Sucesso! ${r?.imported ?? 0} registros importados.`); this.page = 1; this.loadFromApi(); }, error: async () => { this.loading = false; await this.showToast('Falha ao importar planilha.'); } }); } +} \ No newline at end of file