Merge 9f08fac60a into 3584d4a373
This commit is contained in:
Eduardo Lopes
GitHub
commit
86431a57e3
|
|
@ -11,7 +11,8 @@ import { authGuard } from './guards/auth.guard';
|
||||||
import { DadosUsuarios } from './pages/dados-usuarios/dados-usuarios';
|
import { DadosUsuarios } from './pages/dados-usuarios/dados-usuarios';
|
||||||
import { VigenciaComponent } from './pages/vigencia/vigencia';
|
import { VigenciaComponent } from './pages/vigencia/vigencia';
|
||||||
import { TrocaNumero } from './pages/troca-numero/troca-numero';
|
import { TrocaNumero } from './pages/troca-numero/troca-numero';
|
||||||
import { Relatorios } from './pages/relatorios/relatorios';
|
import { Dashboard } from './pages/dashboard/dashboard';
|
||||||
|
import { Notificacoes } from './pages/notificacoes/notificacoes';
|
||||||
|
|
||||||
export const routes: Routes = [
|
export const routes: Routes = [
|
||||||
{ path: '', component: Home },
|
{ path: '', component: Home },
|
||||||
|
|
@ -24,12 +25,13 @@ export const routes: Routes = [
|
||||||
{ path: 'dadosusuarios', component: DadosUsuarios, canActivate: [authGuard] },
|
{ path: 'dadosusuarios', component: DadosUsuarios, canActivate: [authGuard] },
|
||||||
{ path: 'vigencia', component: VigenciaComponent, canActivate: [authGuard] },
|
{ path: 'vigencia', component: VigenciaComponent, canActivate: [authGuard] },
|
||||||
{ path: 'trocanumero', component: TrocaNumero, canActivate: [authGuard] },
|
{ path: 'trocanumero', component: TrocaNumero, canActivate: [authGuard] },
|
||||||
|
{ path: 'notificacoes', component: Notificacoes, canActivate: [authGuard] },
|
||||||
|
|
||||||
// ✅ rota correta
|
// ✅ rota correta
|
||||||
{ path: 'relatorios', component: Relatorios, canActivate: [authGuard] },
|
{ path: 'dashboard', component: Dashboard, canActivate: [authGuard] },
|
||||||
|
|
||||||
// ✅ compatibilidade: se alguém acessar /portal/relatorios, manda pra /relatorios
|
// ✅ compatibilidade: se alguém acessar /portal/dashboard, manda pra /dashboard
|
||||||
{ path: 'portal/relatorios', redirectTo: 'relatorios', pathMatch: 'full' },
|
{ path: 'portal/dashboard', redirectTo: 'dashboard', pathMatch: 'full' },
|
||||||
|
|
||||||
{ path: '**', redirectTo: '' },
|
{ path: '**', redirectTo: '' },
|
||||||
];
|
];
|
||||||
|
|
|
||||||
|
|
@ -33,7 +33,8 @@ export class AppComponent {
|
||||||
'/dadosusuarios',
|
'/dadosusuarios',
|
||||||
'/vigencia',
|
'/vigencia',
|
||||||
'/trocanumero',
|
'/trocanumero',
|
||||||
'/relatorios', // ✅ ADICIONADO: esconde footer na página de relatórios
|
'/dashboard', // ✅ ADICIONADO: esconde footer na página de dashboard
|
||||||
|
'/notificacoes',
|
||||||
];
|
];
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
|
|
|
||||||
|
|
@ -3,19 +3,99 @@
|
||||||
|
|
||||||
<!-- ✅ LOGADO: hambúrguer + logo JUNTOS -->
|
<!-- ✅ LOGADO: hambúrguer + logo JUNTOS -->
|
||||||
<ng-container *ngIf="isLoggedHeader; else publicHeader">
|
<ng-container *ngIf="isLoggedHeader; else publicHeader">
|
||||||
<div class="left-logged">
|
<div class="logged-header">
|
||||||
<button class="btn-icon" type="button" (click)="toggleMenu()" aria-label="Abrir menu">
|
<div class="left-logged">
|
||||||
<i class="bi bi-list"></i>
|
<button class="btn-icon" type="button" (click)="toggleMenu()" aria-label="Abrir menu">
|
||||||
</button>
|
<i class="bi bi-list"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
<a routerLink="/geral" class="logo-area" (click)="closeMenu()">
|
<a routerLink="/dashboard" class="logo-area" (click)="closeMenu()">
|
||||||
<div class="logo-icon">
|
<div class="logo-icon">
|
||||||
<i class="bi bi-layers-fill"></i>
|
<i class="bi bi-layers-fill"></i>
|
||||||
|
</div>
|
||||||
|
<div class="logo-text">
|
||||||
|
Line<span class="highlight">Gestão</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="logged-actions">
|
||||||
|
<div class="notifications-menu" [class.open]="notificationsOpen" (click)="$event.stopPropagation()">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn-icon btn-bell"
|
||||||
|
aria-label="Notificações"
|
||||||
|
(click)="toggleNotifications()"
|
||||||
|
[attr.aria-expanded]="notificationsOpen"
|
||||||
|
>
|
||||||
|
<i class="bi bi-bell"></i>
|
||||||
|
<span class="badge-dot" *ngIf="unreadCount > 0">{{ unreadCount }}</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="notifications-dropdown" *ngIf="notificationsOpen">
|
||||||
|
<div class="notifications-head">
|
||||||
|
<span>Notificações</span>
|
||||||
|
<a routerLink="/notificacoes" class="see-all" (click)="closeNotifications()">Ver todas</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="notifications-body">
|
||||||
|
<div class="notifications-state" *ngIf="notificationsLoading">
|
||||||
|
Carregando...
|
||||||
|
</div>
|
||||||
|
<div class="notifications-state warn" *ngIf="notificationsError">
|
||||||
|
Falha ao carregar notificações.
|
||||||
|
</div>
|
||||||
|
<div class="notifications-state" *ngIf="!notificationsLoading && !notificationsError && notifications.length === 0">
|
||||||
|
Nenhuma notificação por aqui.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="notification-item" *ngFor="let n of notifications">
|
||||||
|
<div class="notification-top">
|
||||||
|
<span class="notification-tag" [class.danger]="n.tipo === 'Vencido'" [class.warn]="n.tipo === 'AVencer'">
|
||||||
|
{{ n.tipo === 'Vencido' ? 'Vencido' : 'A vencer' }}
|
||||||
|
</span>
|
||||||
|
<span class="notification-line">{{ n.linha || '-' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="notification-title">
|
||||||
|
{{ n.linha || '-' }} - {{ n.usuario || n.cliente || '-' }}
|
||||||
|
</div>
|
||||||
|
<div class="notification-info">
|
||||||
|
<div><strong>Linha:</strong> {{ n.linha || '-' }}</div>
|
||||||
|
<div><strong>Usuário:</strong> {{ n.usuario || '-' }}</div>
|
||||||
|
<div><strong>Cliente:</strong> {{ n.cliente || '-' }}</div>
|
||||||
|
<div><strong>{{ n.tipo === 'Vencido' ? 'Venceu em' : 'Vence em' }}:</strong> {{ n.referenciaData ? (n.referenciaData | date:'dd/MM/yyyy') : '-' }}</div>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="mark-read" (click)="markNotificationRead(n)">
|
||||||
|
{{ n.lida ? 'Lida' : 'Marcar como lida' }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="logo-text">
|
|
||||||
Line<span class="highlight">Gestão</span>
|
|
||||||
|
<div class="options-menu" [class.open]="optionsOpen" (click)="$event.stopPropagation()">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="options-trigger"
|
||||||
|
(click)="toggleOptions()"
|
||||||
|
aria-haspopup="true"
|
||||||
|
[attr.aria-expanded]="optionsOpen"
|
||||||
|
>
|
||||||
|
Opções
|
||||||
|
<i class="bi bi-chevron-down"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="options-dropdown" *ngIf="optionsOpen">
|
||||||
|
<button type="button" class="options-item" (click)="closeOptions()">
|
||||||
|
Perfil
|
||||||
|
</button>
|
||||||
|
<button type="button" class="options-item danger" (click)="logout()">
|
||||||
|
Sair
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
|
|
@ -45,12 +125,23 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- ✅ faixa (só na home, opcional) -->
|
|
||||||
<div class="header-bar" *ngIf="!isLoggedHeader && isHome">
|
|
||||||
<span class="header-bar-text">Somos a escolha certa para estar sempre conectado!</span>
|
|
||||||
</div>
|
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
<div class="toast-container position-fixed top-0 end-0 p-3">
|
||||||
|
<div class="toast notification-toast" #notifToast>
|
||||||
|
<div class="toast-header">
|
||||||
|
<strong class="me-auto">Vigência próxima</strong>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||||
|
</div>
|
||||||
|
<div class="toast-body" *ngIf="toastNotification as toastItem">
|
||||||
|
A linha {{ toastItem.linha || '-' }} vence em 5 dias.
|
||||||
|
<button type="button" class="btn-aware" (click)="acknowledgeNotification(toastItem)" data-bs-dismiss="toast">
|
||||||
|
Estou ciente
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- ✅ OVERLAY (logado) -->
|
<!-- ✅ OVERLAY (logado) -->
|
||||||
<div class="menu-overlay" *ngIf="isLoggedHeader && menuOpen" (click)="closeMenu()"></div>
|
<div class="menu-overlay" *ngIf="isLoggedHeader && menuOpen" (click)="closeMenu()"></div>
|
||||||
|
|
||||||
|
|
@ -62,7 +153,7 @@
|
||||||
(click)="$event.stopPropagation()"
|
(click)="$event.stopPropagation()"
|
||||||
>
|
>
|
||||||
<div class="side-menu-header">
|
<div class="side-menu-header">
|
||||||
<a class="side-logo" routerLink="/geral" (click)="closeMenu()">
|
<a class="side-logo" routerLink="/dashboard" (click)="closeMenu()">
|
||||||
<span class="side-logo-icon"><i class="bi bi-layers-fill"></i></span>
|
<span class="side-logo-icon"><i class="bi bi-layers-fill"></i></span>
|
||||||
<span class="side-logo-text">Line<span class="highlight">Gestão</span></span>
|
<span class="side-logo-text">Line<span class="highlight">Gestão</span></span>
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -73,6 +164,10 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="side-menu-body">
|
<div class="side-menu-body">
|
||||||
|
<a routerLink="/dashboard" routerLinkActive="active" class="side-item" (click)="closeMenu()">
|
||||||
|
<i class="bi bi-bar-chart-fill"></i> <span>Dashboard</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
<a routerLink="/geral" routerLinkActive="active" class="side-item" (click)="closeMenu()">
|
<a routerLink="/geral" routerLinkActive="active" class="side-item" (click)="closeMenu()">
|
||||||
<i class="bi bi-sim"></i> <span>Geral</span>
|
<i class="bi bi-sim"></i> <span>Geral</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -96,10 +191,5 @@
|
||||||
<a routerLink="/dadosusuarios" routerLinkActive="active" class="side-item" (click)="closeMenu()">
|
<a routerLink="/dadosusuarios" routerLinkActive="active" class="side-item" (click)="closeMenu()">
|
||||||
<i class="bi bi-person-lines-fill"></i> <span>Dados dos Usuários</span>
|
<i class="bi bi-person-lines-fill"></i> <span>Dados dos Usuários</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- ✅ CORRIGIDO + ESTILIZADO IGUAL AOS OUTROS -->
|
|
||||||
<a routerLink="/relatorios" routerLinkActive="active" class="side-item" (click)="closeMenu()">
|
|
||||||
<i class="bi bi-bar-chart-fill"></i> <span>Relatórios</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
|
||||||
|
|
@ -30,6 +30,20 @@
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.logged-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 16px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logged-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
/* Logo */
|
/* Logo */
|
||||||
.logo-area {
|
.logo-area {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -37,24 +51,47 @@
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: var(--text-main);
|
color: var(--text-main);
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
|
||||||
.logo-icon {
|
.logo-icon {
|
||||||
width: 36px;
|
width: 38px;
|
||||||
height: 36px;
|
height: 38px;
|
||||||
background: linear-gradient(135deg, var(--brand-primary), #6A55FF);
|
background: conic-gradient(
|
||||||
|
from 210deg,
|
||||||
|
#1c38c9 0deg,
|
||||||
|
#3555ff 90deg,
|
||||||
|
#e33dcf 180deg,
|
||||||
|
#ff6b6b 250deg,
|
||||||
|
#2ecc71 320deg,
|
||||||
|
#1c38c9 360deg
|
||||||
|
);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-radius: 10px;
|
border-radius: 50%;
|
||||||
display: grid;
|
display: grid;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
|
box-shadow: 0 10px 24px rgba(28, 56, 201, 0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-text {
|
.logo-text {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight: 700;
|
font-weight: 800;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.4px;
|
||||||
.highlight { color: var(--text-main); }
|
text-transform: lowercase;
|
||||||
|
|
||||||
|
.highlight {
|
||||||
|
background: linear-gradient(90deg, #1c38c9 0%, #6a55ff 45%, #e33dcf 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
text-transform: none;
|
||||||
|
margin-left: 4px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-1px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -123,22 +160,261 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Faixa home */
|
/* ✅ Opções (logado) */
|
||||||
.header-bar {
|
|
||||||
margin-top: 10px;
|
.btn-bell {
|
||||||
width: 100%;
|
width: 42px;
|
||||||
height: 34px;
|
height: 42px;
|
||||||
display: flex;
|
border-radius: 12px;
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
i {
|
||||||
background: linear-gradient(90deg, #0B2BD6 0%, #6A55FF 40%, #E33DCF 100%);
|
font-size: 18px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-bar-text {
|
.notifications-menu {
|
||||||
color: #ffffff;
|
position: relative;
|
||||||
font-size: 15px;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-dot {
|
||||||
|
position: absolute;
|
||||||
|
top: -4px;
|
||||||
|
right: -4px;
|
||||||
|
min-width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
padding: 0 5px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: #ef4444;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 11px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
font-family: 'Poppins', sans-serif;
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
box-shadow: 0 0 0 3px #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notifications-dropdown {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: calc(100% + 8px);
|
||||||
|
width: min(360px, 82vw);
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 16px;
|
||||||
|
border: 1px solid rgba(0,0,0,0.08);
|
||||||
|
box-shadow: 0 18px 40px rgba(0,0,0,0.12);
|
||||||
|
z-index: 1200;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notifications-head {
|
||||||
|
padding: 12px 14px 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-weight: 800;
|
||||||
|
color: rgba(17, 18, 20, 0.9);
|
||||||
|
border-bottom: 1px solid rgba(0,0,0,0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.see-all {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--brand-primary);
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notifications-body {
|
||||||
|
max-height: 320px;
|
||||||
|
overflow: auto;
|
||||||
|
padding: 6px 8px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notifications-state {
|
||||||
|
padding: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: rgba(17, 18, 20, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.notifications-state.warn {
|
||||||
|
color: #b45309;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-item {
|
||||||
|
background: rgba(248, 249, 255, 0.9);
|
||||||
|
border: 1px solid rgba(0,0,0,0.06);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 10px 12px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 10px 20px rgba(0,0,0,0.08);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-tag {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 999px;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 800;
|
||||||
|
color: #1f2937;
|
||||||
|
background: rgba(3, 15, 170, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-top {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-line {
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgba(17, 18, 20, 0.65);
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-info {
|
||||||
|
margin-top: 8px;
|
||||||
|
display: grid;
|
||||||
|
gap: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgba(17, 18, 20, 0.75);
|
||||||
|
|
||||||
|
strong {
|
||||||
|
color: rgba(17, 18, 20, 0.9);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-tag.warn {
|
||||||
|
background: rgba(227, 61, 207, 0.16);
|
||||||
|
color: #8b2a7d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-tag.danger {
|
||||||
|
background: rgba(239, 68, 68, 0.16);
|
||||||
|
color: #b91c1c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-title {
|
||||||
|
margin-top: 6px;
|
||||||
|
font-weight: 800;
|
||||||
|
color: rgba(17, 18, 20, 0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-message {
|
||||||
|
margin-top: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgba(17, 18, 20, 0.68);
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mark-read {
|
||||||
|
margin-top: 8px;
|
||||||
|
padding: 6px 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid rgba(0,0,0,0.08);
|
||||||
|
background: #fff;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
cursor: pointer;
|
||||||
|
color: rgba(17, 18, 20, 0.8);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: rgba(3, 15, 170, 0.35);
|
||||||
|
color: #030faa;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-toast {
|
||||||
|
border-radius: 14px;
|
||||||
|
border: 1px solid rgba(0,0,0,0.08);
|
||||||
|
box-shadow: 0 18px 36px rgba(0,0,0,0.16);
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-toast .toast-header {
|
||||||
|
border-bottom: 1px solid rgba(0,0,0,0.06);
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-aware {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 10px;
|
||||||
|
padding: 6px 12px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid rgba(0,0,0,0.1);
|
||||||
|
background: #fff;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.options-menu {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.options-trigger {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 8px 14px;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid rgba(0,0,0,0.1);
|
||||||
|
background: #fff;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--text-main);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: rgba(227, 61, 207, 0.35);
|
||||||
|
box-shadow: 0 12px 22px rgba(0,0,0,0.08);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.options-dropdown {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: calc(100% + 8px);
|
||||||
|
min-width: 200px;
|
||||||
|
padding: 8px 0;
|
||||||
|
border-radius: 14px;
|
||||||
|
border: 1px solid rgba(0,0,0,0.08);
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0 18px 40px rgba(0,0,0,0.12);
|
||||||
|
z-index: 1200;
|
||||||
|
}
|
||||||
|
|
||||||
|
.options-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px 16px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: rgba(17, 18, 20, 0.85);
|
||||||
|
text-decoration: none;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(227, 61, 207, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.danger {
|
||||||
|
color: #c2410c;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ========================= */
|
/* ========================= */
|
||||||
|
|
@ -194,11 +470,19 @@
|
||||||
.side-logo-icon {
|
.side-logo-icon {
|
||||||
width: 38px;
|
width: 38px;
|
||||||
height: 38px;
|
height: 38px;
|
||||||
border-radius: 12px;
|
border-radius: 50%;
|
||||||
display: grid;
|
display: grid;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: linear-gradient(135deg, var(--brand-primary), #6A55FF);
|
background: conic-gradient(
|
||||||
|
from 210deg,
|
||||||
|
#1c38c9 0deg,
|
||||||
|
#3555ff 90deg,
|
||||||
|
#e33dcf 180deg,
|
||||||
|
#ff6b6b 250deg,
|
||||||
|
#2ecc71 320deg,
|
||||||
|
#1c38c9 360deg
|
||||||
|
);
|
||||||
i { font-size: 18px; }
|
i { font-size: 18px; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -206,7 +490,16 @@
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
letter-spacing: -0.4px;
|
letter-spacing: -0.4px;
|
||||||
.highlight { color: var(--text-main); }
|
text-transform: lowercase;
|
||||||
|
|
||||||
|
.highlight {
|
||||||
|
background: linear-gradient(90deg, #1c38c9 0%, #6a55ff 45%, #e33dcf 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
text-transform: none;
|
||||||
|
margin-left: 4px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,10 @@
|
||||||
import { Component, HostListener, Inject } from '@angular/core';
|
import { Component, HostListener, Inject, ElementRef, ViewChild } from '@angular/core';
|
||||||
import { RouterLink, Router, NavigationEnd } from '@angular/router';
|
import { RouterLink, Router, NavigationEnd } from '@angular/router';
|
||||||
import { CommonModule, isPlatformBrowser } from '@angular/common';
|
import { CommonModule, isPlatformBrowser } from '@angular/common';
|
||||||
import { PLATFORM_ID } from '@angular/core';
|
import { PLATFORM_ID } from '@angular/core';
|
||||||
import { filter } from 'rxjs/operators';
|
import { filter } from 'rxjs/operators';
|
||||||
|
import { AuthService } from '../../services/auth.service';
|
||||||
|
import { NotificationsService, NotificationDto } from '../../services/notifications.service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-header',
|
selector: 'app-header',
|
||||||
|
|
@ -15,8 +17,15 @@ export class Header {
|
||||||
isScrolled = false;
|
isScrolled = false;
|
||||||
|
|
||||||
menuOpen = false;
|
menuOpen = false;
|
||||||
|
optionsOpen = false;
|
||||||
|
notificationsOpen = false;
|
||||||
isLoggedHeader = false;
|
isLoggedHeader = false;
|
||||||
isHome = false;
|
isHome = false;
|
||||||
|
notifications: NotificationDto[] = [];
|
||||||
|
notificationsLoading = false;
|
||||||
|
notificationsError = false;
|
||||||
|
private notificationsLoaded = false;
|
||||||
|
@ViewChild('notifToast') notifToast?: ElementRef;
|
||||||
|
|
||||||
private readonly loggedPrefixes = [
|
private readonly loggedPrefixes = [
|
||||||
'/geral',
|
'/geral',
|
||||||
|
|
@ -25,11 +34,14 @@ export class Header {
|
||||||
'/dadosusuarios',
|
'/dadosusuarios',
|
||||||
'/vigencia',
|
'/vigencia',
|
||||||
'/trocanumero',
|
'/trocanumero',
|
||||||
'/relatorios', // ✅ ADICIONADO
|
'/dashboard', // ✅ ADICIONADO
|
||||||
|
'/notificacoes',
|
||||||
];
|
];
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private router: Router,
|
private router: Router,
|
||||||
|
private authService: AuthService,
|
||||||
|
private notificationsService: NotificationsService,
|
||||||
@Inject(PLATFORM_ID) private platformId: object
|
@Inject(PLATFORM_ID) private platformId: object
|
||||||
) {
|
) {
|
||||||
// ✅ resolve no carregamento inicial
|
// ✅ resolve no carregamento inicial
|
||||||
|
|
@ -42,7 +54,15 @@ export class Header {
|
||||||
const rawUrl = event.urlAfterRedirects || event.url;
|
const rawUrl = event.urlAfterRedirects || event.url;
|
||||||
this.syncHeaderState(rawUrl);
|
this.syncHeaderState(rawUrl);
|
||||||
this.menuOpen = false;
|
this.menuOpen = false;
|
||||||
|
this.optionsOpen = false;
|
||||||
|
this.notificationsOpen = false;
|
||||||
|
if (this.isLoggedHeader) {
|
||||||
|
this.ensureNotificationsLoaded();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
if (this.isLoggedHeader) {
|
||||||
|
this.ensureNotificationsLoaded();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private syncHeaderState(rawUrl: string) {
|
private syncHeaderState(rawUrl: string) {
|
||||||
|
|
@ -63,15 +83,127 @@ export class Header {
|
||||||
this.menuOpen = false;
|
this.menuOpen = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
toggleOptions() {
|
||||||
|
this.optionsOpen = !this.optionsOpen;
|
||||||
|
if (this.optionsOpen) this.notificationsOpen = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
closeOptions() {
|
||||||
|
this.optionsOpen = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleNotifications() {
|
||||||
|
this.notificationsOpen = !this.notificationsOpen;
|
||||||
|
if (this.notificationsOpen) {
|
||||||
|
this.optionsOpen = false;
|
||||||
|
this.loadNotifications();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
closeNotifications() {
|
||||||
|
this.notificationsOpen = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
markNotificationRead(notification: NotificationDto) {
|
||||||
|
if (notification.lida) return;
|
||||||
|
this.notificationsService.markAsRead(notification.id).subscribe({
|
||||||
|
next: () => {
|
||||||
|
notification.lida = true;
|
||||||
|
notification.lidaEm = new Date().toISOString();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
get unreadCount() {
|
||||||
|
return this.notifications.filter(n => !n.lida).length;
|
||||||
|
}
|
||||||
|
|
||||||
|
logout() {
|
||||||
|
this.authService.logout();
|
||||||
|
this.optionsOpen = false;
|
||||||
|
this.notificationsOpen = false;
|
||||||
|
this.router.navigate(['/']);
|
||||||
|
}
|
||||||
|
|
||||||
@HostListener('window:scroll', [])
|
@HostListener('window:scroll', [])
|
||||||
onWindowScroll() {
|
onWindowScroll() {
|
||||||
if (!isPlatformBrowser(this.platformId)) return;
|
if (!isPlatformBrowser(this.platformId)) return;
|
||||||
this.isScrolled = window.scrollY > 10;
|
this.isScrolled = window.scrollY > 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@HostListener('document:click', [])
|
||||||
|
onDocumentClick() {
|
||||||
|
this.optionsOpen = false;
|
||||||
|
this.notificationsOpen = false;
|
||||||
|
}
|
||||||
|
|
||||||
@HostListener('document:keydown.escape', [])
|
@HostListener('document:keydown.escape', [])
|
||||||
onEsc() {
|
onEsc() {
|
||||||
if (!isPlatformBrowser(this.platformId)) return;
|
if (!isPlatformBrowser(this.platformId)) return;
|
||||||
this.closeMenu();
|
this.closeMenu();
|
||||||
|
this.closeOptions();
|
||||||
|
this.closeNotifications();
|
||||||
|
}
|
||||||
|
|
||||||
|
acknowledgeNotification(notification: NotificationDto) {
|
||||||
|
if (!isPlatformBrowser(this.platformId)) return;
|
||||||
|
const acknowledged = this.getAcknowledgedIds();
|
||||||
|
acknowledged.add(notification.id);
|
||||||
|
localStorage.setItem('vigenciaAcknowledgedIds', JSON.stringify(Array.from(acknowledged)));
|
||||||
|
}
|
||||||
|
|
||||||
|
private ensureNotificationsLoaded() {
|
||||||
|
if (this.notificationsLoaded || this.notificationsLoading) return;
|
||||||
|
this.loadNotifications();
|
||||||
|
}
|
||||||
|
|
||||||
|
private loadNotifications() {
|
||||||
|
if (!isPlatformBrowser(this.platformId)) return;
|
||||||
|
this.notificationsLoading = true;
|
||||||
|
this.notificationsError = false;
|
||||||
|
this.notificationsService.list().subscribe({
|
||||||
|
next: (data) => {
|
||||||
|
this.notifications = data || [];
|
||||||
|
this.notificationsLoaded = true;
|
||||||
|
this.notificationsLoading = false;
|
||||||
|
this.maybeShowVigenciaToast();
|
||||||
|
},
|
||||||
|
error: () => {
|
||||||
|
this.notificationsError = true;
|
||||||
|
this.notificationsLoading = false;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private async maybeShowVigenciaToast() {
|
||||||
|
if (!this.notifToast || !isPlatformBrowser(this.platformId)) return;
|
||||||
|
const pending = this.getPendingVigenciaToast();
|
||||||
|
if (!pending) return;
|
||||||
|
|
||||||
|
const bs = await import('bootstrap');
|
||||||
|
const toast = new bs.Toast(this.notifToast.nativeElement, { autohide: false });
|
||||||
|
toast.show();
|
||||||
|
}
|
||||||
|
|
||||||
|
get toastNotification() {
|
||||||
|
return this.getPendingVigenciaToast();
|
||||||
|
}
|
||||||
|
|
||||||
|
private getPendingVigenciaToast() {
|
||||||
|
const acknowledged = this.getAcknowledgedIds();
|
||||||
|
return this.notifications.find(
|
||||||
|
n => n.tipo === 'AVencer' && n.diasParaVencer === 5 && !acknowledged.has(n.id)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
private getAcknowledgedIds() {
|
||||||
|
if (!isPlatformBrowser(this.platformId)) return new Set<string>();
|
||||||
|
try {
|
||||||
|
const raw = localStorage.getItem('vigenciaAcknowledgedIds');
|
||||||
|
const ids = raw ? (JSON.parse(raw) as string[]) : [];
|
||||||
|
return new Set(ids);
|
||||||
|
} catch {
|
||||||
|
return new Set<string>();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
<section class="relatorios-page">
|
<section class="dashboard-page">
|
||||||
<div class="wrap">
|
<div class="wrap">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="page-head fade-in-up">
|
<div class="page-head fade-in-up">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<span class="badge">
|
<span class="badge">
|
||||||
<i class="bi bi-bar-chart-fill"></i> Relatórios
|
<i class="bi bi-bar-chart-fill"></i> Dashboard
|
||||||
</span>
|
</span>
|
||||||
<p class="subtitle">Resumo e indicadores do ambiente.</p>
|
<p class="subtitle">Resumo e indicadores do ambiente.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -2,6 +2,18 @@
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
|
--brand-primary: #E33DCF;
|
||||||
|
--brand-blue: #030FAA;
|
||||||
|
--brand-deep: #B832A8;
|
||||||
|
--brand-violet: #6A55FF;
|
||||||
|
--brand-soft: rgba(227, 61, 207, 0.2);
|
||||||
|
--brand-blue-soft: rgba(3, 15, 170, 0.2);
|
||||||
|
--chart-pink: var(--brand-primary);
|
||||||
|
--chart-pink-dark: var(--brand-deep);
|
||||||
|
--chart-pink-soft: #F3B0E8;
|
||||||
|
--chart-blue: var(--brand-blue);
|
||||||
|
--chart-blue-soft: var(--brand-blue-soft);
|
||||||
|
--chart-violet: var(--brand-violet);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ✅ remove footer nessa página */
|
/* ✅ remove footer nessa página */
|
||||||
|
|
@ -12,7 +24,7 @@
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.relatorios-page {
|
.dashboard-page {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
@ -239,7 +251,7 @@
|
||||||
|
|
||||||
/* se quiser tirar o rosa do total, troque aqui */
|
/* se quiser tirar o rosa do total, troque aqui */
|
||||||
.metric.total .meta .v {
|
.metric.total .meta .v {
|
||||||
color: #ff2d95;
|
color: var(--chart-pink);
|
||||||
}
|
}
|
||||||
|
|
||||||
.dot {
|
.dot {
|
||||||
|
|
@ -250,12 +262,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ✅ DOTS COM CORES "PADRÃO DE DASHBOARD" */
|
/* ✅ DOTS COM CORES "PADRÃO DE DASHBOARD" */
|
||||||
.dot.d1 { background: #ff2d95; } /* total (mantém rosa no card de total, se você quiser) */
|
.dot.d1 { background: var(--chart-pink); }
|
||||||
.dot.d2 { background: #2E7D32; } /* Ativos - verde */
|
.dot.d2 { background: var(--chart-blue); }
|
||||||
.dot.d3 { background: #D32F2F; } /* Perda/Roubo - vermelho */
|
.dot.d3 { background: var(--chart-pink-dark); }
|
||||||
.dot.d4 { background: #F57C00; } /* 120 dias - laranja */
|
.dot.d4 { background: var(--chart-violet); }
|
||||||
.dot.d5 { background: #1976D2; } /* Reservas - azul */
|
.dot.d5 { background: var(--chart-pink-soft); }
|
||||||
.dot.d6 { background: #607D8B; } /* Outros - cinza */
|
.dot.d6 { background: var(--chart-blue-soft); }
|
||||||
|
|
||||||
.meta .k {
|
.meta .k {
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
|
|
@ -299,21 +311,25 @@
|
||||||
|
|
||||||
/* Table */
|
/* Table */
|
||||||
.table-wrap {
|
.table-wrap {
|
||||||
padding: 10px 12px 14px;
|
padding: 12px 12px 16px;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
|
background: rgba(255, 255, 255, 0.7);
|
||||||
|
border-radius: 16px;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||||
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tablex {
|
.tablex {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-collapse: collapse;
|
border-collapse: separate;
|
||||||
|
border-spacing: 0 8px;
|
||||||
min-width: 720px;
|
min-width: 720px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tablex th,
|
.tablex th,
|
||||||
.tablex td {
|
.tablex td {
|
||||||
padding: 10px 10px;
|
padding: 12px 12px;
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
font-weight: 700;
|
||||||
font-weight: 800;
|
|
||||||
color: rgba(17, 18, 20, 0.8);
|
color: rgba(17, 18, 20, 0.8);
|
||||||
text-align: left;
|
text-align: left;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
@ -322,11 +338,47 @@
|
||||||
.tablex th {
|
.tablex th {
|
||||||
color: rgba(17, 18, 20, 0.65);
|
color: rgba(17, 18, 20, 0.65);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
padding-bottom: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tablex tbody tr {
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0 8px 16px rgba(17, 18, 20, 0.06);
|
||||||
|
transition: transform 160ms ease, box-shadow 160ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tablex tbody tr:hover {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 12px 22px rgba(17, 18, 20, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tablex tbody td {
|
||||||
|
border-top: 1px solid rgba(17, 18, 20, 0.06);
|
||||||
|
border-bottom: 1px solid rgba(17, 18, 20, 0.06);
|
||||||
|
background: rgba(255, 255, 255, 0.96);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tablex tbody td:first-child {
|
||||||
|
border-left: 1px solid rgba(17, 18, 20, 0.06);
|
||||||
|
border-top-left-radius: 12px;
|
||||||
|
border-bottom-left-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tablex tbody td:last-child {
|
||||||
|
border-right: 1px solid rgba(17, 18, 20, 0.06);
|
||||||
|
border-top-right-radius: 12px;
|
||||||
|
border-bottom-right-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tablex tbody tr:nth-child(even) td {
|
||||||
|
background: rgba(248, 249, 255, 0.9);
|
||||||
}
|
}
|
||||||
|
|
||||||
.muted {
|
.muted {
|
||||||
color: rgba(17, 18, 20, 0.55);
|
color: rgba(17, 18, 20, 0.55);
|
||||||
font-weight: 800;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cell-strong {
|
.cell-strong {
|
||||||
|
|
@ -88,7 +88,7 @@ type DashboardKpisDto = {
|
||||||
userDataComEmail: number;
|
userDataComEmail: number;
|
||||||
};
|
};
|
||||||
|
|
||||||
type RelatoriosDashboardDto = {
|
type DashboardDto = {
|
||||||
kpis: DashboardKpisDto;
|
kpis: DashboardKpisDto;
|
||||||
|
|
||||||
topClientes: TopClienteDto[];
|
topClientes: TopClienteDto[];
|
||||||
|
|
@ -105,13 +105,13 @@ type RelatoriosDashboardDto = {
|
||||||
};
|
};
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-relatorios',
|
selector: 'app-dashboard',
|
||||||
standalone: true,
|
standalone: true,
|
||||||
imports: [CommonModule],
|
imports: [CommonModule],
|
||||||
templateUrl: './relatorios.html',
|
templateUrl: './dashboard.html',
|
||||||
styleUrls: ['./relatorios.scss'],
|
styleUrls: ['./dashboard.scss'],
|
||||||
})
|
})
|
||||||
export class Relatorios implements OnInit, AfterViewInit, OnDestroy {
|
export class Dashboard implements OnInit, AfterViewInit, OnDestroy {
|
||||||
@ViewChild('chartMureg12') chartMureg12?: ElementRef<HTMLCanvasElement>;
|
@ViewChild('chartMureg12') chartMureg12?: ElementRef<HTMLCanvasElement>;
|
||||||
@ViewChild('chartTroca12') chartTroca12?: ElementRef<HTMLCanvasElement>;
|
@ViewChild('chartTroca12') chartTroca12?: ElementRef<HTMLCanvasElement>;
|
||||||
@ViewChild('chartStatusPie') chartStatusPie?: ElementRef<HTMLCanvasElement>;
|
@ViewChild('chartStatusPie') chartStatusPie?: ElementRef<HTMLCanvasElement>;
|
||||||
|
|
@ -164,26 +164,10 @@ export class Relatorios implements OnInit, AfterViewInit, OnDestroy {
|
||||||
|
|
||||||
private readonly baseApi: string;
|
private readonly baseApi: string;
|
||||||
|
|
||||||
// ✅ Paletas "padrão de dashboard" (fácil de entender)
|
|
||||||
private readonly STATUS_COLORS = {
|
|
||||||
ativos: '#2E7D32', // verde
|
|
||||||
perdaRoubo: '#D32F2F', // vermelho
|
|
||||||
bloq120: '#F57C00', // laranja
|
|
||||||
reservas: '#1976D2', // azul
|
|
||||||
outros: '#607D8B', // cinza
|
|
||||||
};
|
|
||||||
|
|
||||||
private readonly VIG_COLORS = {
|
|
||||||
vencidos: '#D32F2F', // vermelho
|
|
||||||
d0a30: '#F57C00', // laranja
|
|
||||||
d31a60: '#FBC02D', // amarelo
|
|
||||||
d61a90: '#1976D2', // azul
|
|
||||||
acima90: '#2E7D32', // verde
|
|
||||||
};
|
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private http: HttpClient,
|
private http: HttpClient,
|
||||||
@Inject(PLATFORM_ID) private platformId: object
|
@Inject(PLATFORM_ID) private platformId: object,
|
||||||
|
private hostRef: ElementRef<HTMLElement>
|
||||||
) {
|
) {
|
||||||
const raw = (environment.apiUrl || 'https://localhost:7205').replace(/\/+$/, '');
|
const raw = (environment.apiUrl || 'https://localhost:7205').replace(/\/+$/, '');
|
||||||
this.baseApi = raw.toLowerCase().endsWith('/api') ? raw : `${raw}/api`;
|
this.baseApi = raw.toLowerCase().endsWith('/api') ? raw : `${raw}/api`;
|
||||||
|
|
@ -218,17 +202,17 @@ export class Relatorios implements OnInit, AfterViewInit, OnDestroy {
|
||||||
} catch {
|
} catch {
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
this.errorMsg =
|
this.errorMsg =
|
||||||
'Falha ao carregar Relatórios. Verifique se a API está rodando e o endpoint /api/relatorios/dashboard está acessível.';
|
'Falha ao carregar Dashboard. Verifique se a API está rodando e o endpoint /api/relatorios/dashboard está acessível.';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private async fetchDashboardReal(): Promise<RelatoriosDashboardDto> {
|
private async fetchDashboardReal(): Promise<DashboardDto> {
|
||||||
if (!isPlatformBrowser(this.platformId)) throw new Error('SSR não suportado para charts');
|
if (!isPlatformBrowser(this.platformId)) throw new Error('SSR não suportado para charts');
|
||||||
const url = `${this.baseApi}/relatorios/dashboard`;
|
const url = `${this.baseApi}/relatorios/dashboard`;
|
||||||
return await firstValueFrom(this.http.get<RelatoriosDashboardDto>(url));
|
return await firstValueFrom(this.http.get<DashboardDto>(url));
|
||||||
}
|
}
|
||||||
|
|
||||||
private applyDto(dto: RelatoriosDashboardDto) {
|
private applyDto(dto: DashboardDto) {
|
||||||
const k = dto.kpis;
|
const k = dto.kpis;
|
||||||
|
|
||||||
this.kpis = [
|
this.kpis = [
|
||||||
|
|
@ -299,7 +283,9 @@ export class Relatorios implements OnInit, AfterViewInit, OnDestroy {
|
||||||
|
|
||||||
this.destroyCharts();
|
this.destroyCharts();
|
||||||
|
|
||||||
// ✅ Status das linhas (paleta padrão)
|
const palette = this.getPalette();
|
||||||
|
|
||||||
|
// ✅ Status das linhas (paleta do sistema)
|
||||||
const cP = this.chartStatusPie?.nativeElement;
|
const cP = this.chartStatusPie?.nativeElement;
|
||||||
if (cP) {
|
if (cP) {
|
||||||
this.chartPie = new Chart(cP, {
|
this.chartPie = new Chart(cP, {
|
||||||
|
|
@ -322,11 +308,11 @@ export class Relatorios implements OnInit, AfterViewInit, OnDestroy {
|
||||||
],
|
],
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
backgroundColor: [
|
backgroundColor: [
|
||||||
this.STATUS_COLORS.ativos,
|
palette.status.ativos,
|
||||||
this.STATUS_COLORS.perdaRoubo,
|
palette.status.perdaRoubo,
|
||||||
this.STATUS_COLORS.bloq120,
|
palette.status.bloq120,
|
||||||
this.STATUS_COLORS.reservas,
|
palette.status.reservas,
|
||||||
this.STATUS_COLORS.outros,
|
palette.status.outros,
|
||||||
],
|
],
|
||||||
}],
|
}],
|
||||||
},
|
},
|
||||||
|
|
@ -355,7 +341,7 @@ export class Relatorios implements OnInit, AfterViewInit, OnDestroy {
|
||||||
label: 'Encerramentos',
|
label: 'Encerramentos',
|
||||||
data: this.vigenciaValues,
|
data: this.vigenciaValues,
|
||||||
borderWidth: 0,
|
borderWidth: 0,
|
||||||
backgroundColor: '#1976D2', // azul padrão
|
backgroundColor: palette.series.vigencia,
|
||||||
borderRadius: 10,
|
borderRadius: 10,
|
||||||
}],
|
}],
|
||||||
},
|
},
|
||||||
|
|
@ -388,11 +374,11 @@ export class Relatorios implements OnInit, AfterViewInit, OnDestroy {
|
||||||
],
|
],
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
backgroundColor: [
|
backgroundColor: [
|
||||||
this.VIG_COLORS.vencidos,
|
palette.vigencia.vencidos,
|
||||||
this.VIG_COLORS.d0a30,
|
palette.vigencia.d0a30,
|
||||||
this.VIG_COLORS.d31a60,
|
palette.vigencia.d31a60,
|
||||||
this.VIG_COLORS.d61a90,
|
palette.vigencia.d61a90,
|
||||||
this.VIG_COLORS.acima90,
|
palette.vigencia.acima90,
|
||||||
],
|
],
|
||||||
}],
|
}],
|
||||||
},
|
},
|
||||||
|
|
@ -421,7 +407,7 @@ export class Relatorios implements OnInit, AfterViewInit, OnDestroy {
|
||||||
label: 'MUREG',
|
label: 'MUREG',
|
||||||
data: this.muregValues,
|
data: this.muregValues,
|
||||||
borderWidth: 0,
|
borderWidth: 0,
|
||||||
backgroundColor: '#6A1B9A', // roxo (bem comum em dashboards)
|
backgroundColor: palette.series.mureg,
|
||||||
borderRadius: 10,
|
borderRadius: 10,
|
||||||
}],
|
}],
|
||||||
},
|
},
|
||||||
|
|
@ -448,7 +434,7 @@ export class Relatorios implements OnInit, AfterViewInit, OnDestroy {
|
||||||
label: 'Troca',
|
label: 'Troca',
|
||||||
data: this.trocaValues,
|
data: this.trocaValues,
|
||||||
borderWidth: 0,
|
borderWidth: 0,
|
||||||
backgroundColor: '#00897B', // teal (bem comum)
|
backgroundColor: palette.series.troca,
|
||||||
borderRadius: 10,
|
borderRadius: 10,
|
||||||
}],
|
}],
|
||||||
},
|
},
|
||||||
|
|
@ -482,4 +468,35 @@ export class Relatorios implements OnInit, AfterViewInit, OnDestroy {
|
||||||
private formatInt(v: number) {
|
private formatInt(v: number) {
|
||||||
return (v || 0).toLocaleString('pt-BR');
|
return (v || 0).toLocaleString('pt-BR');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private getPalette() {
|
||||||
|
return {
|
||||||
|
status: {
|
||||||
|
ativos: this.readCssVar('--chart-blue', '#030FAA'),
|
||||||
|
perdaRoubo: this.readCssVar('--chart-pink-dark', '#B832A8'),
|
||||||
|
bloq120: this.readCssVar('--chart-violet', '#6A55FF'),
|
||||||
|
reservas: this.readCssVar('--chart-pink-soft', '#F3B0E8'),
|
||||||
|
outros: this.readCssVar('--chart-blue-soft', 'rgba(3, 15, 170, 0.2)'),
|
||||||
|
},
|
||||||
|
vigencia: {
|
||||||
|
vencidos: this.readCssVar('--chart-pink', '#E33DCF'),
|
||||||
|
d0a30: this.readCssVar('--chart-violet', '#6A55FF'),
|
||||||
|
d31a60: this.readCssVar('--chart-blue', '#030FAA'),
|
||||||
|
d61a90: this.readCssVar('--chart-pink-dark', '#B832A8'),
|
||||||
|
acima90: this.readCssVar('--chart-pink-soft', '#F3B0E8'),
|
||||||
|
},
|
||||||
|
series: {
|
||||||
|
vigencia: this.readCssVar('--chart-blue', '#030FAA'),
|
||||||
|
mureg: this.readCssVar('--chart-pink', '#E33DCF'),
|
||||||
|
troca: this.readCssVar('--chart-violet', '#6A55FF'),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
private readCssVar(name: string, fallback: string) {
|
||||||
|
if (!isPlatformBrowser(this.platformId)) return fallback;
|
||||||
|
const styles = getComputedStyle(this.hostRef.nativeElement);
|
||||||
|
const value = styles.getPropertyValue(name).trim();
|
||||||
|
return value || fallback;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -115,7 +115,7 @@
|
||||||
|
|
||||||
<!-- KPIs -->
|
<!-- KPIs -->
|
||||||
<div class="fat-kpis mt-4 animate-fade-in">
|
<div class="fat-kpis mt-4 animate-fade-in">
|
||||||
<div class="kpi">
|
<div class="kpi kpi-stack">
|
||||||
<span class="lbl">Total Clientes</span>
|
<span class="lbl">Total Clientes</span>
|
||||||
<span class="val">
|
<span class="val">
|
||||||
<span *ngIf="loadingKpis" class="spinner-border spinner-border-sm text-muted"></span>
|
<span *ngIf="loadingKpis" class="spinner-border spinner-border-sm text-muted"></span>
|
||||||
|
|
@ -123,7 +123,7 @@
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="kpi">
|
<div class="kpi kpi-stack">
|
||||||
<span class="lbl">Total Linhas</span>
|
<span class="lbl">Total Linhas</span>
|
||||||
<span class="val">
|
<span class="val">
|
||||||
<span *ngIf="loadingKpis" class="spinner-border spinner-border-sm text-muted"></span>
|
<span *ngIf="loadingKpis" class="spinner-border spinner-border-sm text-muted"></span>
|
||||||
|
|
@ -131,7 +131,7 @@
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="kpi kpi-wide">
|
<div class="kpi kpi-wide kpi-stack">
|
||||||
<span class="lbl text-vivo">Total Vivo</span>
|
<span class="lbl text-vivo">Total Vivo</span>
|
||||||
<span class="val">
|
<span class="val">
|
||||||
<span *ngIf="loadingKpis" class="spinner-border spinner-border-sm text-muted"></span>
|
<span *ngIf="loadingKpis" class="spinner-border spinner-border-sm text-muted"></span>
|
||||||
|
|
@ -139,7 +139,7 @@
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="kpi kpi-wide">
|
<div class="kpi kpi-wide kpi-stack">
|
||||||
<span class="lbl text-line">Total Line</span>
|
<span class="lbl text-line">Total Line</span>
|
||||||
<span class="val">
|
<span class="val">
|
||||||
<span *ngIf="loadingKpis" class="spinner-border spinner-border-sm text-muted"></span>
|
<span *ngIf="loadingKpis" class="spinner-border spinner-border-sm text-muted"></span>
|
||||||
|
|
@ -147,7 +147,7 @@
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="kpi">
|
<div class="kpi kpi-stack">
|
||||||
<span class="lbl text-brand">Lucro</span>
|
<span class="lbl text-brand">Lucro</span>
|
||||||
<span class="val">
|
<span class="val">
|
||||||
<span *ngIf="loadingKpis" class="spinner-border spinner-border-sm text-muted"></span>
|
<span *ngIf="loadingKpis" class="spinner-border spinner-border-sm text-muted"></span>
|
||||||
|
|
@ -229,7 +229,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="group-body" *ngIf="expandedGroup === g.cliente">
|
<div class="group-body" *ngIf="expandedGroup === g.cliente">
|
||||||
<div class="d-flex justify-content-between align-items-center px-4 py-2 border-bottom bg-white">
|
<div class="group-actions-row">
|
||||||
<small class="text-muted fw-bold">Registros do Cliente</small>
|
<small class="text-muted fw-bold">Registros do Cliente</small>
|
||||||
<span class="chip-muted"><i class="bi bi-info-circle me-1"></i> Clique no “olho” para ver todos os detalhes</span>
|
<span class="chip-muted"><i class="bi bi-info-circle me-1"></i> Clique no “olho” para ver todos os detalhes</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -238,12 +238,12 @@
|
||||||
<table class="table table-modern table-compact align-middle text-center mb-0">
|
<table class="table table-modern table-compact align-middle text-center mb-0">
|
||||||
<thead>
|
<thead>
|
||||||
<tr class="thead-group">
|
<tr class="thead-group">
|
||||||
<th rowspan="2" class="sortable" (click)="setSort('item')">
|
<th rowspan="2" class="sortable th-item" (click)="setSort('item')">
|
||||||
<div class="th-content">ITEM <span class="sort-caret" [class.active]="sortBy==='item'">{{ sortBy==='item' && sortDir==='desc' ? '▼' : '▲' }}</span></div>
|
<div class="th-content">ITEM</div>
|
||||||
</th>
|
</th>
|
||||||
|
|
||||||
<th rowspan="2" class="sortable" (click)="setSort('qtdlinhas')">
|
<th rowspan="2" class="sortable" (click)="setSort('qtdlinhas')">
|
||||||
<div class="th-content">QTD LINHAS <span class="sort-caret" [class.active]="sortBy==='qtdlinhas'">{{ sortBy==='qtdlinhas' && sortDir==='desc' ? '▼' : '▲' }}</span></div>
|
<div class="th-content">QTD LINHAS</div>
|
||||||
</th>
|
</th>
|
||||||
|
|
||||||
<th colspan="2" class="th-block th-vivo">VIVO</th>
|
<th colspan="2" class="th-block th-vivo">VIVO</th>
|
||||||
|
|
@ -254,19 +254,19 @@
|
||||||
|
|
||||||
<tr class="thead-sub">
|
<tr class="thead-sub">
|
||||||
<th class="sortable" (click)="setSort('franquiavivo')">
|
<th class="sortable" (click)="setSort('franquiavivo')">
|
||||||
<div class="th-content">FRANQUIA <span class="sort-caret" [class.active]="sortBy==='franquiavivo'">{{ sortBy==='franquiavivo' && sortDir==='desc' ? '▼' : '▲' }}</span></div>
|
<div class="th-content">FRANQUIA</div>
|
||||||
</th>
|
</th>
|
||||||
|
|
||||||
<th class="sortable" (click)="setSort('valorcontratovivo')">
|
<th class="sortable" (click)="setSort('valorcontratovivo')">
|
||||||
<div class="th-content">VALOR (R$) <span class="sort-caret" [class.active]="sortBy==='valorcontratovivo'">{{ sortBy==='valorcontratovivo' && sortDir==='desc' ? '▼' : '▲' }}</span></div>
|
<div class="th-content">VALOR (R$)</div>
|
||||||
</th>
|
</th>
|
||||||
|
|
||||||
<th class="sortable" (click)="setSort('franquialine')">
|
<th class="sortable" (click)="setSort('franquialine')">
|
||||||
<div class="th-content">FRANQUIA <span class="sort-caret" [class.active]="sortBy==='franquialine'">{{ sortBy==='franquialine' && sortDir==='desc' ? '▼' : '▲' }}</span></div>
|
<div class="th-content">FRANQUIA</div>
|
||||||
</th>
|
</th>
|
||||||
|
|
||||||
<th class="sortable" (click)="setSort('valorcontratoline')">
|
<th class="sortable" (click)="setSort('valorcontratoline')">
|
||||||
<div class="th-content">VALOR (R$) <span class="sort-caret" [class.active]="sortBy==='valorcontratoline'">{{ sortBy==='valorcontratoline' && sortDir==='desc' ? '▼' : '▲' }}</span></div>
|
<div class="th-content">VALOR (R$)</div>
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
|
|
|
||||||
|
|
@ -80,7 +80,7 @@
|
||||||
|
|
||||||
.container-fat {
|
.container-fat {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 1180px;
|
max-width: 1240px;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
margin-top: var(--page-top-gap);
|
margin-top: var(--page-top-gap);
|
||||||
|
|
@ -97,8 +97,9 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
max-height: calc(100vh - 18px) !important;
|
height: auto !important;
|
||||||
min-height: 0;
|
min-height: 80vh;
|
||||||
|
max-height: none !important;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: '';
|
content: '';
|
||||||
|
|
@ -448,6 +449,36 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.kpi-stack {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.lbl,
|
||||||
|
.val {
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.val {
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.kpi-compact {
|
||||||
|
padding: 6px 12px;
|
||||||
|
min-height: 56px;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.val {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lbl {
|
||||||
|
font-size: 0.68rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.kpi-wide {
|
.kpi-wide {
|
||||||
min-width: 220px;
|
min-width: 220px;
|
||||||
padding: 14px 18px;
|
padding: 14px 18px;
|
||||||
|
|
@ -471,6 +502,8 @@
|
||||||
.groups-container {
|
.groups-container {
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -552,6 +585,16 @@
|
||||||
to { opacity: 1; transform: translateY(0); }
|
to { opacity: 1; transform: translateY(0); }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.group-actions-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 12px 16px;
|
||||||
|
background: #fff;
|
||||||
|
border-bottom: 1px solid rgba(17,18,20,0.06);
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
.chip-muted {
|
.chip-muted {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -565,7 +608,11 @@
|
||||||
border: 1px solid rgba(17,18,20,0.06);
|
border: 1px solid rgba(17,18,20,0.06);
|
||||||
}
|
}
|
||||||
|
|
||||||
.inner-table-wrap { max-height: 520px; overflow: auto; }
|
.inner-table-wrap {
|
||||||
|
max-height: none;
|
||||||
|
height: auto;
|
||||||
|
overflow-y: visible;
|
||||||
|
}
|
||||||
|
|
||||||
/* TABLE */
|
/* TABLE */
|
||||||
.table-wrap { overflow: auto; height: 100%; }
|
.table-wrap { overflow: auto; height: 100%; }
|
||||||
|
|
@ -591,6 +638,9 @@
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-align: center !important;
|
text-align: center !important;
|
||||||
|
transition: color 0.2s ease;
|
||||||
|
|
||||||
|
&:hover { color: var(--brand); }
|
||||||
}
|
}
|
||||||
|
|
||||||
tbody tr {
|
tbody tr {
|
||||||
|
|
@ -614,6 +664,7 @@
|
||||||
.sort-caret { width: 14px; opacity: 0.3; &.active { opacity: 1; color: var(--brand); } }
|
.sort-caret { width: 14px; opacity: 0.3; &.active { opacity: 1; color: var(--brand); } }
|
||||||
.td-clip { overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
|
.td-clip { overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
|
||||||
.empty-state { background: rgba(255,255,255,0.4); }
|
.empty-state { background: rgba(255,255,255,0.4); }
|
||||||
|
.th-item .th-content { justify-content: center; }
|
||||||
|
|
||||||
/* ACTIONS */
|
/* ACTIONS */
|
||||||
.action-group { display: flex; justify-content: center; gap: 6px; }
|
.action-group { display: flex; justify-content: center; gap: 6px; }
|
||||||
|
|
|
||||||
|
|
@ -117,18 +117,18 @@ export class LoginComponent {
|
||||||
const nome = this.getNameFromToken(token);
|
const nome = this.getNameFromToken(token);
|
||||||
console.log('👤 Nome extraído:', nome);
|
console.log('👤 Nome extraído:', nome);
|
||||||
|
|
||||||
console.log('🔄 Tentando ir para /geral...');
|
console.log('🔄 Tentando ir para /dashboard...');
|
||||||
this.router.navigate(['/geral'], {
|
this.router.navigate(['/dashboard'], {
|
||||||
state: { toastMessage: `Bem-vindo, ${nome}!` }
|
state: { toastMessage: `Bem-vindo, ${nome}!` }
|
||||||
}).then(sucesso => {
|
}).then(sucesso => {
|
||||||
if (sucesso) console.log('✅ Navegação funcionou!');
|
if (sucesso) console.log('✅ Navegação funcionou!');
|
||||||
else console.error('❌ Navegação falhou! A rota "/geral" existe?');
|
else console.error('❌ Navegação falhou! A rota "/dashboard" existe?');
|
||||||
});
|
});
|
||||||
|
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error('❌ Erro ao processar token ou navegar:', e);
|
console.error('❌ Erro ao processar token ou navegar:', e);
|
||||||
// Força a ida mesmo se o nome falhar
|
// Força a ida mesmo se o nome falhar
|
||||||
this.router.navigate(['/geral']);
|
this.router.navigate(['/dashboard']);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
error: (err) => {
|
error: (err) => {
|
||||||
|
|
|
||||||
|
|
@ -181,9 +181,15 @@
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div class="action-group justify-content-center">
|
<div class="action-group justify-content-center">
|
||||||
|
<button class="btn-icon info" (click)="onView(r)" title="Ver Detalhes">
|
||||||
|
<i class="bi bi-eye"></i>
|
||||||
|
</button>
|
||||||
<button class="btn-icon primary" (click)="onEditar(r)" title="Editar Registro">
|
<button class="btn-icon primary" (click)="onEditar(r)" title="Editar Registro">
|
||||||
<i class="bi bi-pencil-square"></i>
|
<i class="bi bi-pencil-square"></i>
|
||||||
</button>
|
</button>
|
||||||
|
<button class="btn-icon danger" (click)="onDelete(r)" title="Excluir Registro">
|
||||||
|
<i class="bi bi-trash"></i>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
@ -223,7 +229,7 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div class="modal-backdrop-custom" *ngIf="editOpen || createOpen" (click)="closeEdit(); closeCreate()"></div>
|
<div class="modal-backdrop-custom" *ngIf="editOpen || createOpen || deleteOpen || detailOpen" (click)="closeEdit(); closeCreate(); closeDelete(); closeDetail()"></div>
|
||||||
|
|
||||||
<!-- ============================== -->
|
<!-- ============================== -->
|
||||||
<!-- EDIT MODAL -->
|
<!-- EDIT MODAL -->
|
||||||
|
|
@ -467,3 +473,109 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- ============================== -->
|
||||||
|
<!-- DETAIL MODAL -->
|
||||||
|
<!-- ============================== -->
|
||||||
|
<div class="modal-custom" *ngIf="detailOpen">
|
||||||
|
<div class="modal-card modal-xl-custom" (click)="$event.stopPropagation()">
|
||||||
|
|
||||||
|
<div class="modal-header">
|
||||||
|
<div class="modal-title">
|
||||||
|
<span class="icon-bg primary-soft"><i class="bi bi-eye"></i></span>
|
||||||
|
Detalhes da Mureg
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-sm btn-icon" (click)="closeDetail()"><i class="bi bi-x-lg"></i></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-body modern-body bg-light-gray">
|
||||||
|
<div class="p-5 text-center text-muted" *ngIf="detailLoading">
|
||||||
|
<span class="spinner-border me-2"></span> Carregando detalhes...
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="details-dashboard" *ngIf="!detailLoading && detailData">
|
||||||
|
<div class="detail-box">
|
||||||
|
<div class="box-header justify-content-center">
|
||||||
|
<span><i class="bi bi-card-text me-2"></i> Informações da Mureg</span>
|
||||||
|
</div>
|
||||||
|
<div class="box-body">
|
||||||
|
<div class="info-grid">
|
||||||
|
<div class="info-item span-2">
|
||||||
|
<span class="lbl">Linha Nova</span>
|
||||||
|
<span class="val text-blue fs-4">{{ detailData.linhaNova || '-' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item span-2">
|
||||||
|
<span class="lbl">Linha Antiga</span>
|
||||||
|
<span class="val">{{ detailData.linhaAntiga || '-' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item span-2">
|
||||||
|
<span class="lbl">Cliente</span>
|
||||||
|
<span class="val">{{ detailData.cliente || '-' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item span-2">
|
||||||
|
<span class="lbl">Usuário</span>
|
||||||
|
<span class="val">{{ detailData.usuario || '-' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<span class="lbl">Item</span>
|
||||||
|
<span class="val">{{ detailData.item || '-' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<span class="lbl">Data Mureg</span>
|
||||||
|
<span class="val">{{ displayValue('dataDaMureg', detailData.dataDaMureg) }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item span-2">
|
||||||
|
<span class="lbl">ICCID</span>
|
||||||
|
<span class="val small-text">{{ detailData.iccid || '-' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-item span-2">
|
||||||
|
<span class="lbl">Skil</span>
|
||||||
|
<span class="val">{{ detailData.skil || '-' }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ============================== -->
|
||||||
|
<!-- DELETE MODAL -->
|
||||||
|
<!-- ============================== -->
|
||||||
|
<div class="modal-custom" *ngIf="deleteOpen">
|
||||||
|
<div class="modal-card modal-sm" (click)="$event.stopPropagation()">
|
||||||
|
|
||||||
|
<div class="modal-header">
|
||||||
|
<div class="modal-title">
|
||||||
|
<span class="icon-bg danger-soft"><i class="bi bi-trash"></i></span>
|
||||||
|
Excluir Mureg
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="btn btn-glass btn-sm" (click)="closeDelete()" [disabled]="deleteSaving">
|
||||||
|
<i class="bi bi-x-lg me-1"></i> Cancelar
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="modal-body">
|
||||||
|
<p class="mb-2 fw-bold">Tem certeza que deseja excluir esta Mureg?</p>
|
||||||
|
<div class="text-muted small">
|
||||||
|
<div><strong>Cliente:</strong> {{ deleteTarget?.cliente || '-' }}</div>
|
||||||
|
<div><strong>Linha nova:</strong> {{ deleteTarget?.linhaNova || '-' }}</div>
|
||||||
|
<div><strong>Linha antiga:</strong> {{ deleteTarget?.linhaAntiga || '-' }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="d-flex justify-content-end gap-2 mt-4">
|
||||||
|
<button class="btn btn-glass btn-sm" (click)="closeDelete()" [disabled]="deleteSaving">
|
||||||
|
Cancelar
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-danger btn-sm" (click)="confirmDelete()" [disabled]="deleteSaving">
|
||||||
|
<span *ngIf="!deleteSaving"><i class="bi bi-trash me-1"></i> Excluir</span>
|
||||||
|
<span *ngIf="deleteSaving"><span class="spinner-border spinner-border-sm me-2"></span> Excluindo...</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -267,6 +267,8 @@
|
||||||
color: rgba(17,18,20,0.5); transition: all 0.2s; cursor: pointer;
|
color: rgba(17,18,20,0.5); transition: all 0.2s; cursor: pointer;
|
||||||
&:hover { background: rgba(17,18,20,0.05); color: var(--text); transform: translateY(-1px); }
|
&:hover { background: rgba(17,18,20,0.05); color: var(--text); transform: translateY(-1px); }
|
||||||
&.primary:hover { color: var(--blue); background: rgba(3,15,170,0.1); }
|
&.primary:hover { color: var(--blue); background: rgba(3,15,170,0.1); }
|
||||||
|
&.info:hover { color: var(--brand); background: rgba(227, 61, 207, 0.12); }
|
||||||
|
&.danger:hover { color: #dc3545; background: rgba(220, 53, 69, 0.12); }
|
||||||
}
|
}
|
||||||
|
|
||||||
/* FOOTER */
|
/* FOOTER */
|
||||||
|
|
@ -278,15 +280,18 @@
|
||||||
.modal-backdrop-custom { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 9990; backdrop-filter: blur(4px); }
|
.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-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); width: min(850px, 100%); max-height: 90vh; }
|
.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); width: min(850px, 100%); max-height: 90vh; }
|
||||||
|
.modal-card.modal-xl-custom { width: min(920px, 90vw); max-height: 78vh; }
|
||||||
|
.modal-card.modal-sm { width: min(480px, 100%); }
|
||||||
@keyframes modalPop { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
|
@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; }
|
.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; display: flex; align-items: center; justify-content: center; font-size: 16px;
|
.icon-bg { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px;
|
||||||
&.primary-soft { background: rgba(3, 15, 170, 0.1); color: var(--blue); }
|
&.primary-soft { background: rgba(3, 15, 170, 0.1); color: var(--blue); }
|
||||||
&.brand-soft { background: rgba(227, 61, 207, 0.1); color: var(--brand); } /* Adicionado */
|
&.brand-soft { background: rgba(227, 61, 207, 0.1); color: var(--brand); } /* Adicionado */
|
||||||
|
&.danger-soft { background: rgba(220, 53, 69, 0.12); color: #dc3545; }
|
||||||
}
|
}
|
||||||
.btn-icon { color: var(--muted); background: transparent; font-size: 1.2rem; border:none; cursor: pointer; &:hover { color: var(--brand); } }
|
.btn-icon { color: var(--muted); background: transparent; font-size: 1.2rem; border:none; cursor: pointer; &:hover { color: var(--brand); } }
|
||||||
}
|
}
|
||||||
.modal-body { padding: 24px; overflow-y: auto; &.bg-light-gray { background-color: #f8f9fa; } }
|
.modal-body { padding: 20px; overflow-y: auto; &.bg-light-gray { background-color: #f8f9fa; } }
|
||||||
|
|
||||||
/* FORM & DETAILS */
|
/* FORM & DETAILS */
|
||||||
.details-dashboard { display: grid; grid-template-columns: 1fr; gap: 20px; }
|
.details-dashboard { display: grid; grid-template-columns: 1fr; gap: 20px; }
|
||||||
|
|
@ -294,6 +299,18 @@ div.detail-box { background: #fff; border-radius: 16px; border: 1px solid rgba(0
|
||||||
div.box-header { padding: 10px 16px; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid rgba(0,0,0,0.04); background: #fdfdfd; display: flex; align-items: center; }
|
div.box-header { padding: 10px 16px; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid rgba(0,0,0,0.04); background: #fdfdfd; display: flex; align-items: center; }
|
||||||
div.box-body { padding: 16px; }
|
div.box-body { padding: 16px; }
|
||||||
|
|
||||||
|
/* INFO GRID (detalhes) */
|
||||||
|
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0; }
|
||||||
|
.info-item { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 5px 8px; background: rgba(245, 245, 247, 0.5); border-radius: 10px; border: 1px solid rgba(0,0,0,0.03); transition: background 0.2s;
|
||||||
|
&:hover { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
|
||||||
|
&.span-2 { grid-column: span 2; }
|
||||||
|
.lbl { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; color: var(--muted); margin-bottom: 2px; }
|
||||||
|
.val { font-size: 0.85rem; font-weight: 700; color: var(--text); word-break: break-word; line-height: 1.2;
|
||||||
|
&.fs-4 { font-size: 1rem !important; }
|
||||||
|
&.small-text { font-size: 0.7rem; font-family: monospace; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* EDIT FORM STYLES */
|
/* EDIT FORM STYLES */
|
||||||
.form-grid {
|
.form-grid {
|
||||||
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
|
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
|
||||||
|
|
|
||||||
|
|
@ -129,6 +129,16 @@ export class Mureg implements AfterViewInit {
|
||||||
editSaving = false;
|
editSaving = false;
|
||||||
editModel: any = null;
|
editModel: any = null;
|
||||||
|
|
||||||
|
// ====== DETAIL MODAL ======
|
||||||
|
detailOpen = false;
|
||||||
|
detailLoading = false;
|
||||||
|
detailData: MuregDetailDto | null = null;
|
||||||
|
|
||||||
|
// ====== DELETE MODAL ======
|
||||||
|
deleteOpen = false;
|
||||||
|
deleteSaving = false;
|
||||||
|
deleteTarget: MuregRow | null = null;
|
||||||
|
|
||||||
// ====== CREATE MODAL ======
|
// ====== CREATE MODAL ======
|
||||||
createOpen = false;
|
createOpen = false;
|
||||||
createSaving = false;
|
createSaving = false;
|
||||||
|
|
@ -638,6 +648,76 @@ export class Mureg implements AfterViewInit {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// =======================================================================
|
||||||
|
// DETAIL MODAL
|
||||||
|
// =======================================================================
|
||||||
|
onView(row: MuregRow) {
|
||||||
|
this.detailOpen = true;
|
||||||
|
this.detailLoading = true;
|
||||||
|
this.detailData = null;
|
||||||
|
|
||||||
|
this.http.get<MuregDetailDto>(`${this.apiBase}/${row.id}`).subscribe({
|
||||||
|
next: (data) => {
|
||||||
|
this.detailData = data;
|
||||||
|
this.detailLoading = false;
|
||||||
|
},
|
||||||
|
error: async () => {
|
||||||
|
this.detailLoading = false;
|
||||||
|
await this.showToast('Erro ao carregar detalhes da Mureg.');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
closeDetail() {
|
||||||
|
this.detailOpen = false;
|
||||||
|
this.detailLoading = false;
|
||||||
|
this.detailData = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// =======================================================================
|
||||||
|
// DELETE MODAL
|
||||||
|
// =======================================================================
|
||||||
|
onDelete(row: MuregRow) {
|
||||||
|
this.deleteTarget = row;
|
||||||
|
this.deleteOpen = true;
|
||||||
|
this.deleteSaving = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
closeDelete() {
|
||||||
|
this.deleteOpen = false;
|
||||||
|
this.deleteTarget = null;
|
||||||
|
this.deleteSaving = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
confirmDelete() {
|
||||||
|
if (!this.deleteTarget?.id) return;
|
||||||
|
|
||||||
|
this.deleteSaving = true;
|
||||||
|
const targetId = this.deleteTarget.id;
|
||||||
|
const currentGroup = this.expandedGroup;
|
||||||
|
|
||||||
|
this.http.delete(`${this.apiBase}/${targetId}`).subscribe({
|
||||||
|
next: async () => {
|
||||||
|
this.deleteSaving = false;
|
||||||
|
await this.showToast('Mureg excluída com sucesso!');
|
||||||
|
this.closeDelete();
|
||||||
|
this.loadForGroups();
|
||||||
|
|
||||||
|
if (currentGroup) {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.expandedGroup = currentGroup;
|
||||||
|
this.toggleGroup(currentGroup);
|
||||||
|
}, 400);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
error: async (err) => {
|
||||||
|
this.deleteSaving = false;
|
||||||
|
const msg = this.extractApiMessage(err) ?? 'Erro ao excluir Mureg.';
|
||||||
|
await this.showToast(msg);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// =======================================================================
|
// =======================================================================
|
||||||
// Helpers
|
// Helpers
|
||||||
// =======================================================================
|
// =======================================================================
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,81 @@
|
||||||
|
<section class="notificacoes-page">
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="container">
|
||||||
|
<div class="page-head">
|
||||||
|
<div>
|
||||||
|
<h2>Notificações</h2>
|
||||||
|
<p>Acompanhe vencimentos e avisos recentes.</p>
|
||||||
|
</div>
|
||||||
|
<div class="filters">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="filter-btn"
|
||||||
|
[class.active]="filter === 'todas'"
|
||||||
|
(click)="setFilter('todas')"
|
||||||
|
>
|
||||||
|
Todas
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="filter-btn warning"
|
||||||
|
[class.active]="filter === 'aVencer'"
|
||||||
|
(click)="setFilter('aVencer')"
|
||||||
|
>
|
||||||
|
A vencer
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="filter-btn danger"
|
||||||
|
[class.active]="filter === 'vencidas'"
|
||||||
|
(click)="setFilter('vencidas')"
|
||||||
|
>
|
||||||
|
Vencidas
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="filter-btn neutral"
|
||||||
|
[class.active]="filter === 'lidas'"
|
||||||
|
(click)="setFilter('lidas')"
|
||||||
|
>
|
||||||
|
Lidas
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="state" *ngIf="loading">Carregando notificações...</div>
|
||||||
|
<div class="state warn" *ngIf="!loading && error">Falha ao carregar notificações.</div>
|
||||||
|
<div class="state" *ngIf="!loading && !error && notifications.length === 0">
|
||||||
|
Nenhuma notificação encontrada.
|
||||||
|
</div>
|
||||||
|
<div class="state" *ngIf="!loading && !error && notifications.length > 0 && filteredNotifications.length === 0">
|
||||||
|
Nenhuma notificação para o filtro selecionado.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="notifications-grid" *ngIf="!loading && !error && filteredNotifications.length > 0">
|
||||||
|
<article class="notification-card" *ngFor="let n of filteredNotifications">
|
||||||
|
<div class="card-head">
|
||||||
|
<span class="tag" [class.danger]="n.tipo === 'Vencido'" [class.warn]="n.tipo === 'AVencer'">
|
||||||
|
{{ n.tipo === 'Vencido' ? 'Vencido' : 'A vencer' }}
|
||||||
|
</span>
|
||||||
|
<span class="line-number">{{ n.linha || '-' }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-title">
|
||||||
|
{{ n.linha || '-' }} - {{ n.usuario || n.cliente || '-' }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-info">
|
||||||
|
<div><strong>Linha:</strong> {{ n.linha || '-' }}</div>
|
||||||
|
<div><strong>Usuário:</strong> {{ n.usuario || '-' }}</div>
|
||||||
|
<div><strong>Cliente:</strong> {{ n.cliente || '-' }}</div>
|
||||||
|
<div><strong>{{ n.tipo === 'Vencido' ? 'Venceu em' : 'Vence em' }}:</strong> {{ n.referenciaData ? (n.referenciaData | date:'dd/MM/yyyy') : '-' }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="button" class="mark-read" (click)="markAsRead(n)">
|
||||||
|
{{ n.lida ? 'Lida' : 'Marcar como lida' }}
|
||||||
|
</button>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
@ -0,0 +1,178 @@
|
||||||
|
:host {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notificacoes-page {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrap {
|
||||||
|
padding: 24px 0 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1100px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
gap: 16px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 800;
|
||||||
|
margin: 0 0 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
color: rgba(17, 18, 20, 0.6);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-btn {
|
||||||
|
border: 1px solid rgba(0,0,0,0.08);
|
||||||
|
background: #fff;
|
||||||
|
padding: 8px 14px;
|
||||||
|
border-radius: 999px;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgba(17, 18, 20, 0.7);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
border-color: rgba(3, 15, 170, 0.4);
|
||||||
|
background: rgba(3, 15, 170, 0.08);
|
||||||
|
color: #030faa;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.warning.active {
|
||||||
|
border-color: rgba(227, 61, 207, 0.45);
|
||||||
|
background: rgba(227, 61, 207, 0.12);
|
||||||
|
color: #8b2a7d;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.danger.active {
|
||||||
|
border-color: rgba(239, 68, 68, 0.45);
|
||||||
|
background: rgba(239, 68, 68, 0.12);
|
||||||
|
color: #b91c1c;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.neutral.active {
|
||||||
|
border-color: rgba(15, 23, 42, 0.35);
|
||||||
|
background: rgba(15, 23, 42, 0.08);
|
||||||
|
color: #0f172a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.state {
|
||||||
|
padding: 12px 14px;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: rgba(255, 255, 255, 0.7);
|
||||||
|
border: 1px solid rgba(0,0,0,0.08);
|
||||||
|
font-weight: 700;
|
||||||
|
color: rgba(17, 18, 20, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.state.warn {
|
||||||
|
color: #b45309;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notifications-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-card {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 16px;
|
||||||
|
border: 1px solid rgba(0,0,0,0.08);
|
||||||
|
padding: 16px;
|
||||||
|
box-shadow: 0 18px 36px rgba(0,0,0,0.08);
|
||||||
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 22px 44px rgba(0,0,0,0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-info {
|
||||||
|
margin-top: 12px;
|
||||||
|
display: grid;
|
||||||
|
gap: 6px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: rgba(17, 18, 20, 0.72);
|
||||||
|
|
||||||
|
strong {
|
||||||
|
color: rgba(17, 18, 20, 0.92);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-weight: 800;
|
||||||
|
color: rgba(17, 18, 20, 0.92);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 4px 10px;
|
||||||
|
border-radius: 999px;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 800;
|
||||||
|
background: rgba(3, 15, 170, 0.12);
|
||||||
|
color: #1f2937;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag.warn {
|
||||||
|
background: rgba(227, 61, 207, 0.16);
|
||||||
|
color: #8b2a7d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag.danger {
|
||||||
|
background: rgba(239, 68, 68, 0.16);
|
||||||
|
color: #b91c1c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line-number {
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgba(17, 18, 20, 0.55);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.mark-read {
|
||||||
|
margin-top: 12px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid rgba(0,0,0,0.08);
|
||||||
|
background: #fff;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { CommonModule } from '@angular/common';
|
||||||
|
|
||||||
|
import { NotificationsService, NotificationDto } from '../../services/notifications.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-notificacoes',
|
||||||
|
standalone: true,
|
||||||
|
imports: [CommonModule],
|
||||||
|
templateUrl: './notificacoes.html',
|
||||||
|
styleUrls: ['./notificacoes.scss'],
|
||||||
|
})
|
||||||
|
export class Notificacoes implements OnInit {
|
||||||
|
notifications: NotificationDto[] = [];
|
||||||
|
filter: 'todas' | 'vencidas' | 'aVencer' | 'lidas' = 'todas';
|
||||||
|
loading = false;
|
||||||
|
error = false;
|
||||||
|
|
||||||
|
constructor(private notificationsService: NotificationsService) {}
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
this.loadNotifications();
|
||||||
|
}
|
||||||
|
|
||||||
|
markAsRead(notification: NotificationDto) {
|
||||||
|
if (notification.lida) return;
|
||||||
|
this.notificationsService.markAsRead(notification.id).subscribe({
|
||||||
|
next: () => {
|
||||||
|
notification.lida = true;
|
||||||
|
notification.lidaEm = new Date().toISOString();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
setFilter(value: 'todas' | 'vencidas' | 'aVencer' | 'lidas') {
|
||||||
|
this.filter = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
get filteredNotifications() {
|
||||||
|
if (this.filter === 'vencidas') {
|
||||||
|
return this.notifications.filter(n => n.tipo === 'Vencido');
|
||||||
|
}
|
||||||
|
if (this.filter === 'aVencer') {
|
||||||
|
return this.notifications.filter(n => n.tipo === 'AVencer');
|
||||||
|
}
|
||||||
|
if (this.filter === 'lidas') {
|
||||||
|
return this.notifications.filter(n => n.lida);
|
||||||
|
}
|
||||||
|
return this.notifications;
|
||||||
|
}
|
||||||
|
|
||||||
|
private loadNotifications() {
|
||||||
|
this.loading = true;
|
||||||
|
this.error = false;
|
||||||
|
this.notificationsService.list().subscribe({
|
||||||
|
next: (data) => {
|
||||||
|
this.notifications = data || [];
|
||||||
|
this.loading = false;
|
||||||
|
},
|
||||||
|
error: () => {
|
||||||
|
this.error = true;
|
||||||
|
this.loading = false;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
import { HttpClient } from '@angular/common/http';
|
||||||
|
import { Observable } from 'rxjs';
|
||||||
|
|
||||||
|
import { environment } from '../../environments/environment';
|
||||||
|
|
||||||
|
export type NotificationTipo = 'AVencer' | 'Vencido';
|
||||||
|
|
||||||
|
export type NotificationDto = {
|
||||||
|
id: string;
|
||||||
|
tipo: NotificationTipo;
|
||||||
|
titulo: string;
|
||||||
|
mensagem: string;
|
||||||
|
data: string;
|
||||||
|
referenciaData?: string | null;
|
||||||
|
diasParaVencer?: number | null;
|
||||||
|
lida: boolean;
|
||||||
|
lidaEm?: string | null;
|
||||||
|
vigenciaLineId?: string | null;
|
||||||
|
cliente?: string | null;
|
||||||
|
linha?: string | null;
|
||||||
|
usuario?: string | null;
|
||||||
|
};
|
||||||
|
|
||||||
|
@Injectable({ providedIn: 'root' })
|
||||||
|
export class NotificationsService {
|
||||||
|
private readonly baseApi: string;
|
||||||
|
|
||||||
|
constructor(private http: HttpClient) {
|
||||||
|
const raw = (environment.apiUrl || '').replace(/\/+$/, '');
|
||||||
|
this.baseApi = raw.toLowerCase().endsWith('/api') ? raw : `${raw}/api`;
|
||||||
|
}
|
||||||
|
|
||||||
|
list(): Observable<NotificationDto[]> {
|
||||||
|
return this.http.get<NotificationDto[]>(`${this.baseApi}/notifications`);
|
||||||
|
}
|
||||||
|
|
||||||
|
markAsRead(id: string): Observable<void> {
|
||||||
|
return this.http.patch<void>(`${this.baseApi}/notifications/${id}/read`, {});
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue