diff --git a/src/app/app.html b/src/app/app.html index f5b9d3f..5009a69 100644 --- a/src/app/app.html +++ b/src/app/app.html @@ -1,5 +1,8 @@ - + - +
+ +
- + + diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index e794487..06022b9 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -11,9 +11,7 @@ import { authGuard } from './guards/auth.guard'; import { DadosUsuarios } from './pages/dados-usuarios/dados-usuarios'; import { VigenciaComponent } from './pages/vigencia/vigencia'; import { TrocaNumero } from './pages/troca-numero/troca-numero'; - -// ✅ NOVO: TROCA DE NÚMERO - +import { Relatorios } from './pages/relatorios/relatorios'; export const routes: Routes = [ { path: '', component: Home }, @@ -25,9 +23,13 @@ export const routes: Routes = [ { path: 'faturamento', component: Faturamento, canActivate: [authGuard] }, { path: 'dadosusuarios', component: DadosUsuarios, canActivate: [authGuard] }, { path: 'vigencia', component: VigenciaComponent, canActivate: [authGuard] }, - - // ✅ NOVO: rota da página Troca de Número { path: 'trocanumero', component: TrocaNumero, canActivate: [authGuard] }, + // ✅ rota correta + { path: 'relatorios', component: Relatorios, canActivate: [authGuard] }, + + // ✅ compatibilidade: se alguém acessar /portal/relatorios, manda pra /relatorios + { path: 'portal/relatorios', redirectTo: 'relatorios', pathMatch: 'full' }, + { path: '**', redirectTo: '' }, ]; diff --git a/src/app/app.ts b/src/app/app.ts index d45f4bd..f4b13c7 100644 --- a/src/app/app.ts +++ b/src/app/app.ts @@ -1,16 +1,65 @@ -import { Component, signal } from '@angular/core'; -import { RouterOutlet } from '@angular/router'; -import { Header } from './components/header/header'; -import { Footer } from './components/footer/footer'; +// src/app/app.ts +import { Component, Inject, PLATFORM_ID } from '@angular/core'; +import { Router, NavigationEnd, RouterOutlet } from '@angular/router'; +import { CommonModule } from '@angular/common'; +import { Header } from './components/header/header'; +import { FooterComponent } from './components/footer/footer'; @Component({ selector: 'app-root', standalone: true, - imports: [RouterOutlet, Header, Footer], + imports: [ + CommonModule, + RouterOutlet, + Header, + FooterComponent + ], templateUrl: './app.html', - styleUrl: './app.scss' + styleUrls: ['./app.scss'], }) -export class App { - protected readonly title = signal('line-gestao-frontend'); +export class AppComponent { + isFullScreenPage = false; + hideFooter = false; + + // ✅ páginas que devem esconder header/footer (tela cheia) + private readonly fullScreenRoutes = ['/login', '/register']; + + // ✅ rotas internas (LOGADO) que devem esconder footer + private readonly loggedPrefixes = [ + '/geral', + '/mureg', + '/faturamento', + '/dadosusuarios', + '/vigencia', + '/trocanumero', + '/relatorios', // ✅ ADICIONADO: esconde footer na página de relatórios + ]; + + constructor( + private router: Router, + @Inject(PLATFORM_ID) private platformId: object + ) { + this.router.events.subscribe((event) => { + if (event instanceof NavigationEnd) { + const rawUrl = event.urlAfterRedirects || event.url; + + // remove query/hash e barra final + let url = rawUrl.split('?')[0].split('#')[0]; + url = url.replace(/\/+$/, ''); + + this.isFullScreenPage = this.fullScreenRoutes.includes(url); + + const isLoggedRoute = this.loggedPrefixes.some( + (p) => url === p || url.startsWith(p + '/') + ); + + // ✅ footer some ao logar + também no login/register + this.hideFooter = isLoggedRoute || this.isFullScreenPage; + } + }); + } } + +// ✅ SSR espera importar { App } de './app/app' +export { AppComponent as App }; diff --git a/src/app/components/footer/footer.html b/src/app/components/footer/footer.html index 260839a..60253d0 100644 --- a/src/app/components/footer/footer.html +++ b/src/app/components/footer/footer.html @@ -1,42 +1,32 @@ - \ No newline at end of file diff --git a/src/app/components/footer/footer.scss b/src/app/components/footer/footer.scss index ab19d6c..095c74d 100644 --- a/src/app/components/footer/footer.scss +++ b/src/app/components/footer/footer.scss @@ -1,145 +1,102 @@ -/* ===================================== */ -/* FOOTER CONTAINER – VERSÃO MODERNA */ -/* ===================================== */ +.app-footer { + background-color: #fff; + padding: 0 0 32px 0; + margin-top: auto; /* Garante que fique no fim se o conteúdo for curto */ + position: relative; + font-family: 'Inter', sans-serif; +} -.footer-container { +/* Linha fina com gradiente da marca no topo */ +.footer-line { width: 100%; - /* Degradê com as cores da marca */ - background: linear-gradient(90deg, #030FAA 0%, #6066FF 45%, #C91EB5 100%); - padding: 10px 32px; /* bem mais baixo que antes */ - box-sizing: border-box; - margin-top: -0.5px; + height: 1px; + background: linear-gradient(90deg, + rgba(255,255,255,0) 0%, + rgba(227, 61, 207, 0.3) 50%, + rgba(255,255,255,0) 100% + ); + margin-bottom: 32px; +} +.footer-inner { display: flex; - justify-content: space-between; align-items: center; + justify-content: space-between; gap: 24px; - font-family: "Inter", sans-serif; - color: #FFFFFF; - - border-top: 1px solid rgba(255, 255, 255, 0.12); - - /* Suave sombra pra destacar do conteúdo */ - box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12); - - /* Telas médias e abaixo – empilha conteúdo */ - @media (max-width: 1199.98px) { + /* Responsividade: Empilha no mobile */ + @media (max-width: 992px) { flex-direction: column; - justify-content: center; - align-items: center; text-align: center; - padding: 12px 20px; - } - - @media (max-width: 768px) { - padding: 12px 16px; + gap: 32px; } } -/* ===================================== */ -/* LADO ESQUERDO (TEXTOS) */ -/* ===================================== */ - -.footer-left { - margin: 0; /* remove aqueles 100px enormes de antes */ -} - -.footer-left p { - margin: 0 0 2px 0; /* menos espaçamento vertical */ - font-size: 13px; - font-weight: 500; - - @media (max-width: 768px) { - font-size: 12px; - } - - @media (max-width: 480px) { - font-size: 11.5px; - } -} - -/* ===================================== */ -/* LADO DIREITO (REDES + BOTÃO) */ -/* ===================================== */ - -.footer-right { - display: flex; - flex-direction: column; - align-items: flex-end; - gap: 8px; - - @media (max-width: 1199.98px) { - align-items: center; - } - - @media (max-width: 768px) { - align-items: flex-start; - } -} - -/* Redes sociais */ - -.social-wrapper { - width: 100%; - display: flex; - justify-content: flex-end; - - @media (max-width: 1199.98px) { - justify-content: center; - } - - @media (max-width: 768px) { - justify-content: flex-start; - } -} - -.social-section { - display: flex; - align-items: center; - gap: 10px; - - @media (max-width: 480px) { - gap: 6px; - } -} - -.social-label { - font-size: 13px; - font-weight: 500; - - @media (max-width: 480px) { - font-size: 12px; - } -} - -.social-icon i { - font-size: 20px; - color: #FFF; - cursor: pointer; - transition: transform 0.15s ease, opacity 0.15s ease; - - @media (max-width: 480px) { +/* Identidade */ +.footer-brand { + .logo-text { font-size: 18px; + font-weight: 700; + color: var(--text-main, #0F172A); + margin-bottom: 4px; + + span { color: #000; } /* ou mantenha a cor base */ + } + + .footer-tagline { + font-size: 13px; + color: var(--text-muted, #64748B); + margin: 0; } } -.social-icon i:hover { - opacity: 0.8; - transform: translateY(-1px); -} - -/* Botão Política de Privacidade */ - -.footer-button-wrapper { +/* Navegação Central */ +.footer-nav { display: flex; - justify-content: flex-end; + gap: 24px; - @media (max-width: 1199.98px) { - justify-content: center; + @media (max-width: 576px) { + flex-direction: column; + gap: 12px; } - @media (max-width: 768px) { - justify-content: flex-start; + a { + text-decoration: none; + font-size: 13px; + font-weight: 500; + color: var(--text-muted, #64748B); + transition: color 0.2s ease; + + &:hover { + color: var(--brand-primary, #E33DCF); + } + + /* Estilo para links que ainda não existem (Termos/Privacidade) */ + &.disabled-link { + cursor: default; + opacity: 0.6; + &:hover { color: var(--text-muted, #64748B); } + } } } + +/* Copyright */ +.footer-copy { + text-align: right; + + @media (max-width: 992px) { + text-align: center; + } + + p { + font-size: 12px; + color: rgba(0, 0, 0, 0.45); + margin: 0; + line-height: 1.5; + + strong { + color: var(--text-main, #0F172A); + font-weight: 600; + } + } +} \ No newline at end of file diff --git a/src/app/components/footer/footer.spec.ts b/src/app/components/footer/footer.spec.ts index 51742ed..f83fe31 100644 --- a/src/app/components/footer/footer.spec.ts +++ b/src/app/components/footer/footer.spec.ts @@ -1,18 +1,18 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { Footer } from './footer'; +import { FooterComponent } from './footer'; describe('Footer', () => { - let component: Footer; - let fixture: ComponentFixture